How would I completely remove a PWA?

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?

Learn Something New Everyday,
Connect With The Best Developers!

& 500k+ others use Hashnode actively.

Vishwa Bhat's photo

Hey Steven,

In-case you couldn't figure out the solution for your issue..

IMO, quickest hack would be to unlink manifest.json from your index.html file.

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 fetch event 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 request

Inside 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(... with return 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!

Steven Ventimiglia's photo

Creative Technologist & Sr. Front-End Developer

Thanks for the info, Vishwa.

Zlati Pehlivanov's photo

That's easy don't be angry. I'll explain tomorrow. It's late here.

Steven Ventimiglia's photo

Creative Technologist & Sr. Front-End Developer

Tried a no-op service worker, and Chrome (on Android) refuses to acknowledge any of the changes I've made over the past week. None of them. And, yeah, I can click on the domain settings and clear cache (the mobile approach, comparable to using Inspect on desktop) but the general public cannot be required to do the same to see the changes that were made.

Zlati Pehlivanov's photo

Well, normally i put the sw at last moment. Plus you could control the duration of the cache and invalidate.

Yashu Mittal's photo

Re-build the application again without PWA.

Smart gif

Steven Ventimiglia's photo

Creative Technologist & Sr. Front-End Developer

Well, you can put anything onto the live server - going from a set of recipes to a porn site - and, in this case, no one would see anything but the recipes since it's cached and not being deactivated/removed, including the cache.

Mine seems to be stuck on stupid, and every dingbat's solution is to, "Inspect your browser and blah, blah, blah...", with complete disregard to the average user. So, in other words, I need a dependable method in going back and forth - to and and from - a Service Worker, without risking the client browser(s) never updating properly and displaying the correct version.

It's very difficult to learn something when the results continue to be inconsistent, and my testing environment acts like a elderly person telling the same story over and over.

Want to read more?

Browse featured discussions

© 2020 · Hashnode