CODEWITHSUNDEEP
javascriptservice-workerworkboximage-caching
Maher
Maher

Reputation: 2547

Service Worker: How to cache images that do not have extensions using Workbox

I'm new on service worker in my page i have images without extensions [*.jpg, *.png and etc] like this "www.domain.com/api/media/a2b93f21-1acf-4e5e-9b19-6d7c68aaadc2" which i get them from API.

The following code work fine but not for this type of images

workbox.routing.registerRoute(
    // Cache image files.
    /\.(?:png|jpg|jpeg|svg|gif)$/,
    // Use the cache if it's available.
    new workbox.strategies.CacheFirst({
        // Use a custom cache name.
        cacheName: 'image-cache',
        plugins: [
            new workbox.expiration.Plugin({
                // Cache only 20 images.
                maxEntries: 20,
                // Cache for a maximum of a week.
                maxAgeSeconds: 7 * 24 * 60 * 60,
            })
        ],
    })
);

Any suggestion ?

Upvotes: 3

Views: 3706

Answers (1)

denov
denov

Reputation: 12688

with workbox, from the manual -

You can use the RequestDestination enumerate type of the destination of the request to determine a strategy. For example, when the target is data

:

workbox.routing.registerRoute(
  // Custom `matchCallback` function
  ({event}) => event.request.destination === 'image',
  new workbox.strategies.CacheFirst({
    cacheName: 'image',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 20,
        maxAgeSeconds: 7 * 24 * 60 * 60, // 1 week
      }),
    ],
  })
);

in a plain vanilla service worker you can check the request accept header

if (request.headers.get('Accept').indexOf('image') !== -1) { 
    ... stash in cache ...
}

Upvotes: 5

Related Questions