Flutter x Universal Linksでアプリを起動する方法を詳しく解説

2022 6/07

2021.09.23 2022.06.07

こんにちは、株式会社Pentagonでエンジニアをしている日浦です。

今回は Universal Links（AndroidはAppLinks）でアプリを開く方法を解説します。

Universal Linksの実装方法はいろいろな記事に載っているものの、
それだけではアプリ起動することができずに苦戦しました。

この記事では、これからUniversal Linksを実装する方が、
サクッと実装できるように必要な設定など詳しく解説します。

Universal Linksとは？

Universal Linksとは、WebとiOSアプリの両方を示すURLです。
Universal Linksにアクセスすると、WebブラウザではなくiOSアプリが起動します。

» 関連記事：URLSchemaとUniversal Linksの違いまとめ

ちなみに、Androidの場合は、AppLinksと呼びます。

サーバーサイド側の準備

サーバーサイド側でapple-app-site-associationとassetsLinks.jsonを用意する必要があります。

https://pentagon.tokyo/apple-app-site-association
https://pentagon.tokyo/.well-known/apple-app-site-association
https://pentagon.tokyo/.well-known/assetsLinks.json

上記のパスにそれぞれ用意します。

apple-app-site-accosiationの中身

{
  "applinks": {
       "apps": [],
        "details": [
           {
               "appID":"X5xxxxJ.tokyo.pentagon.MyApp",
               "paths":[ "*" ]
           }
         ]
    }
}

appIDはteamID.bundleIDの組み合わせです。

assetlinks.jsonの中身

[{
      "relation": ["delegate_permission/common.handle_all_urls"],
      "target": {
        "namespace": "android_app",
        "package_name": "tokyo.pentagon.MyApp",
        "sha256_cert_fingerprints":
        ["14:6D:E9:83:C5:73:06:50:D8:EE:B9:95:2F:34:FC:64:16:A0:83:42:E6:1D:BE:A8:8A:04:96:B2:3F:CF:44:E5"]
      }
 }]

sha256_cert_fingerprintsは、Google Play Consoleから取得できます。

フロントエンド側での設定

iOSアプリの設定

Apple Developer PortalでAssociated Domainsを有効にします。

Xcodeからプロジェクトを開き、Associated Domainsにドメインを登録します。

<key>com.apple.developer.associated-domains</key>
    <array>
        <string>applinks:pentagon.tokyo</string>
    </array>

Androidアプリの設定

AndroidManifest.xmlに追記

<!-- App Links -->
<intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW"/>
    <category android:name="android.intent.category.DEFAULT"/>
    <category android:name="android.intent.category.BROWSABLE"/>
    <!-- Accepts URIs that begin with https://YOUR_HOST -->
    <data android:scheme="https" android:host="pentagon.tokyo"/>
</intent-filter>

注意事項

テスト方法 - SafariにURLを直接入力しても動かない

SafariのURLに直接入力してURLを叩いてもアプリが起動するのかと思いましたが、
そうではないようです。

messageアプリを使ってURLを送信します。送信されたURLをクリックするとアプリを開くことができました。

また、コマンドで開くこともできます。

xcrun simctl openurl booted https://pentagon.tokyo

をコンソールに入力すると、シュミレータでもアプリ起動を確認することができます。

Androidはリンクをクリックすると、どのアプリで開くか確認画面が表示されるので、
MyAppを選択することでアプリ起動することができました。

iOS13をサポートするか否か

公式ドキュメントには次のように記載があります。

In macOS 11 and later and iOS 14 and later, apps request apple-app-site-association files from an Apple-managed content delivery network (CDN) specifically for associated domains, instead of directly from your web server.

iOS14以降では、AppleのCDNがapple-app-site-accosiationを参照します。

参考サイト

以下のサイトを参考にさせていただきました。

合わせて読むと理解が深まるはずです。