PWA - beforeinstallprompt 未調用

Question

您好，我正在嘗試安裝自定義 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) 的 Audits 選項卡提供了調試信息。

Answer 1

試試這個 ：

 <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 應用程序清單。
• 您的 Web 應用程序必須通過安全的 HTTPS 連接提供服務。
• 已使用 fetch 事件處理程序注冊了 Service Worker。

Answer 2

除上述所有步驟外，還要檢查該應用程序是否已在此處卸載： chrome://apps

只是從 Mac 上的 Chrome Apps 文件夾中刪除該應用程序似乎不會將其從 Chrome 中刪除

如果之前安裝了該應用程序，則不會觸發beforeinstallprompt也不會拋出任何錯誤:(

Answer 3

是的，清單中的“start_url”不正確。

如果清單的任何部分損壞，則不會觸發“beforeinstallprompt”。

該事件未觸發，因為...清單 start_url 不正確。

我最喜歡的解決方法是查看 DevTools for 404 的 > NETWORK 選項卡。

另一種查看清單為何損壞的方法是在 DevTools 中運行 > AUDIT 並查看錯誤是什么。 就像@sealabr 發現的那樣：

“失敗：Service Worker 沒有成功提供清單的 start_url，等待獲取的 start_url 超時。” 這意味着“start_url”

該線程對排除生產故障有很大幫助。 謝謝。

Answer 4

您是否在頁眉中包含清單文件？

<link rel="manifest" href="/manifest.json">

Answer 5

對於需要閱讀本文的任何人：我在嘗試找出提示時在我的 Vue3 應用程序上工作時遇到的一個小注意事項：

beforeInstallPrompt將在頁面加載后不久觸發。

因此，請確保在頁面加載附近設置事件偵聽器。 我花了幾個小時才找到這個。 我試圖在用戶入職的某個地方添加事件偵聽器。 頁面加載后的方式。 並且無法弄清楚為什么提示沒有顯示。

Answer 6

這是在移動設備上未觸發beforeinstallprompt另一個原因（在帶有 Chrome 的 Android 設備上觀察到）：

在 web 服務器上找不到manifest.webmanifest定義的符號文件（移動瀏覽器報告 404）。 這就是在我的情況下沒有觸發beforeinstallprompt的原因。

@例子

 
 // your manifest
 {
    /* ... */
    "icons": [
        {
          "src": "maskable_icon_x192.png",
          "sizes": "192x192",
          "type": "image/png",
          "purpose": "any maskable"
        },
        /*...*/
     ]
}

確保所有圖標文件（例如 maskable_icon_x192.png）都存在於您的 Web 服務器上。

一切順利，湯姆