web-dev-qa-db-ja.com

PWA-beforeinstallpromptが呼び出されない

こんにちは私はカスタムPWA「ホーム画面に追加」をインストールしようとしています。

ServiceWorkerRegistrationは成功しました。

しかし、関数beforeinstallprompが登録後に呼び出されていません。

<script type="text/javascript">

  function request_debug(paramdata){

    document.getElementById('output').innerHTML += '<BR>'+ paramdata;

  }

  window.addEventListener('load', function() {

      document.getElementById('output').style.display = "block"; 

      if('serviceWorker' in navigator) {

      navigator.serviceWorker.register('sw.js').then(function(registration) {
        console.log('Service worker  registrado com sucesso:', registration);
        request_debug(registration);

      }).catch(function(error) {
        console.log('Falha ao Registrar o Service Worker:', error);
        request_debug(error);

      });

          var isTooSoon = true;
          window.addEventListener('beforeinstallprompt', function(e) {

              //e.preventDefault();
              //e.Prompt();
              //promptEvent = e;
              request_debug(' window.addEventListener beforeinstallprompt fired!')

              if (isTooSoon) {
                //e.preventDefault(); // Prevents Prompt display
                // Prompt later instead:
                setTimeout(function() {
                  isTooSoon = false;
                  e.Prompt(); // Throws if called more than once or default not prevented
                }, 4000);
              }

          });

    }else{

      console.log('serviceWorker not in navigator');
      request_debug('serviceWorker not in navigator');

    }


  });

</script>

また、ルートディレクトリのサービスワーカー... HTTPSは安全です！

私のマニフェスト：

{
  "background_color": "purple",
  "description": "lojaportaldotricot TESTE",
  "display": "standalone",
  "icons": [
    {
      "src": "/componentes/serviceWorker/fox-icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "name": "lojaportaldotricot",
  "short_name": "lojaportaldotricot",
  "start_url": "/dashboard"
}

「有効」に設定した場合にのみ機能しますchrome：// flags /＃bypass-app-banner-engagement-checks

編集：問題が見つかったようです。 ChromeのDevTools（F12）の[監査]タブには、デバッグ情報が表示されます。 enter image description here

progressive-web-apps
25
sealabr

これを試して ：

 <script>
    let deferredPrompt;

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

    // Installation must be done by a user gesture! Here, the button click
    btnAdd.addEventListener('click', (e) => {
      // hide our user interface that shows our A2HS button
      btnAdd.style.display = 'none';
      // 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;
        });
    });

    </script>

beforeinstallpromptは、いくつかの条件に該当する場合にのみ起動されます。

  • PWAがまだインストールされていない
  • ユーザーエンゲージメントヒューリスティックに適合します（以前は、ユーザーは少なくとも30秒間ドメインとやり取りする必要がありましたが、これはもう要件ではありません）。
  • Webアプリには、Webアプリマニフェストを含める必要があります。
  • 安全なHTTPS接続を介してWebアプリを提供する必要があります。
  • Service Workerをフェッチイベントハンドラーに登録しました。
22
Sreelal TS

上記のすべての手順に加えて、アプリがここでアンインストールされていることも確認してください：chrome://apps

Chrome MacのAppsフォルダからアプリを削除するだけではChromeから削除されないようです

アプリが以前にインストールされている場合、beforeinstallpromptはトリガーされず、エラーもスローされません:(

6
andimiya

ページヘッダーにマニフェストファイルを含めていますか？

<link rel="manifest" href="/manifest.json">
3
Adam Griffith

はい、「start_url」はマニフェストで正しくありません。

マニフェストの一部である場合IS BROKEN 'beforeinstallprompt'は起動されません。

マニフェストのstart_urlが正しくないため、イベントは発生しません。

これを理解するための私のお気に入りの方法は、404用のDevToolsの[NETWORK]タブを確認することです。

また、マニフェストが壊れている理由を確認するもう1つの方法は、DevToolsで> AUDITを実行して、エラーを確認することです。 @sealabrが見つけたもののように：

「失敗：Service Workerはマニフェストのstart_urlを正常に処理できません。フェッチされたstart_urlの待機中にタイムアウトしました。」これは「start_url」を意味します

このスレッドは、プロダクションのトラブルシューティングに非常に役立ちました。ありがとう。

1
Jack Stone