Flutter 實作 DeepLink 完整指南 ⎮ Part 4: 適配與掌握社交平台

不可忽視的 Deep Link 體驗

社交平台的適配

產品很常會有商品連結需要分享給朋友，這時候的管道通常會是 Line、Facebook、IG 等等，經由聊天室轉發，會有幾個期望情境，但有時候現實運作卻不一樣。以 IG、Facebook 來說不同系統的手機就有不同效果，使用 Http Link 的 Android App Link、iOS Universal Link，可能會遇到幾個場景

1. Android 可以開啟連結並開啟 APP 進行操作，但是 iOS 就不同了，會需要有一個中繼頁面，讓用戶點擊按鈕後打開 DeepLink 連結才能正常，否則在 IG 中會不被辨識，點擊後會閃一下然後被擋掉
2. 不同手機系統，有些連結能正常運作、跳轉，有些連結卻只會開啟商店

期望：

1. 沒有安裝的用戶，跳轉到商店引導下載
2. 有下載且登入的用戶，可以開啟 App 並進入到指定的商品頁面，甚至是直接帶入或顯示相關資訊

原因：在每個社交產品的運作上，開啟網頁、連結都會有自己定義的行為，可能會需要在 URI 上添加一些特定參數，給平台進行驗證並協助開啟。例如：Line 上需要添加 ?openExternalBrowser=1

iOS

Instagram

1. iOS 裝置在 IG 無法直接點擊連結就開啟 App，DeepLink 會被 IG 在內部瀏覽器擋掉
2. 必須先用 In-App Browser 開啟一個中繼網頁，上面點擊 DeepLink 按鈕打開實際網址，Deep Link 才能有效地開啟 App，這時候才可以正常處理連結，並跳轉到指定頁面。(例如：可以用 LinkTree 當成中繼頁面)

Line

1. In-App Browser 都會讓 DeepLink 失效，除非在 query 添加 openExternalBrowser=1

https://hello.yiichen.com/product/xxx?openExternalBrowser=1

Android

Instagram

1. 可以直接點擊 DeepLink 就開啟 app，但如果打開中繼頁面再點擊 DeepLink 跳轉，這樣會失效，即使已經下載了 App 仍然會跳轉到 Play Store商店