實現 iOS App 與網站之間互通的 Universal Links

Universal Links 是網站與應用程式之間的橋樑,可以將使用者從網站導引至應用程式。比如說有個網址是 http://www.example.com/book/12345678 ,在 iOS 上用 Safari 瀏覽時剛好也有安裝 App 端,網頁最上方就會出現一個  "在「XXX」App 中打開" 的橫幅,點擊就會開啟 App 端進到指定的頁面。

你可能對於 URL Schemes 不陌生,以前要從網頁連到 App 需要判斷是否有安裝該 App,然後分別連到 App 下載頁面或是開啟 App 到某一頁。現在有了 Universal Links 確實方便許多,至少已安裝的部分系統已經幫你處理好了。

 

Apple Developer 設定

先去 iOS App IDs 確定該 ID 的 Associated Domains 為啟用狀態。

 

Xcode 專案設定

Target → Capabilities → 打開 Associated Domains → + → "applinks:example.com"

 

Web 設定

新增一個 apple-app-site-association 檔案(沒有副檔名),內容如下:

{
    "applinks": {
        "apps": [],
        "details": [
            {
                "appID": "D3KQX62K1A.com.example.DemoApp",
                "paths": [
                    "*"
                ]
            }
        ]
    }
}

若已有這個檔案,只要加入 applinks 這個層級並保持 JSON 結構即可。
D3KQX62K1A 為 Team ID ,可以從這裡找到。
com.example.DemoApp 為 Bundle Identifier 。
paths 裡寫 "*" 代表整個網站都會處理,初期為測試方便所以先全部接收,如果只想接收 /book 就寫 "/book"。另外除了 "*" 也能搭配使用 "?" 及 "NOT" 使用。

將此檔案放在網站的 .well-known 資料夾下,整個網址就像這樣 https://example.com/.well-known/apple-app-site-association ,需注意必須要 https:// 開頭,如果有子網域也要分別作設定。每當 App 安裝或是更新版本才會去抓 apple-app-site-association 。

 

程式碼設定

func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([Any]?) -> Void) -> Bool {
        
    // 來源是網頁或網址
    if userActivity.activityType == NSUserActivityTypeBrowsingWeb,
        let incomingURL = userActivity.webpageURL,
        let components = NSURLComponents(url: incomingURL, resolvingAgainstBaseURL: true),
        let path = components.path {
            
        print("path = \(path)")
            
        // 如果之前有做 URL Schemes 處理,可以搭配使用
        /*  書籍資訊
            https://www.example.com/book/12345678
            com.example.DemoApp://book/12345678
         */
        if path.hasPrefix("/book/"), let bookID = path.components(separatedBy: "/").last, bookID.count >= 10 {
            // 跳轉到書籍詳細資訊
            return true
        }
        return false
    }
        
    return false
}

 


 在 iOS 使用 Safari 瀏覽此網址,可以看到上方的橫幅。若沒有看到可以捲動一下頁面,它有時會隱藏。接著把網址放到備忘錄並對他長按放開,會多出一個 "在「XXX」中打開" 的選項。

 Apple 也有提供工具來檢驗,如果出現 Error no apps with domain entitlements 也不用太糾結,可能是有此功能的新版本未正式上線的關係,只要確定網頁上方有出現橫幅就是成功了。

 


 
參考資料
https://developer.apple.com/ios/universal-links/
https://developer.apple.com/documentation/uikit/core_app/allowing_apps_and_websites_to_link_to_your_content
https://developer.apple.com/documentation/uikit/core_app/allowing_apps_and_websites_to_link_to_your_content/enabling_universal_links
https://developer.apple.com/documentation/uikit/core_app/allowing_apps_and_websites_to_link_to_your_content/handling_universal_links

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *