ASP.Net Core 服务器中的 Angular PWA - Serviceworker-Cache 不工作

Question

我创建了一个 Angular PWA 并将其移动到 ASP.Net Core Spa - 应用程序中。当通过“npm http-server”提供和安装时，我可以离线运行它。

当我在 ASP.Net 服务器中运行它时，Serviceworker 在 ngsw-worker.js 中加载时出现错误“无法读取未定义的属性‘put’”:

        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

我意识到是在 Debug模式下从 Visual Studio 使用的 chrome 浏览器导致了这个问题。当我从 VS 启动浏览器时，serviceworker 没有得到详细注册。当我复制 URL 并将其粘贴到新的 chrome 实例时，错误消失了。

在我使用“清除站点数据”-“清除存储”选项卡中的按钮后，缓存也起作用了。