安装前提示不在 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 在本地主机中工作）
• 包括 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 handler 注册 Service 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

文件夹。您可以使用 Chrome 网络服务器等工具来为您的应用程序提供测试服务。

Answer 3

Service Worker 可能不会在您的开发包中部署/初始化，而只会在您的生产包中部署/初始化。也许您的捆绑器需要一些选项来在开发模式下提供 Service Worker？