Html5ページオープンアプリに関するいくつかの考察

1.要件

少し前のことですが、あるプロジェクトを開発していたところ、ある要件に出くわしました。簡単に言うと、私たちのH5ページには「アプリで開く」ボタンがあり、ユーザーがそれをクリックすると、ユーザーがアプリをインストールしている場合は直接アプリが開かれ、ユーザーがアプリをインストールしていない場合は、アプリのダウンロードページにジャンプするのです

まず、私の知識では、H5はアプリがインストールされているかどうかを検出することはできないはずです（もし検出方法を知っている人がいれば、コメント欄で教えてください、ありがとうございます！）。そのため、アプリがインストールされているかどうかを判断するプロセスを完了させるためには、いくつかのトリックが必要です。

例としてAndroid携帯を導入する手順の後、システムの現在のios9のバージョンは、アプリがインストールされているかどうかを判断するためにこれらのプロセスを行うために私たちはH5する必要はありません（ios9は、ユニバーサルリンク（ユニバーサルリンク）を提供することによって行うことができる後、Apple App Storeを開くためにアプリプロンプトをインストールしないように、インストールしたアプリが直接開いてジャンプしている）。

2.スキームプロトコルについて

スキームプロトコルはページ内ジャンププロトコルの一種で、アプリ内のジャンプしたい各ページにジャンプするようにスキームプロトコルをカスタマイズできます。スキームプロトコルはジャンプするURLの形式になっているので、このURLからアプリ内の指定したページにジャンプすることもでき、これがH5のアプリを開く原理になっています。

schemeのurl形式は、以下のようなものです。 [scheme]://[host]/[path]? [query]

3. H5をアプリで開くための2つの実装方法

3.1 タイマーだけで判断する

この方法のアイデアは、まずネイティブアプリの生徒で定義されたスキームのurlとしてジャンプしたいアドレスを設定し、その後、タイマーを設定し、タイマーで実行されるロジックは、ユーザーの携帯電話にアプリがインストールされていない場合、しばらくしてからダウンロードアプリページにジャンプするようにすることである。

コアとなるコードは以下の通りです。(ジャンプを完了するためにiframeを使用することができますが、iosなどのデバイスでiframeが許可されているかどうかを検討する必要があります)

const schemeUrl = 'xxx'
const downloadUrl = 'XXX'
const wait = 500
try {
    location = schemeUrl
    setTimeout(() => {
        location = downloadUrl
    }, wait)
} catch (e) {
    console.error(e)
}

問題点

上記の実装の問題点は、アプリへのジャンプが成功しても、元のH5ページが時間経過でダウンロードページにジャンプしてしまうため、体感的には

3.2 ウィンドウのhiddenプロパティを利用した判定

この方法のアイデアは、アプリが正常に起動し、H5ページがバックグラウンドに配置されると、window.hiddenプロパティがtrueに変化するので、このプロパティ変化でアプリが開いているかどうかを判断し、開いていなければダウンロードページにジャンプするというもので、もちろん、ここでタイマーも使用しています。

コアとなるコードは以下の通りです。

function checkOutApp() {
    const schemeUrl = 'xxx'
    const downloadUrl = 'XXX'
    const wait = 1000
    // Whether to enter the background or not
    const hidden = false
    location = schemeUrl
    // If the page is not hidden within a certain time, it will jump to the download page
    setTimeout(() => {
        if (!hidden) {
            location = downloadUrl
        }
    }, wait)
    // Page visibility change event
    document.addEventListener("visibilitychange", function(){
        if (document.hidden) {
            hidden = true
        }
    });
}

問題点

現在、一部のAndroidブラウザでは、アプリが存在する場合、最初にアプリを開くかどうかを尋ねる確認ボックスをポップアップ表示し、ユーザーが同意した場合のみ、アプリにジャンプします。ユーザーが確認をクリックしない場合、それはまだ良い経験ではない、ダウンロードページにジャンプすることになります。

4.いくつかの考え

上記の問題点を踏まえて、インタラクションの中に「ダウンロードページへ移動する」というインタラクションを追加し、ユーザーがアプリをインストールしない場合、一定時間後に、まずユーザーに「アプリがインストールされていないか、ダウンロードをクリックしてください」と同様のプロンプトを出し、ボタンをクリックしてダウンロードページにジャンプするようにすればいいと思います。 /ユーザーがアプリをインストールしていない場合、一定時間が経過すると、最初に「クリックでダウンロード」のようなボタンが表示され、ユーザーがクリックするとダウンロードページにジャンプします。

Html5ページオープンアプリについては、この記事がすべてです、より関連するHtml5オープンアプリの内容は、スクリプトハウスの過去の記事を検索するか、次の関連記事を閲覧を続けてください、あなたは将来的にもっとスクリプトハウスをサポートして願っています！。