【Github】網頁跟APP的相連

大家應該看過進網頁可以打開APP吧，除了用Deep Link之外，還可以使用Universal Link，其中最重要的設定就是AASA (apple-app-site-association)，接下來我們就來做個最簡單的介紹吧…

做一個長得像這樣的東西

作業環境

建立首頁

• 相信一般開發手機的人員，都沒有自己的網頁空間，而Github呢提供了一個免費的靜態網頁空間，真的好佛心啊…
• 雖然說Google的Firebase Hosting更為強大，但是…筆者沒什麼錢錢，而且也沒有要做一個互動式的動態網頁，還是以簡單為主…
• 現在筆者的Blog也是用Github Pages + Hugo架起來的，簡簡單單，能當筆者的筆記使用就好，不需要過度的設計功能…
• 我們先在Github建立首頁 (Homepage - 烘焙雞)，也就是跟自己同名的程式碼倉庫…

<your-name>.github.io
WilliamWeng0609.github.io

• 然後在你的Github倉庫上就會出現了…

• 最後開啟該網頁，看看它會不會讀取ReadMe.md的內容，確認名字取的對不對…

設定AASA

• 接下來我們先學習直接在github上寫東西…
• 將以下的小抄先貼上，好記性不如爛筆頭，以後就可以直接貼貼貼了…
• 內容就直接看這裡 - Link吧…

• 然後再去該網頁看看，有沒有反應…

<your-name>.github.io
WilliamWeng0609.github.io

• 再來新增AASA檔在.well-known的資料夾中…

• Github很神奇的是，你填入.well-known/後，它自動會變成資料夾，然後可以再往下填呢，太神奇了…
• 記得要Commit喲，不然不會有這個檔案的…

.well-known/apple-app-site-association

• 資料的結構是長這樣的…

• 然後我們在開網頁連連看…

<your-name>.github.io/.well-known/apple-app-site-association
WilliamWeng0609.github.io/.well-known/apple-app-site-association

• 天啊，為什麼是404呢？一定是沒有幫William按個讚啊？
• 大家有沒有發現，.well-known是個隱藏資料夾的寫法呢？Github預設是外部不能讀取隱藏資料夾的…

• 那要怎麼才能讓外部讀得到呢？請加上一個名叫_config.yml的設定檔，上面明確寫上要包含.well-known資料夾…

• 然後我們再開網頁試一次看看…

<your-name>.github.io/.well-known/apple-app-site-association
WilliamWeng0609.github.io/.well-known/apple-app-site-association

• 是不是就會變成下載檔案了呢？

• 最後在apple-app-site-association填入相關資訊即可…

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "<TeamID>.idv.william.Example",
        "paths": [
          "*"
        ]
      }
    ]
  }
}

• 至於TeamID是怎麼來的，就請拿出你的魔法小卡繳交保護費…
• 然後就可以到開發者中心就可以查到了…

• 至於其它細部的設定，可以參考Google的設定檔…

https://www.google.com/apple-app-site-association

• 再來就是確定看看Apple的CDN有沒有收到該定檔…

curl https://app-site-association.cdn-apple.com/a/v1/WilliamWeng0609.github.io

• 在Xcode上的設定，當然…要有繳保護費才有Associated Domains可以選擇…

applinks:williamweng0609.github.io
applinks:williamweng0609.github.io?mode=developer

• 然後就可以在Safari上試試看啦…

• 如果沒有反應，可能要等一下，也許是CDN動作沒有那麼快，可以先用?mode=developer來直接讀取…

範例程式碼下載

後記

其實筆者很久以前就有試著在Github上設定，但一直無法動作，直到最近才知道Github不能直接讀到隱藏資料夾，難怪不能動作，畢竟要找個https的網頁環境也不是那麼容易，一般公司也不太會讓你拿來做實驗…最近才知道拇指發炎叫媽媽手 / 腕掌關節炎，大拇指完全不能彎，但是我未婚男性，所以應該是腕掌關節炎，不過真的很難好喲，打了針類固醇才有點好轉，接著又做了增生療法 - 高濃度葡萄糖，打了六針，機能上好了很多，打字不太會麻了，希望能回復到能打籃球 / 彈琴的水準啊…