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, animated: false)
}
}
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', true, true, document.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
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.5) else {
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