angular - 通过 Angular 6 Service Worker 中的新鲜度缓存 Assets

Question

我正在尝试将 Angular Service Worker 集成到现有项目中。如果我理解正确的话，有两种情况是如何在 Angular SW 中缓存数据的。可以预取或延迟更新 Assets 数据并缓存特定的 API 调用和其他 XHR 请求。

我想要实现的是首先通过网络加载特定 Assets ，如果请求超时或无法访问，它将通过缓存提供服务。就像 freshness缓存 API 调用时的策略。
但似乎没有办法为 Angular 项目中作为 Assets 加载的 JS 文件配置这种新鲜度加载机制。
我已经设置了一个用于测试的示例项目:https://github.com/philipp-schaerer-lambdait/angular-service-worker-test

以下示例是一个标准的 Angular 应用程序，不包含我正在使用的实际项目，但显示了我想要缓存的元素，结构如下所示:

\_ Angular root  
 |_ src/
   |_ index.html <----------- links to excluded_asset.js
   |_ app/
   |_ assets/
     |_ excluded_asset.js <-- this one is excluded in ngsw-config.json
     |_ included_asset.js
     |_ ...

这里是相关配置:

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/**", "!/assets/excluded_asset.js"]
            }
        }
    ]
}

是否可以实现像 freshness 这样的缓存行为？使用 installMode 的策略和 updateMode为 Assets ？

我试图将它从 Assets 缓存中排除，它是通过网络加载的，但显然在离线后不会由服务人员交付。

之后我尝试通过 dataGroups 再次包含它并将策略设置为 freshness但似乎 Assets 一旦从 Assets 配置中排除，就不会再次被缓存。我也不认为 dataGroups设置可用于此文件。

"dataGroups": [
    {
        "name": "config",
        "urls": ["assets/excluded_asset.js"],
        "cacheConfig": {
            "maxSize": 10,
            "maxAge": "1d",
            "timeout": "100",
            "strategy": "freshness"
        }
    }
}

我错过了什么或者没有办法通过 freshness 缓存 Assets 吗？战略？最好不要移动文件或更改文件的请求方式。

编辑

我试图将其移出缓存 Assets 目录并将其包含在 dataGroups 中设置，也没有用。

Answer 1

我有同样的问题。我发现始终拥有最新的 js 和 css 文件的解决方案只是从缓存 Assets 中排除 index.html。

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/*.css",
          "/*.js",
          "!/index.html" // Right here!!!!!
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "lazy",
      "resources": {
        "files": ["/static/**"]
      }
    }
  ]
}

一定要有 "outputHashing": "all",到您的 Angular 构建配置。这样，当您更改代码时，它将生成一个具有不同名称的文件。然后它会自动将脚本标签(或链接标签)添加到您的 html 文件(服务 worker 将忽略该文件)，并且一旦您将更改推送到生产环境，index.html 将指向您的新 js 和 css 文件。

当然，这很糟糕:你的 index.html 不会被 service worker 缓存，但至少它可以让返回的用户直接获得最新的文件。

我真的希望有一种方法也可以为 Assets 提供“新鲜度”选项......