New service worker keeps "waiting to activate" - not taking control after an update

[lgourain]

Hello,

I’m facing an issue with my service worker not activating automatically after an app rebuild.

I’ve tried multiple approaches but can’t get past this “waiting to activate” state - I’d really appreciate any help or guidance.

Context :

• Framework : Vue 3
• Vite : 7.1.12
• Vite-Plugin-Pwa : 1.1.0
• Browser : Chrome in incognito mode

Scenario :

1. I serve my app built with serve : npx serve dist/ -s -d
2. I build my app.
3. I make a small a change in my app and rebuild with npm run build (I keep the server running).
4. After the defined interval (10 seconds for testing purposes), the new service worker is detected and installs successfully.
5. However it stays in the "waiting to activate" state and the page never reloads automatically. I have to click the "Stop" button of the previous service worker from Chrome DevTools (Application tab).

Setup

Here is the state of my files so far :

• vite.config.ts :

import vue from '@vitejs/plugin-vue';
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      base: '/',
      filename: 'service-worker.ts',
      injectRegister: 'auto',
      manifest: {
        icons: [
         // icons
        ],
        name: 'My App',
        short_name: 'App',
        theme_color: '#111111',
      },
      registerType: 'autoUpdate',
      srcDir: 'src',
      strategies: 'injectManifest',
    }),
  ],
});

• main.ts : I call registerServiceWorker right before mounting my app.
• registerServiceWorker.ts :

import { registerSW } from 'virtual:pwa-register';

function registerServiceWorker() {
  const updateSW = registerSW({
    immediate: true,
    onNeedRefresh() {
      updateSW(true);
    },
    onRegisteredSW(swUrl, registration) {
      if (!registration) return;

      setInterval(async () => {
        if (registration.installing || !navigator) return;
        if ('connection' in navigator && !navigator.onLine) return;

        const resp = await fetch(swUrl, {
          cache: 'no-store',
          headers: {
            cache: 'no-store',
            'cache-control': 'no-cache',
          },
        });

        if (resp?.status === 200) {
          await registration.update();
        }
      }, 10 * 1000);
    },
  });
}

export { registerServiceWorker };

• src/service-worker.ts :

import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { clientsClaim } from 'workbox-core';
import { ExpirationPlugin } from 'workbox-expiration';
import { cleanupOutdatedCaches, precacheAndRoute } from 'workbox-precaching';
import { registerRoute, setDefaultHandler } from 'workbox-routing';
import { CacheFirst, NetworkFirst, NetworkOnly } from 'workbox-strategies';

declare let self: ServiceWorkerGlobalScope;

// By default, use a network-only strategy for all requests.
setDefaultHandler(new NetworkOnly());

// Precache all assets in the dist directory (__WB_MANIFEST is injected by vite-plugin-pwa).
precacheAndRoute(self.__WB_MANIFEST);

// Clean old assets
cleanupOutdatedCaches();

// some registerRoute calls

self.skipWaiting();
clientsClaim();

Goal

My goal is to :

• activate automatically,
• take control of the page and refresh the interface immediately after each rebuild.

Question

Is there something I might be missing in my setup or in how vite-plugin-pwa works ? 🤔

Any guidance or best practice to handle this scenario would be super helpful ! 🙏

Thanks a lot for your time and help !

[userquin]

can you provide minimal reproduction?

[lgourain]

Thanks for your answer @userquin !

I’ve prepared a minimal reproduction as a .zip it’s available here :

minimal-pwa-auto-update.zip

I still can’t reproduce the bug outside of my main project, but I have a few leads :

• Service worker size:

Maybe the service worker is too big or handles too many cached assets. 🤔

Number of precached files:

In dist/service-worker.js, I noticed a huge precache list, like:

je([
  { revision: null, url: 'assets/@aws-crypto-B90ylGYW.js' },
  { revision: null, url: 'assets/@aws-sdk-DWJ7OvXH.js' },
  { revision: null, url: 'assets/@fortawesome-Dyk2fWc5.js' },
  ...
])

This list goes on for 420 files. Maybe that’s related to the issue?

For now, I suspect the issue could come from the precache manifest size (too many assets being cached).

Or something specific to how VitePWA generates workbox configuration in large projects ?

Thank you for your help ! 🙏🏼

[userquin]

Manifest size shouldn't be a problem at localhost, try disabling the setInterval, just rebuild the project with some change and refresh the page.

You can also try restarting the server after the build, maybe the sw being precached.

https://vite-pwa-org.netlify.app/deployment/

[lgourain]

Thanks again for the suggestions 🙏

I ran a few more tests to better understand what’s happening:

• Without the setInterval: I have to manually refresh once for the new service worker to install.
• Restarting or stopping the local server (npx serve) after each rebuild doesn’t change anything : the new service worker still remains in the “waiting to activate” state.
• However, I noticed something unexpected: the new service worker eventually activates automatically after 5 minutes, without any manual action.

For example :

This happened twice in a row, consistently.

Could this delay be Chrome’s internal mechanism for activating new service workers after a certain idle time or event? 🤔

If so, maybe that’s why the activation doesn’t happen immediately during fast rebuild cycles in local development.

Does this match what you’d expect from how vite-plugin-pwa / workbox handles service worker updates?

[userquin]

Your reproduction working on my local, maybe some extension? can you try in private browsing? I use Node 24.8.0 (should also work with Node 20.19 or 22.10) and npx serve dist

the error is about stopping the server: the setInterval fails, server not running

[lgourain]

Thanks for checking it out! 🙏

Just to clarify:

• I’m already testing in Chrome incognito mode.
• I’m using Node 24.8.0.
• My minimal reproduction works fine : the issue only happens in my main project. 😞

That’s why I’m trying to figure out what could differ between the two setups (maybe something related to Workbox caching, the build structure, or how assets are served).

Do you have any tips on what could prevent the new service worker from activating immediately in a larger project setup ?

[userquin]

You can try with these 3 changes 🤞 (can apply them 1 by 1 or just all of them):

• injectRegister: false, => check if there is a registerSW.js somewhere in your dist folder and check if index.html is using it, you can change/add build: { minify: false } to your vite config file
• try removing the setDefaultHandler just for testing purposes
• try registering the sw once vue app is loaded, check codesnippets below

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// import { registerServiceWorker } from './registerServiceWorker'

// registerServiceWorker()

const app = createApp(App)

app.use(router)

app.mount('#app')

window.addEventListener('load', () => {
    import('./registerServiceWorker').then(({ registerServiceWorker }) => registerServiceWorker())
})

or use router.isReady promise:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// import { registerServiceWorker } from './registerServiceWorker'

// registerServiceWorker()

const app = createApp(App)

app.use(router)

app.mount('#app')

router.isReady().then(() => {
    import('./registerServiceWorker').then(({ registerServiceWorker }) => registerServiceWorker())
})

[userquin]

Add /// <reference lib="webworker" /> to your globals.d.ts or sw, your sw and TS shouldn't complain about self (remove ts-expect-error annotation)