3

我遇到了服务人员的问题。service worker 没有通过 app.module 自行注册。所以我在main.ts中手动注册它。它在在线模式下工作正常。但是当我将网络更改为离线模式时，得到 ngsw.json?ngsw-cache-bust failed。任何解决方案都会有所帮助。

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

4

3 回答 3

1

这是与 Angular 服务工作者脱机后的正常行为。发生的事情是服务工作者正在尝试使用缓存清除GET对ngsw.json文件执行操作，但由于应用程序处于脱机状态，它无法访问它。提取将失败，调用将类似于以下内容，但具有唯一值：

ngsw.json?ngsw-cache-bust=0.7064947087867681

它试图获取服务工作者配置以查看需要更新的内容，但无法访问该文件。但是，这不应妨碍service worker 提供已缓存的任何内容，并正常运行直到重新上线。在线后，您将再次看到对ngsw.json文件的调用GET成功。

于 2020-12-02T04:16:04.067 回答
0

对于ngsw.json?ngsw-cache-bust在网络面板中看到大量请求的任何人...

所以...我基本上使用appRef.isStable.subscribe(() => swUpdate.checkForUpdate());代码对自己进行了 DDoS。

这是因为：

appRef.isStable是Observable<boolean>。通过调用checkForUpdate，我提出了一个请求，导致它从true变为 ，false从而再次触发。然后，当它下载两个文件时，它又切换回true循环重复。

如果我知道该应用程序默认在加载时会自行检查...

于 2021-07-01T22:19:07.753 回答
0

我认为您的问题出在其他地方。你能显示ngsw-config.json文件吗？

在 DevTools 中，Service Worker 是否正确注册并处于活动状态？

离线时究竟有什么不能按预期工作？是否只是 ngsw.json 文件在离线时尝试获取异常时返回异常？

更新

您是如何在 Web 清单中设置scopeand属性的？start_url使用新的 angular CLI，这些值默认设置为"./"（注意点），而在以前的版本中，点丢失并且在某些设置中导致路径问题。

即使可能不是您的情况，因为您可以将应用程序添加到主屏幕，这意味着一切都已正确设置。

于 2020-07-23T08:33:09.700 回答