beforeinstallprompt 不會在 PWA 的 Vue 應用程序中觸發

Question

我已經使用 vue cli 標准安裝了 PWA 應用程序。 之后，我只需添加本指南提供的代碼。

但是當我訪問 http://localhost:8080/ 時，什么都沒有觸發。

這是 App.vue 代碼：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="PWA Test"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

let deferredPrompt;

function showInstallPromotion() {
  alert("ciao");
  console.log(deferredPrompt);
}

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  created() {
    window.addEventListener('beforeinstallprompt', (e) => {
      alert("beforeinstallprompt");

      // Prevent the mini-infobar from appearing on mobile
      e.preventDefault();
      // Stash the event so it can be triggered later.
      deferredPrompt = e;
      // Update UI notify the user they can install the PWA
      showInstallPromotion();
    });
  },
  mounted() {
    if("serviceWorker" in navigator) {
      navigator.serviceWorker.register("service-worker.js").then(reg => {
          console.log("Registration succesful, scope: " + reg.scope);
      })
      .catch(err => {
          console.log(err);
      })
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

表白問題？ 我相信使用 vue cli 會受到尊重。 如何檢查清單是否正常以及是否已准備好使用 PWA 應用程序？ 在這個世界上的第一步，我錯在哪里？ 謝謝

這是 manifest.json（在公共文件夾中）我有：

{
  "name": "vuejspwa",
  "short_name": "vuejspwa",
  "icons": [
    {
      "src": "./img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "fullscreen",
  "background_color": "#000000",
  "theme_color": "#4DBA87"
}

Answer 1

您無法在開發模式下測試pwa功能。 您首先必須將您的應用程序構建到生產環境並使用服務器來托管 output dist文件夾。 您可以使用 web server for chrome 等工具為您的應用程序提供測試服務。

Answer 2

您需要首先滿足一些標准才能使您的應用程序可安裝。

標准是：

• 應用尚未安裝
• 通過 HTTPS 提供服務（但也應在本地主機中與 HTTP 一起使用）
• 包括 Web 應用清單

清單如下所示：

//manifest.webmanifest

{
  "name": "My App",
  "short_name": "MA",
  "start_url": ".",
  "display": "standalone",
  "icons": [
  {
    "src": "images/touch/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "images/touch/homescreen512.png",
    "sizes": "512x512",
    "type: "image/png"
  }]
}

那是您需要的最少數量。 然后將其包含在您的 header 中：

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

• 使用 fetch 處理程序注冊 service worker。

那么如何注冊worker呢？

好吧，您使用 vue.js 所以mounted()是放置它的好地方：

//check if service worker is available in browser

if("serviceWorker" in navigator) {
   navigator.serviceWorker.register("path/to/service-worker.js").then(reg => {
      console.log("Registration succesful, scope: " + reg.scope);
   })
   .catch(err => {
      console.log(err);
   })
}

您需要為您的工作人員提供路徑，如上面的示例所示。 service worker 只是一個很小的 javascript 文件。

要求說您需要一個 fetch 處理程序，所以讓我們創建一個：

//service-worker.js

self.addEventListener('fetch', function(event) {
  event.respondWith(fetch(event.request));
});

而已。

這種緩存方法稱為“僅網絡”，因為您只從網絡而不是緩存加載資源。

好吧，實際上它不是一種緩存方法，因為您不緩存任何內容，但是也有“離線優先”策略。 我在這里推薦這個網站，它展示了許多策略以及如何使用它。

https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook