让 Angular Service Worker 只为 Angular 文件工作答案

【问题标题】：Let the Angular Service Worker work only for Angular files让 Angular Service Worker 只为 Angular 文件工作
【发布时间】：2019-10-21 23:06:10
【问题描述】：

我有一个 Angular 8 应用程序与另一个应用程序（旧版本的应用程序。我一直在开发新版本，他们应该继续一起工作）。我知道 Angular 有路径前缀['/path1', '/path2', '/path3']。用于 api 或旧版本应用程序的所有其他路径（例如，['/api/*', '/*']）。

我想使用 Service Worker，而 Service Worker 只是缓存 Angular 文件。

角度路径示例：

申请途径：

/path1/*
/path2/*
/path3/*

以及所有 Angular 源文件：

/index.html
/main.(_hash_).js
/common.(_hash_).js
/polyfills.(_hash_).js
... *(all prod compiled angular files)*
/assets/*

其他路径示例：

/oldApp =>（旧版本返回 index.html）
/* =>（所有使用旧版应用的文件和api）
/api/* =>（用于 Angular api）

我知道，它很复杂，但我只能更改 Angular 应用程序。

我最后使用了这个 ngsw.config.json，但它也不起作用。

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js",
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "oldApp",
      "urls": [
        "/oldApp/**",
        "/**"
      ],
      "cacheConfig": {
        "max-size": 0,
        "maxAge": "0u",
        "strategy": "freshness"
      }
    },
    {
      "name": "api",
      "urls": [
        "/api/**"
      ],
      "cacheConfig": {
        "max-size": 0,
        "maxAge": "0u",
        "strategy": "freshness"
      }
    }
  ]
}

对不起，我的英语不好。

【问题讨论】：

嘿，伙计，我可以分享一下，您应该厌倦缓存 index.html 文件，因为当您部署到生产环境时，您需要 index.html 文件始终更新，因为缓存破坏路径，即<script type="text/javascript" src="runtime.ae190ae28384aeef836c.js"></script><script type="text/javascript" src="polyfills.1c4062b4c115efee62a1.js"></script><script type="text/javascript" src="main.573ff49a6fe5da96e0f7.js"></script> 每当您发布新的构建代码时，这些唯一路径都需要更新。
如果这些脚本缓存在 index.html 中，会导致应用加载空白屏幕。
Angular 创建 ngsw.json 文件。该文件包含哈希。 Angular 使用此哈希。据我所知，如果应用程序有任何更新，Angular 会重新加载所有更新的文件和 index.html
酷，测试一下。我之前在使用 ngsw-config.json 文件缓存 index.html 时遇到了一些问题。
感谢您的建议。这是我的第一份 Service Worker 工作。我会检查一下这个问题。

标签： angular service-worker angular-service-worker

【解决方案1】：

我编写了自己的服务工作者脚本。首先，我编写了编译后运行的脚本。该脚本读取所有已编译的文件名并创建新的 service worker js 文件。其次，我在 Angular 中写了RegisterSWService。 RegisterSWService编译后创建的注册文件。

【讨论】：