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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM