CODEWITHSUNDEEP
javascriptservice-workerprogressive-web-appscdn
Hoffmann
Hoffmann

Reputation: 14719

What should I do to update service workers and cached PWA files

So in my current system whenever I make a javascript bundle I add a hash to the file name for production builds. I have no CDN caching in my index.html, so whenever a new build comes out a new index.html is created pointing to the new hashed javascript file names. This works well in invalidating the cache of the bundles whenever a new deployment happens (at the cost of my very small index.html not being cached)

I was looking into making my app work as a PWA and I was wondering how to invalidate the cache for existing users when I deploy new builds of my app. Here are the problems:

  1. The serviceworker.js needs to have a fixed file name (no hash in filename), meaning my CDN will cache that file for a long period and I don't want to manually invalidate the CDN cache on every deploy. I guess I could remove the cache on the serviceworker.js like I do for index.html since that file is downloaded only once anyway.

  2. My worker gets registered in the user's browser, I am unsure if I need to add some extra code to check if a new version of the worker is available. How does the browser decides when to try to update a registered serviceworker? Can I unregistered my service worker to install a new version in my PWA? Won't that break the PWA?

  3. My index.html is cached by the service worker, meaning people using the PWA will never get new versions of my main JS bundles (because the cached index.html will be pointing to the old bundles by the hash in the filenames). I guess I could just remove serviceworker cache on index.html but then the app will not work offline?

  4. If want to use my app offline, I need my service worker to be able to cache my hashed JS files. I guess I need to do some magic on the filenames in self.addEventListener('fetch', ...) to use the cached version if available and periodically check for new versions when internet is available, getting the hashed JS bundle file names by creating an uncached static JSON file or something that has the latest filenames. Seems like a hackish solution though.

I can't seem to find good guides on how to handle these problems, feels like a lot of work for something the browser should be able to do for me based on some options (like retry every X amount of time). Is there some magic HTTP header I am not aware of?

Upvotes: 3

Views: 4644

Answers (1)

Ali SabziNezhad
Ali SabziNezhad

Reputation: 3118

I have the same problem and I solved this today. Your index.html should be cached by the service worker for offline working. When a user opens your PWA, all files will be loaded from the cache and after complete loading, the service worker will be retrieved from the network and if there is a new service worker, all new files will be downloaded and the new service worker will be installed and become waiting to be active. you need to refresh your PWA in order to activate the new service worker and actually use the updated app.

I used This article and make my new service worker (instead of the default service worker in create-react-app). Detection of new service worker installation is also explained in this article so you can inform the user that there is a new update available and refresh the PWA.

I hope this can help you.

Upvotes: 3

Related Questions