歡迎光臨
每天分享高質量文章

給App的某個功能新增桌面快捷方式

iOS中給App新增快捷方式的幾種方案:

 

  • 3DTouch,長按App喚起3DTouch選單,這個同時也可以當做小元件新增到首屏左邊的快捷方式頁面中。
  • 透過Siri喚醒對應的App。
  • 直接在桌面新增對應的快捷方式,點選快捷方式直接跳到某個App的某個功能。

 

方案1,3DTouch的入口說實話一般人還是不太容易發現的。

 

方案2,跟Siri語音互動個人覺得有點蠢。

 

方案3,我覺得最合適了,我們用支付寶刷地鐵或公交就可以透過新增桌面快捷方式,直接跳到支付二維碼。

 

那麼問題來了,支付寶是怎麼做到的呢?

 

其實是利用了Safari的PWA功能,將編碼好的網頁內容和圖示儲存到桌面。點選桌面快捷方式開啟網頁執行JS,跳轉到App對應的功能。

 

PWA的中文名叫漸進式網頁應用。它融合了Web和App的一些優點,可以在原生App的主螢幕上留下圖示。可以像Native App那樣離線使用。

 

下麵是實現步驟

1、配置App跳轉的URL

在Xcode的Target->Info->URL Types的URL Schemes新增addshortcuts,作為跳轉url的協議頭。

 

我們給app中需要新增快捷方式的功能頁設定好跳轉url:addshortcuts://profile。併在AppDelegate中新增如下程式碼

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {

    let storyboard = UIStoryboard.init(name: "Main"bundle: Bundle.main)
    let featureVc = storyboard.instantiateViewController(withIdentifier: "FeatureViewController")

    if let navController = window?.rootViewController as? UINavigationController, let topController = navController.topViewController{
        if topController.isKind(of: FeatureViewController.self) {
            return true
        }
        if url.absoluteString == "addshortcuts://profile" {
            navController.pushViewController(featureVc, animatedfalse)
        }
    }
        return true
}

 

到這裡我們可以在瀏覽器中輸入addshortcuts://profile,如果可以跳轉到App對應的功能頁面表示一切正常。

2、設定新增快捷方式到桌面的引導H5頁面和跳轉到App的H5頁面

1、引導新增桌面快捷方式的H5頁面

 

這個引導頁面支付寶做的不錯,幾經輾轉,我拿到了這個頁面,稍微修改了下,介面效果如下圖

 

2、跳轉到App的H5頁面

 

 

這個頁面是個空白頁,當我們點選快捷方式的時候,透過這個空白頁跳轉到App。

 

<a id="redirect" href="addshortcuts: profile"="">a id="redirect" href="addshortcuts:>

開啟空白頁,執行下麵這段JS,模擬點選上面的a標簽

var element = document.getElementById('redirect');
var event = document.createEvent('MouseEvents');
event.initEvent('click'truetruedocument.defaultView, 10000falsefalsefalsefalse0null);
document.body.style.backgroundColor = '#FFFFFF';
setTimeout(function() { element.dispatchEvent(event); }, 25);

 

其實引導頁和跳轉頁可以放到一起,透過window.navigator.standalone檢測Safari開啟的Web應用程式是否全屏顯示。如果是全屏顯示表示是從桌面快捷方式進入的,那麼就顯示空白頁,自動執行上面那段JS。如果不是全屏顯示表示是從app跳轉過去的引導頁。

3、搭建可以開啟編碼後H5頁面的本地server

1、h5編碼

 

Safari可以直接開啟一串包含頁面內容編碼的URL,這個URL包含了這個頁面需要的所有資訊。

data:text/html;base64,PGEgaHJlZj0iaHR0cHM6Ly9naXRodWIuY29tL0RhcmllbENoZW4vaU9TVGlwcyI+aU9TVGlwczwvYT4=

 

在Safari中輸入上面那串URL,會顯示一個iOSTips的標簽。跟正常的標簽一樣,這是因為上面的URL是我們經過base64編碼後處理的。同樣我們可以把h5頁面轉化成這種URL編碼格式。

 

2、搭建本地server

 

iOS中不能用UIApplication.shared.open(url)的方式開啟包含Base64編碼的URL,如果我們用SFSafariViewController,它也是不能夠識別這個格式的URL。這個問題好像是出在蘋果那邊。

 

那支付寶是怎麼做的呢?它是直接把這個頁面部署到了服務端,我們可以參考這種方法,用Swifter搭建一個本地的server。

 

guard let deeplink = URL(string"addshortcuts://profile"else {
    return
}
guard let shortcutUrl = URL(string"http://localhost:8244/s"else {
    return
}
guard let iconData = UIImage(named: "feature_icon")?.jpegData(compressionQuality: 0.5else {
    return
}
let html = htmlFor(title: "功能快捷方式", urlToRedirect: deeplink.absoluteString, icon: iconData.base64EncodedString())
guard let base64 = html.data(using: .utf8)?.base64EncodedString() else {
    return
}
server["/s"] = { request in
    return .movedPermanently("data:text/html;base64,(base64)")
}
try? server.start(8244)

4、總結

 

 

這種方式有個問題,多次新增桌面快捷方式會出現多個相同的圖示,有解決方法的同學歡迎留言。

 

具體實現 猛擊https://github.com/DarielChen/iOSTips/tree/master/Demo/47.%E7%BB%99App%E7%9A%84%E6%9F%90%E4%B8%AA%E5%8A%9F%E8%83%BD%E6%B7%BB%E5%8A%A0%E5%BF%AB%E6%8D%B7%E6%96%B9%E5%BC%8F

 

更多內容歡迎關註iOSTips

https://github.com/DarielChen/iOSTips

贊(0)

分享創造快樂