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