使用Angular Service Worker缓存外部资产

时间:2019-09-25 14:55:43

标签: angular caching service-worker angular-service-worker

我有一个配置了Service Worker的Angular 8应用程序。我的应用使用了来自gravatar和Amazon-S3服务器的外部头像图像。图像应由服务工作者缓存。但是,要么从不缓存图像,要么总是缓存图像。

当我在ngsw-config文件的assetGroups部分配置外部资源时,总是会缓存外部图像,因此永远不会加载新的覆盖图像。

当我在ngsw-config文件的den dataGroups-section中配置外部资源时,永远不会缓存外部映像。 (数据组不提供资产吗?)

接收的图像具有在300秒的http-response-header中设置的“最大年龄”属性。

“缓存控制:最大年龄= 300”

这是我的ngsw-config文件内容:

{
  "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/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ],
        "urls": [
          "https://fonts.googleapis.com/**",
          "https://my-avatars.s3.amazonaws.com/**",
          "https://www.gravatar.com/avatar/**"
        ]
      }
    }
  ],
  "dataGroups": [{
    "name": "api",
    "urls": [
      "/api/**",
      "http://localhost:8080/**"
    ],
    "cacheConfig": {
      "maxSize": 100,
      "maxAge": "3m",
      "strategy": "freshness",
      "timeout": "5s"
    }
  }]
}

我希望软件会自动处理所有文件,直到该文件有新版本或达到最大超时时间为止。

我做错了什么?

0 个答案:

没有答案