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（我已经删除了部分网址）

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

对此我感到很困惑，为什么不以离线模式提供图像？我在这里想念东西吗？

Answer 1

我发现了这一点-事实证明，在使用Cloudinary映像时，Cloudinary带有f_auto标志，会返回Vary HTTP标头，这会引起一些问题。目前，我还没有找到一种通过ingoreVary为Cache API设置ngsw选项的方法。此处更多信息：https://github.com/angular/angular/issues/28443#issuecomment-490765336

Angular PWA-缓存远程图像

1 个答案: