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

Question

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

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

Site cannot be installed: no matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest

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

manifest.json

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

然后我这样注册我的软件：

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 来托管它。

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

Answer 1

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

Answer 2

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

先安装 serve npm，如果尚未安装：npm i serve -g

然后...

npm run build

serve -s build

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

Answer 3

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

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

默认设置为registerWhenStable，也就是没有待处理的任务，事物like setTimeout()等。通过将其更改为registerImmediately，它将注册您的服务人员尽快。

只是想分享这个并将其添加到这里，因为这让我花了几天时间试图解决它。

Answer 4

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

同时放置：ServiceWorkerModule.register ('ngsw-worker.js', {enabled: environment.production, registrationStrategy: 'registerImmediately'}),

Answer 5

尝试进行以下更改：

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

Answer 6

解决这个问题的一种方法是在你的 service worker include 之后添加一个查询参数。所以通常你 html 会看起来像这样。

<script src="https://example.com"></script>

你可以把它修改成这样

<script src="https://example.com?v=1.1"></script>

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

Site cannot be installed: no matching service worker detected

javascript

json

web-applications

progressive-web-apps