Giphy 的 Workbox cachefirst 网络请求错误

Question

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

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');

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

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

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

只要我在线

，Worbox 似乎就可以正确缓存

Using CacheFirst to respond to 'https://media.giphy.com/media/xUA7baWfTjfHGLZc3e/giphy.gif'

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

workbox Network request for 'https://media.giphy.com/media/xUA7baWfTjfHGLZc3e/giphy.gif' threw an error. TypeError: Failed to fetch

Uncaught (in promise) no-response: The strategy could not generate a response for 'https://media.giphy.com/media/xUA7baWfTjfHGLZc3e/giphy.gif'. The underlying error is TypeError: Failed to fetch. at CacheFirst.makeRequest (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-strategies.dev.js:180:15)

GET https://media.giphy.com/media/xUA7baWfTjfHGLZc3e/giphy.gif net::ERR_FAILED

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

感谢任何帮助，提前致谢

Answer 1

我的问题与 Workbox Cache First not caching properly

重复

答案是 Diego H Ferraz 在

中提供的答案

Giphy 的 Workbox cachefirst 网络请求错误

Workbox cachefirst network request error with Giphy

service-worker

workbox

workbox-webpack-plugin