web-dev-qa-db-ja.com

PWA：installpromptの前にリトリガーする方法？

私たちのサイトは、訪問者がホーム画面に追加（A2HS）を選択できるようにPWAを使用しています。ただし、Googleアナリティクスのデータによると、却下率は受け入れ率と比較して高すぎます。

受け入れ率を向上させるために、UXをより直感的で明確にする予定です。ただし、すでにA2HSダイアログを閉じている訪問者を復活させたいと考えています。

その方法は？私の知る限りでは、beforeinstallpromptリスナーのみを追加できますが、openinstallpromptメソッドはありません。

google-chromeservice-workerprogressive-web-apps
9
Pahlevi Fikri Auliya

いいえ、インストールバナーをトリガーして、ブラウザーで起動することはできません。サイトがすべてのPWA基準を満たし、ユーザーが十分な頻度でアクセスしている場合（十分な頻度はブラウザーベンダーによって明示されていない）、ブラウザーは再度プロンプトを表示します。コードで同じことをトリガーすることはできません。 この回答を参照 なぜそのように動作するのか、そして代替ソリューションは何かについて。

7
Anand

セキュリティ上の理由から、他のユーザーも同様に記述しているように、ブラウザーではインストールイベントを手動でトリガーすることはできません。

ただし、自分でテストできる方法があります。 chrome：// flagsに移動して、「ユーザーエンゲージメントチェックのバイパス」を有効にします

これでプロンプトが開始され、テストできるようになります。

乾杯

6
Spock

アナンドの答えは今のところ正しいです。しかし、Chrome 68、ChromeはA2HSプロンプトを自動的に表示しません。トリガーするには、Chromeを明示的に指定する必要があります。プロンプト。

enter image description here

Googleのドキュメントによると、ここにプロンプ​​トを処理するコードのスニペットがあります。

beforeinstallpromptを聞く

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the Prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});

プロンプトをトリガーするリスナーに次のコードを挿入します

// Show the Prompt
deferredPrompt.Prompt();
// Wait for the user to respond to the Prompt
deferredPrompt.userChoice
.then((choiceResult) => {
  if (choiceResult.outcome === 'accepted') {
    console.log('User accepted the A2HS Prompt');
  } else {
    console.log('User dismissed the A2HS Prompt');
  }
  deferredPrompt = null;
});

詳細は このリンク を参照してください。

4
oninross