QRコードでのアプリ起動とユニバーサルリンク

QRコードを読み込んでアプリがインストール済みの場合はアプリを起動し、未インストールのときはストアもしくは特定のURLをブラウザで開くようにしたい。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <title>Starting App...</title>
    <script>

        var URL = "example-app://~~"; //Android 起動して表示したいアプリのページ
        var MARKET = "market://details?id=com.example";
        var iTunes = "itms://itunes.apple.com/app/idxxxxxxx";
        var QR = "http://example.com/qr";
        var UniversalLink = "https://example.com/app-page"; //iOS 起動して表示したいアプリのページ

        function onLoad() {
            if (navigator.userAgent.match(/Android/)) {
                if (navigator.userAgent.match(/Chrome/)) {
                    setTimeout(function () {
                        if (!document.webkitHidden)
                            window.location.href = MARKET;
                    }, 1000);
                    window.location.href = URL;
                } else {
                    var iframe = document.createElement("iframe");
                    iframe.style.border = "none";
                    iframe.style.width = "1px";
                    iframe.style.height = "1px";
                    var t = setTimeout(function () {
                        window.location = MARKET;
                    }, 1000);
                    iframe.onload = function () {
                        clearTimeout(t)
                    };
                    iframe.src = URL;
                    document.body.appendChild(iframe);
                }
            } else if (navigator.userAgent.match(/iPhone|iPad|iPod/)) {
                setTimeout(function () {
                    if (!document.webkitHidden) {
                        window.location = iTunes;
                    }
                }, 25);
                window.location = UniversalLink;
            } else {
                var img = document.createElement("img");
                img.src = "https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl=" + encodeURIComponent(QR);
                document.body.appendChild(img);
            }
        }
    </script>
</head>
<body onload="onLoad()">
</body>
</html>

ios - How to fall back to marketplace when Android custom URL scheme not handled? - Stack Overflow を参考にQRコード読み込み先のページに上記のhtmlを設置した。

QRコード読み込み→ブラウザ起動して移動、リダイレクトさせて→インストール済みの場合アプリが起動 or 未インストール時はストアが開くという処理になる。

Androidは上記の処理で問題なく動いたが、iOSのユニバーサルリンクはリンク元とリンク先が同一ドメインだと使えないという罠があった。

ユニバーサルリンクはリンクを開いた時にインストール済みのアプリが起動する仕組み。リンクをクリックすると https://リンク先.com/apple-app-site-association ¹ に設定してあるリンクのpathに対応してAssociatedDomainsのリンクに登録されたアプリが起動する。

たとえばAssociatedDomainsにapplinks:example.comと設定されたアプリをインストールしてAというサイトでexample.comのリンクを踏むとhttps://example.com/apple-app-site-association の設定をもとにアプリが起動する。

apple-app-site-association.json

{
    "applinks": {
        "apps": [],
        "details": {
            "チーム名.com.example": {
                "paths": [
                    "*"
                ]
            }
        }
    }
}

ただリンク元のドメインとリンク先のドメインが同一だと起動しない仕組みになっている。

example.com内のページをSafariで閲覧中にexample.com/~~のリンクを踏んでもアプリは起動しない。

When a user is browsing your website in Safari and they tap a universal link to a URL in the same domain as the current webpage, iOS respects the user’s most likely intent and opens the link in Safari. If the user taps a universal link to a URL in a different domain, iOS opens the link in your app.

ユーザーがSafariでWebサイトを閲覧しているときに、現在のWebページと同じドメインのURLへのユニバーサルリンクをタップすると、iOSはユーザーの最も可能性の高い意図を尊重し、Safariでリンクを開きます。ユーザーが別のドメインのURLへのユニバーサルリンクをタップすると、iOSはアプリでリンクを開きます。

https://developer.apple.com/library/archive/documentation/General/Conceptual/AppSearch/UniversalLinks.html

普段iPhoneを使用していないので知らない挙動だったが閲覧中にURLをタップして勝手に外部アプリが起動しないようにという配慮らしい。

今回の場合QRコードでhttps://example.com/~~にアクセスして、ユニバーサルリンクとして設定したhttps://example.com/app-page にリダイレクトしてアプリを起動するはずだった。しかし、リダイレクト元とリダイレクト先がドメインが同一なのでアプリが起動しなかった。

そのためAssociatedDomainsに設定しているapplinksをsub.example.comに変更し”https://sub.example.com/apple-app-site-association” を設置してユニバーサルリンクをsub.example.comに変更。 QRコードのURLはそのまま、https://example.com/~~ に設置しておいて、https://sub.example.com にリダイレクトさせるようにした。ややこしい。

https://qiita.com/takashico/items/dafb0a749bca8156ddd6

アプリインストールor更新時にダウンロードされるらしい。https://developer.apple.com/forums/thread/6972 ↩

Vapor Trail

明るく楽しく元気よく

QRコードでのアプリ起動とユニバーサルリンク