angular-pwa - ngsw.json?ngsw-cache-bust 在 Angular 8 PWA 应用程序的离线模式下失败

Question

我正面临 Service Worker 的问题。 Service Worker 没有通过 app.module 自行注册。所以我在main.ts中手动注册它。 它在在线模式下工作正常 .但是当我将网络更改为 离线模式，获取 ngsw.json?ngsw-cache-bust 失败 .任何解决方案都会有所帮助。
main.ts

    platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
    if ('serviceWorker' in navigator && environment.production) {
      navigator.serviceWorker.register('/ngsw-worker.js');
    }
  }).catch(err => console.log(err));

ngsw-catch-bust-failing
ngsw-config.json

 {
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

Devtool-screen-shot
Devtool-screenshot-2

Answer 1

这是与 Angular Service Worker 脱机后的正常行为。发生的事情是 service worker 试图做一个 GET在 ngsw.json文件使用缓存破坏，但它无法访问它，因为应用程序处于离线状态。获取将失败，调用将类似于以下内容，具有唯一值:ngsw.json?ngsw-cache-bust=0.7064947087867681它正在尝试获取 Service Worker 配置以查看需要更新的内容，但无法访问该文件。但是，这不应妨碍 Service Worker 提供已缓存的任何内容，并在重新上线之前正常运行。在线后，您将看到调用 ngsw.json 的电话。文件通过 GET再次成功。