Instantly update DOM when service worker detects a change

Question

Is there any way to have service workers fetch the cached version, then attempt to do a.network fetch, and if it's different than the cached version, put that new thing in the cache and replace the old asset in the DOM with the new one instantly (without having to refresh the page)?

Answer 1

Hey yeah this is a very tricky situation but what I did was save a version number to my.env file on production release.

I then built this NPM package which will surface the Version number of the.env at build time. I could then use this number in my VueJS - PWA to check against the old currently cached version number, and then do a.network request if they dont match.

https://www.npmjs.com/package/vue-enverywhere