Web Can'；t将Vue.js PWA添加到主屏幕

我最近正在潜入渐进式Web应用程序。我将manifest.json和sw.js链接如下：

在index.html中

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

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

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

---

如何解决此问题的任何建议？

服务人员注册失败的原因可能是以下原因之一：

您没有通过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>

---

sw precache是专为预编译一些关键静态资源而设计的。所以，如果您想在用户脱机时使用ServiceWorker执行其他操作，则不需要它。下面是一个示例列表，列出了您可以对服务人员执行的操作：

没有人使用Vue模板来构建PWA，因为这是一项新技术吗？Vue有一个PWA模板：新的Vue cli也在Hi中内置了PWA支持，谢谢您的回答，但我仍然有一些问题。我试着模仿你同样的步伐，但没有运气。我唯一不同的做法是将清单放在

/static

文件夹中。当我尝试执行您所说的操作时，我不断遇到此错误：

服务工作者注册失败，错误：DomeException:注册服务工作者失败：脚本具有不受支持的MIME类型（“text/html”）。

我不使用开发模式，因为我已经有了一个生产环境，所以每次都构建整个应用程序。可能有问题吗？好的，是的，我自己刚得到答案。我使用

build

命令将所有代码推送到生产环境中。问题是，

服务人员

文件被忽略。我只是将它添加到静态文件夹中（这样它就可以与整个项目一起构建），并在脚本中正确引用。无论如何，非常感谢你对答案的帮助！我可能会在悬赏期结束时发放悬赏，如果没有其他人以更好的形式回答，你会得到它！再次感谢！不过，我前面所说的对整个应用程序来说是不好的，因为将服务工作者文件放在一个非

/

的目录中是不好的，因为它不能在自己的范围之外工作。我所做的，我不知道这是否是一个解决方法，或者我需要进一步研究webpack，只是将文件复制到webpack的build命令的生成输出（

/dist

文件夹）中。这可确保服务人员处于

/

范围内，并能正常工作。如果你知道如何更有效地做到这一点，请让我知道！干杯好吧，几天后我会给你赏金的，因为你对这个问题的回答很深入，也很好。此外，为了子孙后代，我使用webpack在构建过程中自动复制

服务人员

。只要谷歌一下，你就会找到它；PHi@Eugenio，我很高兴你明白了！感谢您的更新和奖励：）为了确保服务人员在/范围内正常工作，最好将此步骤添加到npm构建脚本中的产品构建步骤中。新的Vue cli基本上是在prod模式下执行此操作的。它使用以下命令在/dist文件夹的根级别生成服务工作者文件：）

<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>

<link rel=manifest href=/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"
}