无法将 Vue.js PWA 添加到主屏幕

Question

我最近正在研究渐进式 Web 应用程序。我已经像这样链接了 manifest.json 和 sw.js：

在 index.html 中

<link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>static/manifest.json">

在我的 main.js 中

if('serviceWorker' in navigator) {
        const messaging = firebase.messaging()

        navigator.serviceWorker.register('/static/sw.js').then((registration) => {
            messaging.useServiceWorker(registration)
            console.log('Service Worker registered')
        }).catch((error) => {
            console.log('Service Worker failed to register')
        })
    }

看起来它可以工作，但是当我尝试使用 DevTools 将 webapp 添加到我的主屏幕时，它显示以下错误： “无法安装站点：未检测到匹配的服务工作人员。您可能需要重新加载页面，或检查当前页面的服务工作人员是否也控制清单中的启动 URL”

在做了一些研究后，我发现有人说将 sw.js 和 manifest.json 放在项目的根目录中。但是当我这样做时，它不会链接文件（当我将它们放在静态文件夹中时，它会链接它们）。顺便说一句，我使用的是标准的 Vue.js 模板。

有什么建议可以解决这个问题吗？

Answer 1

Service Worker 注册失败的原因可能是其中之一：

1. 您没有通过 HTTPS 运行您的应用程序。
2. Service Worker 文件的路径未正确写入 - 它 需要相对于原点而不是应用的根目录编写。

结构上应该是这样的

/static/
    /css/
    /js/
    /img/
manifest.json
index.html
service-worker.js

在索引文件中，你应该注册类似这样的service worker

<script type=text/javascript>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Registration successful, scope is:', registration.scope);
    })
    .catch(function(error) {
      console.log('Service worker registration failed, error:', error);
    });
  }
</script>

并连接 manifest.json

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

manifest.json 的内容可以是

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

sw-precache 专为预缓存一些关键静态资源的需求而设计。因此，如果您想在用户离线时对 service worker 执行其他操作，则不需要它。以下是您可以对服务人员执行的操作的示例列表：https://github.com/GoogleChrome/samples/tree/gh-pages/service-worker