Nuxt 3 PWA doesnt get updated after $pwa.updateServiceWorker()

[Keinstah]

App not updating the page with latest changes.

I'm calling the $pwa.updateServiceWorker() with window.location = window.location.href to refresh the page when $pwa.needRefresh pops up but it doesn't update the app with the latest changes to the component. I was wondering if i'm setting this up correctly. I'm using the example for Nuxt 3 to get something going.

nuxt.config.ts

{
        scope: '/',
        strategies: 'injectManifest',
        srcDir: './service-worker',
        filename: 'sw.ts',
        manifest: {
            ...
        },
        workbox: {
            globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
        },
        injectManifest: {
            globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
        },
        client: {
            installPrompt: true,
            // you don't need to include this: only for testing purposes
            // if enabling periodic sync for update use 1 hour or so (periodicSyncForUpdates: 3600)
            periodicSyncForUpdates: 20,
        },
        devOptions: {
            enabled: false,
            suppressWarnings: true,
            navigateFallback: '/',
            navigateFallbackAllowlist: [/^\/$/],
            type: 'module',
        },
    }

sw.ts

import {cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute} from 'workbox-precaching';
import {clientsClaim} from 'workbox-core';
import {NavigationRoute, registerRoute} from 'workbox-routing';

declare let self: ServiceWorkerGlobalScope;

const entries = self.__WB_MANIFEST;

self.addEventListener('message', (event) => {
    if (event.data && event.data.type === 'SKIP_WAITING') {
        self.skipWaiting();
    }
});

if (import.meta.env.DEV) {
    entries.push({ url: '/', revision: Math.random().toString() });
}

precacheAndRoute(entries.filter(({ url }) => !['200', '404'].includes(url)));

// clean old assets
cleanupOutdatedCaches();

let allowlist: undefined | RegExp[];
if (import.meta.env.DEV)
    allowlist = [/^\/$/];

// to allow work offline
registerRoute(new NavigationRoute(
    createHandlerBoundToURL('/'),
    {allowlist},
));

self.skipWaiting();
clientsClaim();

[userquin]

Try creating an empty project via create-pwa, your sw using auto update + prompt logic with registerType using prompt.

https://vite-pwa-org.netlify.app/guide/scaffolding.html