Workbox cachefirst network request error with Giphy

Question

I'm using the following strategy to cache images:

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

I'm not defining any other particular strategies.

When I try it in an index.html containing a Gif hosted by Giphy:

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

Worbox do seeems to cache properly as long as I'm online

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

If I disable my wifi and try to refresh offline my page I hit the following errors:

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

Therefore am I missing something? Should I configure something more to be able to cache Giphy gifs? Or is it actually a bug? Or something which can't be solved?

Any help appreciated, thank you in advance

Answer 1

My question is a duplicate of Workbox Cache First not caching properly

The answer is the one provided by Diego H Ferraz in https://stackoverflow.com/a/59040270/5404186