无法安装站点：未检测到匹配的服务工作者

Question

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

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

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

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

清单.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);
});
}

我从这里得到了我的 sw

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

有什么问题？ 谢谢你的帮助

Answer 1

将 Service Worker 脚本文件放在您网站的根目录并将start_url设置为/ ，或者将其放在您想要的任何位置并使用scope属性和Service-Worker-Allowed HTTP 标头，如我的其他答案。

Answer 2

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

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

默认情况下，它被设置为registerWhenStable ，当没有挂起的任务时， like setTimeout()等。通过将其更改为registerImmediately ，它会尽快注册您的服务工作者。

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

Answer 3

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

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

那么...

npm run build

serve -s build

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

Answer 4

尝试进行以下更改：

• 在manifest.json中， start_url和scope设置如下（或根据您的喜好）：

   "start_url": "/", "scope": "."

• sw.js文件位于项目根目录，以 start_url 为参考。

Answer 5

为了我的工作，将库“@angular/service-worker”：“^7.2.15”更新到版本，“@angular/service-worker”：“^ 8.2.3”

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

Answer 6

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

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

你可以修改它看起来像这样

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