1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

お題は不問!Qiita Engineer Festa 2024で記事投稿!
Qiita Engineer Festa20242024年7月17日まで開催中!

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

Last updated at Posted at 2024-06-27

概要

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

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 IDBundle IDをコピーする。
また、「Associated Domains」のチェックをつける。

image.png
参照:サイトアソシエーションファイルの作成

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://{ディープリンクドメイン}/.well-known/apple-app-site-association

上記、下の方に「つまりポイント>詳細」のところに少し詳しく書いております!

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

image.png
参照:関連するドメインの追加

つまりポイント

私が詰まったポイントは、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

また、一度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時間くらい)ため、設定を変えてから、少し待って試すといいです。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?