IOS H5頁面透過universal-link（通用連結）開啟APP

ywmelo發表於2020-08-13
iOSH5APP

需求：

需要在IOS微信瀏覽器中實現點選後跳轉到APP的指定頁面，如果沒安裝則跳轉到APP store

IOS前端工作

  1. 在xcode中開啟Associated Domains服務

IOS H5頁面透過universal-link（通用連結）開啟APP

  1. 在Capabilities -> Associated Domains新增跳轉域名格式為 applinks:universal-link.example.com

IOS H5頁面透過universal-link（通用連結）開啟APP

後端工作

  1. 準備兩個域名（通用連結域名和當前域名一樣，IOS會預設判斷在當前頁面開啟一個網頁）一個是後端伺服器域名 api.example.com，一個用來製作通用連結 universal-link.example.com。
  2. 在 universal-link.example.com 所對應的伺服器更目錄建立 apple-app-site-association 檔案,內容為
    {
 "applinks": {
     "apps": [],
     "details": [
         {
             "appID": "蘋果對每個APP給定的唯一ID",
             "paths": [ "/open-app"]
         }
     ]
 }
}
    配置好一定要確保該檔案可以正常訪問
  3. 同樣是在universal-link.example.com 伺服器裡啟動一個nginx，用來處理當手機沒安裝app時跳轉到APP store的操作
    server {
  ...
  location /open-app/ {
      rewrite ^  https://apps.apple.com/cn/app/xxxxx;
  }
}
  4. 前端頁面的處理
    <script type="text/javascript">
  $('.button').click(function () {
      var link = 'universal-link.example.com/open-app'
      window.location.href = link;
  })
</script>

總結流程

  1. 使用者點選跳轉按鈕，首先判斷需要跳轉的url是否和當前頁面的url為同一域名，如果不是才能觸發universal-link的方式跳轉。
  2. 使用者安裝app後系統會檢索是否開啟Associated Domains，如果開啟去下載apple-app-site-association檔案，然後對此APP進行標註。
  3. 使用者點選跳轉連結時系統會先對已標註的APP進行檢索，如果匹配則直接開啟APP
  4. 不匹配則重定向到跳轉連結，此時跳轉連結伺服器的nginx對path進行匹配，成功則再次重定向到app store的連結

(注：IOS系統必須大於9, unisersal link的域名必須為https)

參考

iOS-UniversalLink開發
apple官方文件

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章