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

Posted 2023-03-07

【中文标题】Angular PWA 错误站点无法安装：未检测到匹配的服务人员

【英文标题】：Angular PWA error Site cannot be installed: no matching service worker detected

【发布时间】：2020-05-30 17:35:13

【问题描述】：

我有一个网站 (Angular 9.0.1)，我添加了 @angular/pwa 包以将其转换为 PWA，但它无法正常工作。

该网站在生产站点上，但测试数据现在在 https://new.indomablestore.com

我已检查所需文件（manifest.webmanifest、ngsw.json、ngsw-worker.js）是否位于根文件夹中。 我检查了 index.html 文件是否正确指向清单，它显示在 Chrome Devtools Application 选项卡上。

但是在Installability 部分它说：没有检测到匹配的服务工作者。您可能需要重新加载页面，或者检查当前页面的服务工作者是否也控制清单中的起始 URL。

我还检查了app.module.ts 文件有这一行：

ServiceWorkerModule.register('ngsw-worker.js', enabled: environment.production )

而且我没有修改任何 PWA 文件，我让 Angular CLI 构建它们。

任何帮助将不胜感激，因为该网站即将上线，这是我列表中的最后一件事 :)

谢谢！

更新：清单如下所示：

  "name": "Indomable",
  "short_name": "Indomable",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    ...
  ]

Service Worker 是这样在 app.module 上注册的：

@NgModule(
  declarations: [
    AppComponent,
    ...PAGES,
    ...COMPONENTS,
    ...PIPES
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    routing,
    NgxPayPalModule,
    ServiceWorkerModule.register('./ngsw-worker.js',  enabled: environment.production, scope: './' )
  ],
  ...

无论如何感谢您的快速回答:)

【问题讨论】：

chrome lighthouse 工具也指向了 cghislai 下文提到的内容。 start_url。 Lighthouse 通常会为您提供有关需要修复的问题的良好提示。

Lighthouse 报告给了我两个错误：“start_url 确实响应了，但不是通过服务人员。”和“不注册控制页面和start_url的服务工作者”，但它提供的链接是关于服务工作者的，而不是具体的错误。

【参考方案1】：

我找到了答案。 Angular 会等到应用程序“稳定”后再注册服务工作者。该应用程序在启动时有一个 AJAX 调用，用于检查服务器是否有新产品、照片……显然这让 Angular 认为它不稳定，因此它甚至不调用服务工作者注册。

正如this Stack Overflow answer 中指出的那样，注册有一个名为“registrationStrategy”的选项，我可以将其设置为“registerImmediately”。

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

它刚刚开始工作:)

无论如何，感谢您的帮助和快速解答。

【参考方案2】：

您可以尝试在两个应用清单中设置范围 (/)：

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

在注册服务工作者时：

    ServiceWorkerModule.register('./ngsw-worker.js', 
      scope: './',
    ),

但我认为问题在于您的网络服务器应该附加斜杠。也就是说，当用户访问您的网站时，他们应该被重定向到 new.indomablestore.com/，对应于你的应用范围和你的索引中的基本路径。

【讨论】：

清单已将“范围”和“start_url”设置为“/”。我已将“范围”添加到注册函数中，它仍然说同样的话。问题是我有许多其他使用 Angular PWA 的项目，它们都可以工作，我不会将它们重定向到带有斜杠的 URL :(