How would I completely remove a PWA?

View other answers to this thread

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.

Want to read more?

Browse featured discussions

© 2020 · Hashnode