beforeinstallprompt 不会在 PWA 的 Vue 应用程序中触发

Question

我已经使用 vue cli 标准安装了 PWA 应用。 之后，我只需添加此guide 提供的代码。

但是当我访问 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

您首先需要满足一些条件才能使您的应用可安装。

标准是：

• 应用尚未安装
• 通过 HTTPS 提供服务（但也应使用 HTTP 在 localhost 中工作）
• 包括 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"
  }]
}

这是您需要的最少数量。然后将其包含在您的标题中：

<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 文件。

需求说你需要一个获取处理程序，所以让我们创建一个：

//service-worker.js

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

就是这样。

这种缓存方法称为“仅网络”，因为您只从网络而不是缓存加载资源。

实际上它不是一种缓存方法，因为您不缓存任何内容，但是也有“离线优先”策略。我在这里推荐这个网站，它展示了许多策略以及如何使用它。

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

Answer 2

您无法在开发模式下测试pwa 功能。您首先必须将您的应用程序构建到生产环境并使用服务器来托管输出dist 文件夹。您可以使用 web server for chrome 等工具为您的应用提供测试服务。