ASP.Net核心服務器中的Angular PWA - Serviceworker-Cache無法正常工作

Question

我創建了一個Angular PWA並將其移動到ASP.Net Core Spa - Application中。 當通過“npm http-server”提供和安裝時，我可以脫機運行它。

當我在ASP.Net Server中運行它時，Serviceworker在ngsw-worker.js中加載錯誤“無法讀取屬性'put'of undefined”：

        write(key, value) {
          return this.cache.put(this.request(key), this.adapter.newResponse(JSON.stringify(value)));
        }

我試圖緩存來自webapi的請求並在ngsw-config.json文件中配置它們

    {
      "$schema": "./node_modules/@angular/service-worker/config/schema.json",
      "index": "/index.html",
      "dataGroups": [
        {
          "name": "api-freshness",
          "urls": [
            "/odata/**"
          ],
          "cacheConfig": {
            "strategy": "freshness",
            "maxSize": 500,
            "maxAge": "3d",
            "timeout": "2s"
          }
        }
      ],
      "assetGroups": [
        {
          "name": "app",
          "installMode": "prefetch",
          "resources": {
            "files": [
              "/favicon.ico",
              "/index.html",
              "/*.css",
              "/*.js"
            ]
          }
        },
        {
          "name": "assets",
          "installMode": "lazy",
          "updateMode": "prefetch",
          "resources": {
            "files": [
              "/assets/**",
              "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
            ]
          }
        }
      ]
    }

首先，manifest.webmanifest文件以錯誤的內容類型提供，因此我在startup.cs中添加了一個提供程序。 但這沒有幫助。

        provider.Mappings[".webmanifest"] = "application/manifest+json";

        app.UseSpaStaticFiles(new StaticFileOptions() {
            ContentTypeProvider = provider
        });

Answer 1

我意識到在調試模式下從Visual Studio中使用的chrome瀏覽器會導致問題。 當我從VS啟動瀏覽器時，服務工作者沒有得到精確的注冊。 復制URL並將其粘貼到新的chrome實例時，錯誤消失。

此外，在我使用“清除存儲”選項卡中的“清除站點數據”按鈕后，緩存仍然有效。