ngsw.json?ngsw-cache-bust 在 Angular 8 PWA 應用程序的離線模式下失敗

Question

我遇到了服務人員的問題。 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

Answer 1

這是使用 Angular 服務工作者離線后的正常行為。 發生的事情是服務人員正在嘗試使用緩存清除對ngsw.json文件執行GET ，但它無法訪問它，因為應用程序處於脫機狀態。 提取將失敗，調用將類似於以下內容，但具有唯一值：

ngsw.json?ngsw-cache-bust=0.7064947087867681

它試圖獲取服務工作者配置以查看需要更新的內容，但無法訪問該文件。 但是，這不應妨礙 service worker 提供已緩存的任何內容，並正常運行直到重新上線。 上線后，您將再次看到通過GET成功調用ngsw.json文件。

Answer 2

我認為您的問題出在其他地方。 你能顯示ngsw-config.json文件嗎？

在 DevTools 中，Service Worker 是否正確注冊並處於活動狀態？

離線時究竟有什么不能按預期工作？ 是否只是 ngsw.json 文件在離線時嘗試獲取它時返回異常？

更新

您是如何在 web 清單中設置scope和start_url屬性的？ 使用新的 angular CLI，這些值默認設置為"./" （注意點），而在以前的版本中，點丟失並且在某些設置中會導致路徑問題。

即使可能不是您的情況，因為您可以將應用程序添加到主屏幕，這意味着一切都已正確設置。

Answer 3

對於在網絡面板中看到大量ngsw.json?ngsw-cache-bust請求的人...

所以...我基本上使用appRef.isStable.subscribe(() => swUpdate.checkForUpdate()); 代碼。

這是因為：

appRef.isStable是Observable<boolean> 。 通過調用checkForUpdate ，我提出了一個請求，導致它從true變為false ，從而再次觸發。 然后，當它下載兩個文件時，它又切換回true ，因此循環重復。

如果我知道該應用程序默認在加載時會自行檢查...

Answer 4

問題出在 hash 不匹配https://github.com/angular/angular/issues/23613