CODEWITHSUNDEEP
cachingprogressive-web-appsservice-workercachestorage
Nillus
Nillus

Reputation: 1199

Override browser cache in PWA service worker

I am using "caches" to cache in service worker my PWA assets and make it available offline.

When I change an asset, specifically a js file, I modify at least one byte in my service worker to trigger its native update: the service worker updates and retrieves all of its previously cached assets to refresh its caches.

Yet, server responds with a cached version of the file, and whereas I own the files served I have no control over Cache-Control http header.

How can i prevent browser caching on service worker cached resources? Versioning the files with a

"?v="+version

suffix won't work, because this version cannot be passed to the or or tags that references the cached files in html files, which are static and caches will not recognize and serve offline unversioned file names.

Since "caches.addAll" does not allow AFAIK any means to specify http request headers such as Cache-Control as fetch or XMLHttpRequest do, how can I prevent additional aggressive caching stages over my assets?

I am using plain Javascript and if possible I need it to be done without any additional library. Note also that meta http-equiv tags won't solve the problem for assets other than complete html.

Upvotes: 2

Views: 1847

Answers (1)

Jeff Posnick
Jeff Posnick

Reputation: 56044

You can bypass the browser's cache by explicitly constructing a Request object with a cache property set to an appropriate cache mode. 'reload' is a good choice, as it will bypass the browser's cache for the outgoing request, but it will update the browser's cache with the response (so you'll have a fresher browser cache overall). If you don't even want that update to be performed, you could use 'no-store'.

Here's some code showing how to do this concisely for an array of URLs that could be passed in to cache.addAll():

async function addAllBypassCache(cacheName, urls) {
  const cache = await caches.open(cacheName);
  const requests = urls.map((url) => new Request(url, {
    cache: 'reload',
  }));
  await cache.addAll(requests);
}

Upvotes: 2

Related Questions