ディープリンクの実装（ユニバーサルリンク編iOS）

# 概要
ユニバーサルリンクを奮闘して、実装したので、書き留めます。
実装仲間の助けになることを願って🙏

Androidはこちら！*全体のはまりポイントはこっちでまとめてます！
[ディープリンクの実装（Applink編Android）](https://qiita.com/saburo555/items/6ea42685013f24fe845d)

# 環境
Angular
capacitor

# アプリ側の準備
```
import { Component, NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { App, URLOpenListenerEvent } from '@capacitor/app';

constructor(private router: Router, private zone: NgZone) {
    this.initializeApp();
}

initializeApp() {
    App.addListener('appUrlOpen', (event: URLOpenListenerEvent) => {
        this.zone.run(() => {
            // Example url: https://beerswift.app/tabs/tab2
            // slug = /tabs/tab2
            const slug = event.url.split(".app").pop();
            if (slug) {
                this.router.navigateByUrl(slug);
            }
            // If no match, do nothing - let regular routing
            // logic take over
        });
    });
}
```
参照：[ユニバーサルリンクとアプリリンクによるディープリンク](https://capacitorjs.jp/docs/guides/deep-links)

# iosのuniversal Links実装
## 手順
1.アソシエーションファイルの作成の準備
Apple Developer siteにログインし、「Certificates, Identifiers, & Profiles」ページにアクセスし、**Apple ID**と**Bundle ID**をコピーする。
また、「Associated Domains」のチェックをつける。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889120/9ed519be-626b-88b8-0f3a-0aee67fc1c44.png)
参照：[サイトアソシエーションファイルの作成](https://capacitorjs.jp/docs/guides/deep-links#%E3%82%B5%E3%82%A4%E3%83%88%E3%82%A2%E3%82%BD%E3%82%B7%E3%82%A8%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90-1)

2.アソシエーションファイルの作成
web側の静的ファイル保管場所に「.well-known」フォルダを作成し、「apple-app-site-association」ファイルを作成する。
**「.json」（拡張子）はつけない。**

```
{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "AppleID.BundleID",
        "paths": ["*"]
      }
    ]
  }
}
```

【設定できているかの確認方法】
確認すること
- apple-app-site-associationにアクセスできるか。
- Cotents Typeがapplication/jsonであること。

確認方法
- apple-app-site-associationにアクセスできるか。
→ 「https://<ディープリンクドメイン>/.well-known/apple-app-site-association」にアクセスし、上記で設定した、ファイルの内容が表示されればOK！

- Cotents Typeがapplication/jsonであること。
→ 上記のサイトにアクセスしたとき、検証ツールのネットワークに表示されるCotents Typeがapplication/jsonになっていればOK！
または、以下のコマンドでも確認できます。
```bash
curl -v https://{ディープリンクドメイン}/.well-known/apple-app-site-association
```
:::note info
上記、下の方に「つまりポイント＞詳細」のところに少し詳しく書いております！
:::

3.Xcodeでの設定
Xcodeでを開き、Signing & Capabilitiesを表示する。「+ Capability」をクリックし、「Associated Domains」を選択し、Dmainsに、「applinks:{ディープリンクドメイン}」を入力する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889120/7da1bd71-52b7-098e-fffc-013b1b1a67f1.png)
参照：[関連するドメインの追加](https://capacitorjs.jp/docs/guides/deep-links#%E9%96%A2%E9%80%A3%E3%81%99%E3%82%8B%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AE%E8%BF%BD%E5%8A%A0)

## つまりポイント
私が詰まったポイントは、apple-app-site-associationファイルのコンテンツファイルが、「application/json」になっておらず、それに気づかず、実装完了としていたため、アプリが開かない状況になりました。
要注意です！

### 詳細
```bash
% curl -v https://{domain}/.well-known/apple-app-site-association
```
をした際に、
```bash
（省略）
content-type: application/octet-stream
```
となっていた。それではNGで、以下が正。
```
（省略）
content-type: application/json
```

:::note warn
また、一度`content-type: application/octet-stream`の際に、アクセスしていたら、CDNとブラウザにもキャッシュが残るので、キャッシュを削除してから、トライしないといけないです！
:::


# まとめ
次回すぐAndroidバージョンをまとめてます。
ぜひ、そちらもご覧ください。
iOSは比較的それほど、悩まなかった方ではありますね...！

# 追加
アプリ側の起動時にapple CDNを通してassociationファイルにアクセスする。
そのため、システム系のアクセスも許可しないと、ユニバーサルリンクが起動しない。

以下で、アクセスできるかチェックできます！
https://branch.io/resources/aasa-validator

また、原因がapple CDNのアクセスかもと思ったら、以下を確認して、associationファイルが取得できなかったら、アクセス制限（IPも含む）かかっているかもです！
```
https://app-site-association.cdn-apple.com/a/v1/{ディープリンクドメイン}
```
ただしここは、反映に時間がかかる（1~3時間くらい）ため、設定を変えてから、少し待って試すといいです。