如何将 URL 动态添加到 Angular Service Worker DataGroup答案

【问题标题】：How to add URL dynamically to angular service worker DataGroup如何将 URL 动态添加到 Angular Service Worker DataGroup
【发布时间】：2020-01-12 15:43:29
【问题描述】：

我正在使用@angular/service-worker 构建一个 PWA 应用程序。 Angular service-worker 添加ngsw-config.json 文件，你可以在其中添加“dataGroups”部分来配置缓存url和策略等。

    "dataGroups": [{
    "name": "tile-cache",
    "urls": [
    ],
    "cacheConfig": {
      "strategy": "performance",
      "maxSize": 10000,
      "maxAge": "30d"
    }
  }].

在我的应用程序中，我需要将缓存的 url（如一些外部地图切片 url）动态添加到 service worker CacheStorage，而不是在 ngsw-config.json 文件的 dataGroups 中预先配置它们。

我没有看到 @angular/service-worker 公开任何公共类或方法来执行此操作。有谁知道如何做到这一点？

【问题讨论】：

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

【解决方案1】：

查看source code for angular service worker，您想做的事情没有太多选择。当您将ServiceWorkerModule 导入应用程序模块时，您可以控制的只是脚本路径。您可以根据环境或其他因素更改脚本路径。

根据service worker config docs，您可以在ngsw-config.json 中使用网址格式。您可以为 dataGroup 定义的地图切片 url 必须有一些模式，这样您就不必动态/以编程方式添加缓存的 url。

【讨论】：

【解决方案2】：

在 Angular 服务工作者中，可用的配置选项非常有限，所以我认为您需要使用 nodejs 脚本修改/更新ngsw-config.json，您需要在构建项目之前运行该脚本。

【讨论】：