概要
ユニバーサルリンクを奮闘して、実装したので、書き留めます。
実装仲間の助けになることを願って🙏
Androidはこちら！*全体のはまりポイントはこっちでまとめてます！
ディープリンクの実装（Applink編Android）
環境
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
});
});
}
iosのuniversal Links実装
手順
1.アソシエーションファイルの作成の準備
Apple Developer siteにログインし、「Certificates, Identifiers, & Profiles」ページにアクセスし、Apple IDとBundle IDをコピーする。
また、「Associated Domains」のチェックをつける。
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！
または、以下のコマンドでも確認できます。
curl -v https://{webサイト側ドメイン}/.well-known/apple-app-site-association
上記、下の方に「つまりポイント＞詳細」のところに少し詳しく書いております！
3.Xcodeでの設定
Xcodeでを開き、Signing & Capabilitiesを表示する。「+ Capability」をクリックし、「Associated Domains」を選択し、Dmainsに、「applinks:{webサイト側ドメイン}」を入力する。
参照：関連するドメインの追加
つまりポイント
私が詰まったポイントは、apple-app-site-associationファイルのコンテンツファイルが、「application/json」になっておらず、それに気づかず、実装完了としていたため、アプリが開かない状況になりました。
要注意です！
詳細
% curl -v https://{domain}/.well-known/apple-app-site-association
をした際に、
（省略）
content-type: application/octet-stream
となっていた。それではNGで、以下が正。
（省略）
content-type: application/json; charset=UTF-8
まとめ
次回すぐAndroidバージョンをまとめてます。
ぜひ、そちらもご覧ください。
iOSは比較的それほど、悩まなかった方ではありますね...！