Caching external images

[milindsingh]

Hi @AllanChain I have been trying to use the CacheFirst strategy for external image source i.e cloudinary. But getting:

The response for 'https://res.cloudinary.com/adapttive/image/upload/v1617880771/Unsolved_Mysteries_in_Magento2_Dark_2629a6feb5.png' is an opaque response. The caching strategy that you're using will not cache opaque responses by default.

Tried to add to service-worker.js , but same results.

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

registerRoute(
  ({url}) => url.origin === 'https://third-party.example.com' &&
             url.pathname.startsWith('/images/'),
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      })
    ]
  })
);

as suggested in https://developers.google.com/web/tools/workbox/modules/workbox-cacheable-response

Any suggestions? Thanks for your efforts.