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

Question

嘿我正在尝试编程我的第一个pwa并遇到以下问题:

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

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

我认为我的清单网址是正确的,因为这个链接

的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);
});
}

我从这里得到了我的sw

所以我想创建一个简单的Web应用程序,我可以使用firebase托管.

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

Answer 1

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

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

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

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

Answer 2

将服务工作者脚本文件放在网站的根目录下并设置start_url为/或将其放在任何位置,并使用scope属性和Service-Worker-AllowedHTTP标头,如我的其他答案中所示.

Answer 3

create react app服务人员仅在生产中生效，因此请对其进行构建并在本地提供服务以测试服务人员是否正常工作。

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

然后...

npm run build

serve -s build

一旦服务工作者成功注册，beforeinstallprompt也可能无法调用类似的东西。如果是这种情况，请使用诸如Firebase之类的主机发布应用，该主机将通过服务该网站https，然后在beforeinstallprompt那里尝试。