无法安装站点：未检测到匹配的服务人员答案

【问题标题】：Site cannot be installed: no matching service worker detected无法安装站点：未检测到匹配的服务人员
【发布时间】：2018-01-14 00:03:15
【问题描述】：

嘿，我正在尝试编写我的第一个 pwa 并遇到以下问题：

当我启动我的网络应用程序时，我收到以下错误：

无法安装站点：未检测到匹配的服务人员。您可能需要重新加载页面，或者检查当前页面的服务工作者是否也控制清单中的起始 URL

我认为我的清单 url 是正确的，因为这个 link

manifest.json

"start_url": ".",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#29BDBB",
"background_color": "#29BDBB"

然后我像这样注册我的 sw：

if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./sw.js').then(function(reg) {
    console.log('Successfully registered service worker', reg);
}).catch(function(err) {
    console.warn('Error whilst registering service worker', err);
});
}

我的软件来自here

所以我正在尝试制作一个简单的网络应用程序，我可以使用firebase 托管它。

有什么问题？感谢您的帮助

【问题讨论】：

协议是https:吗？ <link rel="manifest" href="manifest.json"> 是否包含在 HTML 中？
是的，您可以在 firebase 链接 (shoppinglist-ecea7.firebaseapp.com) 中找到我的网站，并且我添加了链接，我的 manifest.json 与我的 index.html 和我的 firebase 文件位于同一文件夹中
能够注册ServiceWorker，但不确定网络应用部分plnkr.co/edit/7CneKIN60FSNa1qt3TrY?p=preview
感谢您的帮助，终于也注册了我的 ServiceWorker！应用程序部分是什么意思？我需要 fetch() 吗？因为我没有它就做了我的..
fetch() 不是必需的。包括检查过程是否按预期执行。以前没有知道与ServiceWorker 相关的manifest.json，该应用程序仅适用于移动应用程序吗？ Application 选项卡中没有列出清单

标签： javascript json web-applications progressive-web-apps

【解决方案1】：

将 service worker 脚本文件放在您网站的根目录，并将 start_url 设置为 /，或者将其放置在您想要的任何位置并使用 scope 属性和 Service-Worker-Allowed HTTP 标头，如 my other answer .

【讨论】：

运行此命令时ng add @angular/pwa --project ng-zero service worker 安装在哪里？
@Stephane 你找不到ngsw-worker.js 文件吗？坦率地说，我没有使用此 CLI 工具的经验
@Stephane 构建 ngsw-worker.js 的 ngsw-config.json 位于 Angular 应用程序的根文件夹中
哇，这似乎是一个小细节，但没有它对我来说是行不通的。现在我将 ws 放在根文件夹中，它可以完美运行。谢谢！

【解决方案2】：

create react app service worker 只在生产中生效，所以在本地构建并服务它来测试 service worker 是否正常工作。

如果还没有，请先安装 serve npm：npm i serve -g

那么……

npm run build

serve -s build

也有可能一旦服务工作者成功注册，但像beforeinstallprompt 这样的东西可能不会被调用。如果是这种情况，请使用像 firebase 这样的主机发布应用程序，它将通过https 为网站提供服务，然后尝试那里的beforeinstallprompt。

【讨论】：

【解决方案3】：

以防万一其他使用 Angular8+ 的人发生这种情况。您可能需要将注册策略更改为：

ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production, registrationStrategy: 'registerImmediately' }),

默认设置为registerWhenStable，即没有待处理的任务，like setTimeout()等。通过将其更改为registerImmediately，它将尽快注册您的服务工作者.

只是想我会分享这个并在此处添加它，因为这让我失去了几天的时间来尝试解决它。

【讨论】：

这个答案是一个隐藏的宝石。
@Methodician - 谢谢，我花了大约 3/4 天的时间来调试 Angular 代码
哇，这真的很有帮助。感谢分享。
什么是ngsw-worker.js。是你的 service-worker 文件吗
谢谢！很好的解决方案！

【解决方案4】：

为了我的工作，将库 "@angular/service-worker":"^7.2.15" 更新为版本 "@angular/service-worker":"^ 8.2.3"

也投：ServiceWorkerModule.register ('ngsw-worker.js', {enabled: environment.production, registrationStrategy: 'registerImmediately'}),

【讨论】：

这与stackoverflow.com/a/61152966/1507124 基本相同，如果可行，请考虑将其添加为对该问题的评论
是的，但是如果不更改 service-worker 的版本，它就不能，因为该类不存在属性 'registrationStrategy'
我可能错了，因为我只是看了一眼，但对我来说，您的答案看起来与已经提供的答案之一相同。在这种情况下，作为答案是不合适的，但作为让其他人知道它对您有用的评论可能很有价值

【解决方案5】：

尝试进行以下更改：

在 manifest.json 中，start_url 和 scope 设置如下（或根据您的偏好）：
```
  "start_url": "/",
  "scope": "."  
```
sw.js文件位于项目根目录，以start_url为参考。

【讨论】：