IOS H5頁面通過universal-link(通用連結)開啟APP

ywmelo發表於2020-08-13

需求:

需要在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 協議》,轉載必須註明作者和本文連結

相關文章