iOS H5页面打开APP技术总结
iOS端H5頁面打開APP的方式目前主要有兩種：URL Scheme和Universal Links。其中Universal Links是iOS9.0以后推出的一種新的方案，由于它需要在iOS9.0以后才使用，而且還要兼容微信和iOS的版本，所以在項目中會采用兩種方式結合的方式。
一、URL Scheme
scheme是iOS9之前比較主流的一種跳轉方案了， 更多的是用在了兩個APP相互跳轉中。也可以在Safari中輸入schema://跳轉到App內部，在項目中如下位置可以配置
配置好后安裝APP后，直接在訪問設置好的 URL Scheme可以直接打開APP，如平時我們用的比較多的淘寶APP，默認的 URL Scheme如下：taobao:// 在瀏覽器中輸入該scheme就會彈出如下
其實這種方式很不順滑，在每次跳轉的時候都會彈框詢問。如果iPhone中如果沒有安裝則會直接彈出錯誤提示
正常產品的思路是如果手機中沒有安裝APP的話，應跳轉到App Store下載頁面。我與前端小伙伴溝通后，因為schema跳轉失敗是沒有錯誤碼返回的。前端使用計時器計時，如果在規定時間內沒有跳轉到APP，則認為是失敗的。這種設計確實有一些體驗不好。而且在微信中輸入schema鏈接，也無法跳轉到APP。因為schema并沒有走http/https鏈接，微信也無法識別。
但是在微信端就不行了，微信端設置了白名單，完全屏蔽了URL Scheme 用法，除非加入了白名單，像京東就可以直接打開，否則是不可能的，那我們還有下面的辦法來解決這個辦法。
二、Universal Links
1、簡介
建議大家先看看蘋果官方文檔https://developer.apple.com/library/content/documentation/General/Conceptual/AppSearch/UniversalLinks.html
Universal Links（通用鏈接）是iOS9.0出的新技術。如果我們的應用支持通用鏈接，那么就可以通過https鏈接來打開APP（手機中已經安裝此APP），或者跳轉到https鏈接（手機中沒有安裝此APP）。
2、實現步驟
2.1配置https（必須是https）網站支持
創建“apple-app-site-association”文件，注意不帶后綴，放到網站根目錄，確保可以使用：https://xxx.xxx.xxx/apple-app-site-association直接可以訪問，apple-app-site-association文件內容如下：
{
"applinks": {
"apps": [],
"details": [
{
"appID": "ABCD1234.com.aaa.app",
"paths": [ "/info/*", "/mobile/*"]
},
{
"appID": "EFGH5678.com.bbb.app",
"paths": [ "*" ]
}
]
}}
相關參數如下：
appID = teamId.yourapp's bundle identifier
paths = APP支持的路徑列表，只有這些指定的路徑的鏈接，才能被APP所處理，大小寫敏感
2.2配置蘋果證書，開啟“Associated Domains”，如下圖：
Identifiers - App IDs –Edit 然后開啟打鉤 Associated Domains 后保存，配置地址：https://developer.apple.com/account/ios/identifier/bundle
2.3配置你的App的Universal Links（通用鏈接）
配置如下：項目 targets->Capabilities->Associated Domains，如圖填寫你的鏈接域名
域名的格式必須為：applinks:你的域名（ex:applinks:www.domain.com）,可以配置多個
2.4 在項目中代碼處理
1 - (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler {
2 if ([userActivity.activityType isEqualToString:NSUserActivityTypeBrowsingWeb]) {
3 NSURL *webpageURL = userActivity.webpageURL;
4 NSString *host = webpageURL.host;
5 // 在這里寫需要的邏輯，比如跳轉到某個詳情頁
6 if ([host isEqualToString:@"www.aa.tk"]) {
7
8 } else{
9 [[UIApplication sharedApplication] openURL:webpageURL options:@{} completionHandler:^(BOOL success) {
10
11 }];
12 }
13 }
14 return YES;
15 }
按照以上步驟配置完成以后就可以測試了。
三、Universal Links坑以及注意點
3.1 配置apple-app-association
域名必須支持https
域名根目錄下放這個文件apple-app-site-association，不帶任何后綴
文件為json格式保存為文本即可
json按著官網的要求填寫即可
測試是否正確，直接訪問域名+配置文件名如果能正確訪問則放置的位置是正確的。例如你想通過訪問”https://aa.test.com/xxx“來打開app，那么你要把配置文件放在”https://aa.test.com/“對應服務器根目錄，通過訪問”https://aa.test.com/apple-app-association“能直接訪問配置文件則是正確的。
蘋果也提供了一個官方網頁供我們開發者來驗證https://域名/apple-app-site-association是否有效
驗證地址如下：https://search.developer.apple.com/appsearch-validation-tool/
3.2 跨域問題
[重要]展示地址和打開的地址不能在一個域名下（作者測試發現放在同一服務器下都不行），比如展示頁的地址是https://a.domain.com/?id=10，打開的如果是https://a.domain.com/app/?id=10，系統默認是打開頁面，而不是觸發通用鏈接打開app
必須寫點擊事件跳轉到與applinks中添加的域名相同的頁面例如oap.aaaaa.com/info/download.html（要跨域),在微信中就直接跳轉到了我們的app中了！
3.3通用鏈接可被屏蔽，點擊右上角配置的鏈接之后，通用鏈接就失效了
原因分析
因為你點擊右上角的網址之后，默認就把通用鏈接禁用了，需要在Safari中恢復一下，這是iOS本身的機制。
解決方案
1.在微信里面點擊右上角“...”，在Safari中打開；
2.往下拉，看到最上面的右上角有一個“打開”的按鈕，點擊“打開”之后，以后就好了
解決方案詳見：《iOS通用鏈接（Universal Links）突然點擊無效的解決方案》
參考鏈接：https://cloud.tencent.com/developer/article/1117841
總結
以上是生活随笔為你收集整理的iOS H5页面打开APP技术总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【 D3.js 入门系列 --- 0 】
- 下一篇： Prometheus之Alertmana