0

我正在使用以下策略来缓存图像：

workbox.routing.registerRoute(
    /.*\.(?:png|jpg|jpeg|svg|webp|gif)/,
    new workbox.strategies.CacheFirst({
    "cacheName": "images",
    plugins: [
        new workbox.expiration.Plugin({
          maxEntries: 60, 
          maxAgeSeconds: 2592000, 
          purgeOnQuotaError: false})]
}), 'GET');

我没有定义任何其他特定策略。

当我在index.html包含 Giphy 托管的 Gif 中尝试它时：

<img src="https://media.giphy.com/media/xUA7baWfTjfHGLZc3e/giphy.gif"/>

只要我在线，Worbox 似乎就可以正确缓存

使用 CacheFirst 响应“ https://media.giphy.com/media/xUA7baWfTjfHGLZc3e/giphy.gif ”

如果我禁用我的 wifi 并尝试离线刷新我的页面，我会遇到以下错误：

“ https://media.giphy.com/media/xUA7baWfTjfHGLZc3e/giphy.gif ” 的工作箱网络请求引发错误。类型错误：获取失败

未捕获（承诺）无响应：该策略无法为“ https://media.giphy.com/media/xUA7baWfTjfHGLZc3e/giphy.gif ”生成响应。基础错误是 TypeError: Failed to fetch。在 CacheFirst.makeRequest ( https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-strategies.dev.js:180:15 )

获取https://media.giphy.com/media/xUA7baWfTjfHGLZc3e/giphy.gif net::ERR_FAILED

因此，我错过了什么吗？我应该配置更多东西来缓存 Giphy gif 吗？或者它实际上是一个错误？还是解决不了的问题？

任何帮助表示赞赏，在此先感谢您

4

1 回答 1

1

我的问题是Workbox Cache First 的副本没有正确缓存

答案是 Diego H Ferraz 在https://stackoverflow.com/a/59040270/5404186中提供的答案

于 2019-11-29T09:16:37.443 回答