CODEWITHSUNDEEP
javascriptcachingfrontendservice-workerprogressive-web-apps
Gurmeet Singh
Gurmeet Singh

Reputation: 834

Cache Busting where service worker is not supported

I am using sw-precache and sw-toolbox to manage my service worker. Let's say I have a css file which I want to cache

staticFileGlobs: ['public/asset/build/css/m_index.min.css']

It get's added to the service worker on running gulp task as 

var precacheConfig = [["public/asset/build/css/m_college.min.css","8d9b0e69820ba2fab83c45e2884bd61f"]

The hash with the file helps me in cache busting when service worker is registered. All works fine.

Now consider a situation where a certain PC or user or browser is unable to register service worker and the file is served through the network to him every time. In this case, the file will get stored in the browser memory because there is no cache busting by default. And it might feed the old file to that user for a lifetime even after the developer has updated the file.

What is the way to handle this scenario?

Upvotes: 0

Views: 227

Answers (2)

Dmytro Nesteriuk
Dmytro Nesteriuk

Reputation: 8305

I would use the Etag response header (https://developer.mozilla.org/en/docs/Web/HTTP/Headers/ETag) to avoid loading obsolete assets for users.

Upvotes: 1

Gurmeet Singh
Gurmeet Singh

Reputation: 834

For anyone looking out for answers, there is a simple solution - COOKIES.

While trying to register cookie if something fails set a cookie. This cookie than can be read on the backend before sending files If the cookie is not set, load files without cache busting else append a cache buster on the end to prevent browser caching where service worker is not running.

Because cookies are the only thing accessible directly on both frontend and backend.

Upvotes: 0

Related Questions