安装站点失败：未检测到匹配的服务工作者。

Question

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

当我启动我的Web应用程序时，我会遇到以下错误：

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

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

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

我从这里获取了我的sw。

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

问题是什么？感谢您的帮助。

- Johannes Gnadlinger

---

协议是否为 https:？HTML 中是否包含 <link rel="manifest" href="manifest.json">？ - guest271314

你可以在 Firebase 链接 (https://shoppinglist-ecea7.firebaseapp.com/) 中找到我的网站，我已经将 manifest.json 的链接添加到了与 index.html 和 Firebase 文件相同的文件夹中。 - Johannes Gnadlinger

成功注册了ServiceWorker，但关于 Web 应用程序部分不确定。https://plnkr.co/edit/7CneKIN60FSNa1qt3TrY?p=preview - guest271314

好的，那么熟悉的流程是什么？我找不到关于PWA的好文档... - Johannes Gnadlinger

您可以参考此链接，该链接建议将manifest.json放在根文件夹中而不是assets/文件夹中。一旦放在根文件夹中，请将"start_url": "../index.php"更改为"start_url": "."。这里有一个相关的SO帖子。 - abielita

Answer 1

将服务工作者脚本文件放置在您的网站根目录下，并将start_url设置为/，或者将其放置在任何您想要的位置，并使用scope属性和Service-Worker-Allowed HTTP标题，如我的另一个答案中所述。

- Ashraf Sabry

---

当运行此命令 ng add @angular/pwa --project ng-zero 时，服务工作者被安装在哪里？ - Stephane

@Stephane 你找不到 ngsw-worker.js 文件吗？ 坦白地说，我对这个 CLI 工具没有经验。 - Ashraf Sabry

@Stephane ngsw-config.json 文件用于构建 ngsw-worker.js，位于 Angular 应用程序的根文件夹中。 - Marvin W.

哇，看起来是个小细节，但如果没有它，它对我来说就不起作用。现在我把ws放在根文件夹中，它完美地工作了。谢谢！ - Fabio Nolasco

Answer 2

以防万一，如果其他使用Angular8+的人也遇到了这个问题。您可能需要更改注册策略为：

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

默认情况下，这被设置为registerWhenStable，也就是当没有挂起的任务时，像setTimeout()之类的东西。将其更改为registerImmediately，它将尽可能快地注册您的服务工作者。

只是想与大家分享并在此添加，因为这让我花了几天时间才弄清楚。

- Wesley Coetzee

---

@Methodician - 谢谢，这让我花了3/4天的时间通过调试Angular代码来解决。 - Wesley Coetzee

ngsw-worker.js是什么？它是你的service-worker文件吗？ - prem kumar

@premkumar 是的，这就是 Angular 所称的服务工作器文件。 - Wesley Coetzee

类似问题的答案链接：https://dev59.com/rbnoa4cB1Zd3GeqPPF2Y - Matias de Andrea

@GrainedeZèle 没问题 :) - Wesley Coetzee

Answer 3

创建React应用程序服务工作者只在生产环境中生效，因此构建并在本地提供服务以测试服务工作者是否正常工作。

首先安装serve npm，如果还没有的话：npm i serve -g

然后...

npm run build

serve -s build

一旦服务工作者成功注册，可能还会出现类似于beforeinstallprompt但无法调用的情况。 如果是这种情况，请使用像Firebase这样的主机发布应用程序，它将通过https提供站点，然后在那里尝试beforeinstallprompt.

- andimiya

Answer 4

尝试进行以下更改：

• In manifest.json, the start_url and scope is set like this (or based on your preference):

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

• The sw.js file is located at project root, taking start_url as reference.

- Harita Ravindranath

Answer 5

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

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

- Rolando Moncada

---

如果 https://dev59.com/gFcO5IYBdhLWcg3wmSyS#61152966 已经解决了问题，请考虑将此作为评论添加到该问题中，因为它们本质上是相同的。 - CervEd

是的，但是如果不更改 service-worker 的版本，它就无法实现，因为该类没有呈现属性“registrationStrategy”。 - Rolando Moncada

我可能错了，因为我只是匆匆看了一眼，但在我看来，你的答案看起来与已提供的答案之一完全相同。如果是这种情况，它作为答案就不合适，但作为评论让其他人知道它对你有用可能是有价值的。 - CervEd

Answer 6

解决这个问题的一种方法是在您的服务工作者包含之后添加查询参数。 因此，通常您的HTML将如下所示。

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

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

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

- DilanTsasi