Angular PWA - 缓存远程图像答案

【问题标题】：Angular PWA - caching remote image(s)Angular PWA - 缓存远程图像
【发布时间】：2019-09-26 08:56:36
【问题描述】：

我正在尝试使用 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（我已删除部分网址）

但是，字体会返回 HTTP 200（来自 Service Worker）。

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

【问题讨论】：

标签： javascript angular service-worker progressive-web-apps angular-service-worker

【解决方案1】：

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

【讨论】：