Angular PWA - 缓存远程图像

Question

我正在尝试使用 Angular 7 PWA 应用程序（通过 ng add @angular/pwa 创建）来缓存图像。除了图像，一切都完美无缺。这是 ngsw-config.json 文件的样子（至少是相应的部分）：

{
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ],
        "urls": [
          "https://fonts.googleapis.com/**",
          "https://fonts.gstatic.com/**",
          "https://res.cloudinary.com/**"
        ]
      }
    }

奇怪的是，当我使用 DevTools 查看缓存时，我看到了其中的图像（以及字体）。但是当我使应用程序脱机时，只有图像不起作用 - 它们基本上返回 504 错误：

Error: Response not Ok (fetchAndCacheOnce): request for https://res.cloudinary.com/[removed]/image/upload/[removed].png returned response 504 Gateway Timeout（我删除了部分URL）

字体，但是 return 和 HTTP 200（来自 Service Worker）。

我对此感到很困惑，为什么不在离线模式下提供图像？我在这里遗漏了什么吗？

Answer 1

我想通了 - 事实证明，当使用带有 f_auto 标志的 Cloudinary 图像时，Cloudinary returns a Vary HTTP header，这会导致一些问题。目前我还没有找到通过 ngsw 为缓存 API 设置 ingoreVary 选项的方法。更多信息在这里：https://github.com/angular/angular/issues/28443#issuecomment-490765336

Angular PWA - 缓存远程图像

Angular PWA - caching remote image(s)

javascript

service-worker

progressive-web-apps

angular

angular-service-worker