What is the correct way to remove webpack offline-plugin?

Question

I was assigned to a project where they had a webpack offline-plugin in the past, but now we don't have it and it is completely unnecessary to have it in the project.

It was installed in such way:

new OfflinePlugin({
  updateStrategy: 'changed',
  autoUpdate: 1000 * 60 * 10,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeRedundantAttributes: true,
    useShortDoctype: true,
    removeEmptyAttributes: true,
    removeStyleLinkTypeAttributes: true,
    keepClosingSlash: true,
    minifyJS: true,
    minifyCSS: true,
    minifyURLs: true,
  },
  ServiceWorker: {
    events: true,
    navigateFallbackURL: '/',
  },
})

Now I am struggling to remove the service worker created for the old clients on the production domain, the ones who accessed the website before the offline-plugin was removed, and most importantly it looks like facebook scraper tool gets the old version every time I try to scrape again and it is crucial since I have deployed a new SSR functionality to the production.

What I have tried already:

1. webpack-remove-serviceworker-plugin

2. Add the following code to index.html:

   if (window.navigator && navigator.serviceWorker) { navigator.serviceWorker.getRegistrations() .then(function (registrations) { let registrationsLength = registrations.length; while(registrationsLength--) { registrations[registrationsLength].unregister(); } }); }

3. Replace sw.js with the following content:

   self.addEventListener('install', function(e) { self.skipWaiting(); });

   self.addEventListener('activate', function () { self.registration.unregister().then(function () { return self.clients.matchAll(); }).then(function (clients) { clients.forEach((client) => { if (client.url && 'navigate' in client) { client.navigate(client.url); } }); }); });

None of these have solved the problem for me. Deploying the project on a new server with another domain works fine. Any tips or suggestions for this problem?

Answer 1

I had the same issue, you need to replace the old sw.js (which was generated via OfflinePlugin) with one that contains:

self.addEventListener('install', function(e) {
  self.skipWaiting();
});

self.addEventListener('activate', function(e) {
  self.registration.unregister()
    .then(function() {
      return self.clients.matchAll();
    })
    .then(function(clients) {
      clients.forEach(client => client.navigate(client.url))
    });
});

This helped me to remove an old service worker.

Answer 2

as for me , i just use a new nonexistent scope service worker to replace old one,

ServiceWorker: {
        events: true,
        // what range of URLs a service worker can control. Use a nonexistent path to disable ServiceWorker
        scope: '/disable-service-worker/',
      },

as for the app.js, i add below code to unregister old sw:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.getRegistrations().then(registrations => {
    for (const registration of registrations) {
      // keep only serviceWorker which scope is /disable-service-worker/, The purpose is to make serviceWorker useless
      if (registration.scope.includes('/disable-service-worker/') === false) {
        registration.unregister()
      }
    }
  });
  // clear cache of service worker
  caches.keys().then(keyList => {
    return Promise.all(
      keyList.map(key => {
        return caches.delete(key);
      }),
    );
  });
}

after two mouth, almost every user have install new sw.js in chrome, then can disable offline-plugin and not influnce user