4

我最近正在研究渐进式 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 模板。

任何建议如何解决这个问题？

4

1 回答 1

6

服务工作者未能注册的原因可能是其中之一：

  1. 您没有通过 HTTPS 运行您的应用程序。
  2. 您的服务工作人员文件的路径未正确写入 - 它需要相对于源写入，而不是您的应用程序的根目录。

结构明智，应该是这样的

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

在索引文件中，您应该注册类似于此的服务工作者

<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

于 2018-04-19T21:35:38.407 回答