Question

我最近进入了渐进式网络应用程序。我已经将我的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添加到我的主屏幕时，它会显示以下错误：＆＃34;无法安装站点：未检测到匹配的服务工作者。您可能需要重新加载页面，或检查当前页面的服务工作者是否也控制清单中的起始URL＆＃34;

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

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

Answer 1

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

您没有通过HTTPS运行应用程序。
无法正确写入服务工作者文件的路径 - 它需要相对于原点编写，而不是应用程序的根目录。

结构方面，应该是这样的

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

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

1 个答案: