How to kill sw pwa

[Shiyan7]

I have my configuration:

VitePWA({
      registerType: 'autoUpdate',
      devOptions: { enabled: true },
      manifest: {...},
      injectManifest: {...},
      workbox: {...},
      srcDir: 'src',
      filename: 'kill-pwa-sw.js',
      strategies: 'injectManifest',
    }),

and kill-pwa-sw.js file:

import { precacheAndRoute } from 'workbox-precaching';

// This will be replaced by workbox with the actual manifest
precacheAndRoute(self.__WB_MANIFEST || []);

self.addEventListener('install', () => {
  self.skipWaiting();
});

self.addEventListener('activate', (event) => {
  event.waitUntil(
    (async () => {
      const keys = await caches.keys();
      await Promise.all(keys.map((key) => caches.delete(key)));

      self.registration.unregister();
      const clients = await self.clients.matchAll();
      clients.forEach((client) => client.navigate(client.url));
    })(),
  );
});

why my config didnt work correctly?

[userquin]

Add this to your public folder, the name should be the old/original name (for example sw.js), and then remove the PWA plugin and all pwa stuff (virtual modules) from your app (test it first in your local); you can also use selfDestroying mode.

self.addEventListener('install', (e) => {
    self.skipWaiting();
});
self.addEventListener('activate', (e) => {
    self.registration.unregister()
        .then(() => self.clients.matchAll())
        .then((clients) => {
            clients.forEach((client) => {
                if (client instanceof WindowClient)
                    client.navigate(client.url);
            });
            return Promise.resolve();
        })
        .then(() => {
            self.caches.keys().then((cacheNames) => {
                Promise.all(
                    cacheNames.map((cacheName) => {
                        return self.caches.delete(cacheName);
                    })
                );
            })
        });
});

[Shiyan7]

I want to clarify: since I’m using strategies: 'injectManifest' and have a workbox runtime caching configuration, will the app always load the latest bundle without caching issues, or do I need to do something else to ensure users get the updated version?

Basically, I want to understand if my current config is enough to avoid serving stale assets.