Playing with a PWA, because I like to see 100% across the board in my initial audits, I decided to throw it onto the backburner until what I'm building is production worthy.
There are many great things about Progressive Web Apps, but there are a few things that are still getting me angry on a daily basis - the main issue being, how to uninstall and remove it from client devices and their caches within.
The problem is that, I've tried tons of things that have been recommended online, but then:
I go onto my phone... and, there it is. I refresh the browser... and, there it is. I go private/incognito... and, there it is.
I would say that 80% of the internet is clueless as to how to achieve this as well, since they are all talking about desktop browsers (mostly Chrome) and how to manipulate it that way, which is worthless when it comes to other people's devices that may have viewed the work-in-progress.
Now, "there it is" for them, as well.
I want the PWA removed - from service worker to cache to the horse it rode in on - so that I can concentrate on more important things right now without getting a slap in my responsive face.
Any suggestions?
Hey Steven,
In-case you couldn't figure out the solution for your issue..
IMO, quickest hack would be to unlink
manifest.jsonfrom yourindex.htmlfile.Detailed solution would be(assuming you're either using native approach of service worker/ workbox by google, although other approaches don't usually break the web standards):
First Approach - Bypass caching:
Inside your service worker file, there must be an event listener to
fetchevent which is invoked on every HTTP request made from browser. Below code first checks if the requested HTTP request event(basically the request file say '/index.html') is cached, if yes then return cached content otherwise make a requestInside service worker file:
self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request).then((response) => { return response || fetch(event.request); }); });Here you can replace
caches.match(...withreturn fetch(event.request)and of course, if you want to cache media assets, you can add some conditions on when to find in cache and when to make actual request.Second Approach - Clear Cache on every new service worker activation
Service Worker in PWA is never cached and it is requested by the browser every time your PWA application loads, in order to determine if content needs to be re-cached. Every time Service worker loads, primarily two events occur: Installation (setup phase: where content is cached) and Activation* (clean-up phase: where previous workers/cache is cleaned). So, during service worker activation event, clear all the cache and retain only media files(if needed), as shown in the below code:
Inside service worker file:
self.addEventListener('activate', (event) => { var cacheRetainList = [ '.png', '.svg', .. ]; // before service worker gets registered(this event), it waits until the code inside gets executed event.waitUntil( caches.keys().then((keyList) => { return Promise.all(keyList.map((key) => { if (cacheRetainList.indexOf(key) === -1) { return caches.delete(key); } })); }) ); });Hope it helps. Cheers!