web-dev-qa-db-ja.com

PWA「ホーム画面に追加」インストールバナーをトリガーするアプリ内ボタンを作成することは可能ですか？

適切に作成されたProgressive Web Appモバイルブラウザーでは、ユーザーにホーム画面にアプリを「インストール」するよう促すバナーが表示されることを理解しています。

アプリ内からそのプロンプトをトリガーする方法を探していましたが、何も見つかりませんでした。

インストールプロンプトバナーをいつでも呼び出すために使用できるJavaScriptの行はありますか？たとえば、インストール画面に追加できるものは、ヘルプ画面に隠れていますか？

一部のユーザーは、インストールバナープロンプトが表示されない場合、[ホーム画面に追加]オプションを見つけるのが難しい場合があります。もう一度クリックするようにクリックできるボタンを提供したいと思います。

javascriptservice-workerprogressive-web-apps
18
Adam D

Chrome（またはPWAをサポートするブラウザー） Webアプリインストールバナーのbeforeinstallpromptイベントをトリガーします 、より適切なタイミングでキャッチして再トリガーできますユーザーがあなたのサイトをホームページに追加することについて見逃したり、納得したりすることはないと思います。 Chromeバージョン68で開始し、beforeinstallpromptをキャッチし、プログラムでインストールプロンプトを処理することは必須であり、バナーは自動的に表示されません。

ユーザーがホーム画面に追加するプロンプト/拒否を逃した場合、イベントを手動でトリガーすることはできません。これは、ユーザーにホーム画面への追加を繰り返し求めるようにユーザーを悩ませるWebページを避けるために、そのように意図的に残されています。ユーザーの観点を考えると、これは完全に理にかなっています。

はい、ユーザーが誤ってこのオプションを見逃し、「ホーム画面に追加」するブラウザメニューオプションを知らない場合があり、同じことを再度トリガーするのは良いことです。しかし、残念ながら、それはオプションではありません。現時点では少なくとも、開発者にPromptを委ねる場合、開発者がどのように悪用できるかを考えると、その変化はあまり見られません。

代替オプション：ユーザーがインストールプロンプトを逃した場合、またはホーム画面にインストールしないことを選択した場合は、しばらくして、あなたがあなたのサイトを好きになっていると思うときコンバージョンの場合）、ブラウザメニューからサイトをホーム画面に追加するためのフルページまたはハーフページDivポップアップのインストール手順を表示できます。メニューからホーム画面に追加する方法をユーザーに示すいくつかの画像またはGifアニメーションを含めることができます。それにより、すべてではないにしても、ほとんどのユーザーにとって自明なはずです。

ここ は同じもののコード例であり、iOS固有です（#PROTIP 3を参照）。

ボーナスとして、ユーザーがホーム画面に追加するときに割引や追加機能などのプロモーションを表示できます。 PWAには、ホーム画面またはブラウザーからサイトにアクセスしているかどうかを確認する方法があります。

開発/テストの場合：このバナーを開発/テストの目的で複数回使用する必要がある場合は、Chrome同様に、

chrome://flags/#bypass-app-banner-engagement-checks
21
Anand

モバイルでは、Chrome、ブラウザのメニューから[ホーム画面に追加]にアクセスできます。Android/ iOSのモバイルSafari/Firefoxでも同様のオプションが存在する場合があります。）マニフェストファイルが読み取られ、元のプロンプト機能と同様にアプリが追加されます。

JavaScriptを使用して手動でプロンプトを呼び出すことはできませんが、回避策は、メニューを手動で開いて特定のユーザーエージェントに追加する方法をユーザーに示す画面上の指示を提供することです。

enter image description here

enter image description here

2
AnthumChris

PWAのインストールの処理の問題に役立つブラウザーが現在起動しているイベントがあります。これはまだWeb標準ではありませんが、優れたアプローチです。

  • 「beforeinstallprompt」はプロンプトが表示される直前に起動され、
  • 「appinstalled」は、インストールが完了するとすぐに起動されます。

したがって、「beforeinstallprompt」イベントをインターセプトし、発生を防止してバナーが表示されないようにし、バナーを表示したいときに備えて隠し、最後にユーザーがクリックして先に延期したボタンを起動するボタンを作成しますイベントは自由自在。

以下は、これを達成する方法に関するリンクです。

https://web.dev/installable/discover-installable/codelab-make-installable

0
Emmanuel Mahuni

まあ、変数にdeferredPrompt値を保存して後で使用することを妨げるものは何もありません。その後、カスタムボックスをポップアップできます。ユーザーがそれを閉じた場合、deferredPrompt.Prompt（）をまだ実行しておらず、後で使用できます。私はReduxに保管しています。ユーザーがインストールプロンプトを閉じると、ハンバーガーメニューのdeferredPromptを使用していつでもインストールできます。

イベントをインストールしてプロンプトとして保存する

 const beforeInstallListener = e => {
        // Prevent Chrome 76 and later from showing the install Prompt
        e.preventDefault();
        // Stash the event so it can be triggered later.
        dispatch(setAndroidDeferredPrompt(e));
        dispatch(showAndroidPromptDownload(true));
    };
    window.addEventListener("beforeinstallprompt", beforeInstallListener);

このdeferredPromptを使用してユーザーにプロンプ​​トを出す関数を作成する

    const installToAndroid = async () => {
    dispatch(showAndroidPromptDownload(false));
    deferredPrompt.Prompt(); // Wait for the user to respond to the Prompt
    const choiceResult = await deferredPrompt.userChoice;

    if (choiceResult.outcome === "accepted") {
        console.log("User accepted the PWA Prompt");
    } else {
        closeAndroidPromptWithoutDownload();
        console.log("User dismissed the PWA Prompt");
    }
    dispatch(setAndroidDeferredPrompt(null));
};

ユーザーがバナーをクリックしてインストールすると、deferredPrompt.Prompt（）が呼び出され、機能しなくなります。したがって、deferredPromptが存在するかどうかを確認し、ユーザーが.Prompt（）を呼び出した場合は必ずnullに設定します。

{deferredPrompt && <button onClick={() => installPWA(deferredPrompt)}>Installer til hjemskjerm</button>}

これはReact Hooks、ReduxおよびLocalStorage（pwa.reducer.js状態を保存する場所）で行われました。

0
jeyloh