Question

我有一个网站（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": [
    ...
  ]
}

服务工作者在app.module上这样注册：

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

仍然感谢您的快速解答：）

Answer 1

我找到了答案。 Angular等到应用程序“稳定”后才注册服务工作者。该应用程序在启动时会进行AJAX调用，以检查服务器上是否有新产品，图片……显然，这使Angular认为它不稳定，因此甚至不调用服务人员注册。

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

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

它刚刚开始工作：）

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

Answer 2

您可以尝试在两个应用清单中都设置范围（/）：

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

并在注册服务人员时：

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

但我认为问题在于您的Web服务器应在末尾添加斜杠。也就是说，当用户访问您的网站时，应将其重定向到 new.indomablestore.com/，它对应于您的应用程序范围和索引中的基本路径。

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

2 个答案: