const updateSW = registerSW(...) is not reloading the page

[danielalejandromatheus]

I've started getting into this plugin and it works really great so far, I have not encountered problems until now.
I have a self updating poll that queries every few seconds for testing purposes on a vue component that is mounted at the top level, the function is working like it should, but when I call updateServiceWorker it does not seem to be refreshing the page, maybe I'm missing something in the lifecycle or doing something wrong, this is my code

const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW({
  onNeedRefresh() {
    useAppConfirmDialog(
      {
        title: 'Update Available',
        message: 'A new version is ready. Refresh to apply it?',
        icon: 'info',
        withCancel: false,
      },
      async () => {
        console.log('Updating service worker...');
        await updateServiceWorker(true);
        console.log('Service worker updated.');
      }
    );
  },
  onRegisteredSW(swUrl, r) {
    if (r) {
      setInterval(async () => {
        if (!r) return;
        if (r.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 r.update();
      }, intervalMS);
    }
  },
});

However it's not working like expected, it's not refreshing the page when I call updateServiceWorker(true), I tried also doing it with the vanilla js events

const updateSW = registerSW({
    onNeedRefresh() {
      console.log('New content available');
      useAppConfirmDialog(
        {
          title: 'Update Available',
          message: 'A new version is ready. Refresh to apply it?',
          icon: 'info',
          withCancel: false,
        },
        async () => {
          await updateSW(true);
        }
      );
    },
    onOfflineReady() {
      console.log('App ready to work offline');
    },
  });

And it's not working either, it only works when I force it with window.location.reload(), but I don't know if it's the expected behavior given the docs.
This is my config, just in case I'm doing something I'm not supposed to

VitePWA({
      registerType: 'prompt',
      injectRegister: 'auto',

      includeAssets: ['favicon.ico', 'robots.txt', 'apple-touch-icon.png'],
      workbox: {
        maximumFileSizeToCacheInBytes: 6 * 1024 * 1024,
        globPatterns: ['**/*.{js,css,html,ico,png,svg,json,webmanifest}'],
        cleanupOutdatedCaches: true,
        clientsClaim: true,
        skipWaiting: true,
        globPatterns: ['**/*.{js,css,html,ico,png,svg,json,webmanifest}'],
        runtimeCaching: [
          {
            urlPattern: ({ request }) => request.mode === 'navigate',
            handler: 'NetworkFirst',
            options: {
              cacheName: 'pages',
              networkTimeoutSeconds: 3,
            },
          },
          {
            urlPattern: ({ request }) =>
              request.destination === 'script' ||
              request.destination === 'style',
            handler: 'StaleWhileRevalidate',
            options: {
              cacheName: 'assets',
            },
          },
        ],
      },
      manifest: {...},
    }),

[userquin]

check #583 (comment) and #583 (comment) (change the virtual import and needRefresh to use vue reactive logic, you need to clear the interval)

check also #583 (comment) (time between sw builds may have side effects)

[danielalejandromatheus]

check #583 (comment) and #583 (comment) (change the virtual import and needRefresh to use vue reactive logic, you need to clear the interval)

check also #583 (comment) (time between sw builds may have side effects)

Thanks for the help!
I updated my root component to load the prompt as a component instead of an injected component,

<div class="app-wrapper">
    <RouterView v-slot="{ Component }">
      <Transition name="fade-slow" mode="out-in">
        <component :is="Component" />
      </Transition>
    </RouterView>
    <ReloadPrompt
      :open="needRefresh"
      @confirm="handleReload"
      @cancel="needRefresh = false"
    />
  </div>

And used your update logic

const intervalMS = 60_000 * 2;
let interval: ReturnType<typeof setInterval> | undefined;
function registerPeriodicSync(
  period: number,
  swUrl: string,
  r: ServiceWorkerRegistration
) {
  return setInterval(async () => {
    if ('onLine' 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 r.update();
  }, period);
}
const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW({
  onRegisteredSW(swUrl, r) {
    if (r) {
      r?.addEventListener('updatefound', () => {
        clearInterval(interval);
      });
      if (r?.active?.state === 'activated') {
        interval = registerPeriodicSync(intervalMS, swUrl, r);
      } else if (r?.installing) {
        r.installing.addEventListener('statechange', (e) => {
          const sw = e.target as ServiceWorker;
          if (sw.state === 'activated') {
            interval = registerPeriodicSync(intervalMS, swUrl, r);
          }
        });
      }
    }
  },
});
const handleReload = () => {
  updateServiceWorker(true);
  console.log('clicked');
  // window.location.reload();
};

I can see the interval being cleared from the logs, and the workers on devtools working and updating as they should, I tried turning on and off some attributes, but nothing seems to be reloading the app, I have to still force it using window.location.reload()
Here's the settings

VitePWA({
      registerType: 'prompt',
      includeAssets: ['favicon.ico', 'robots.txt', 'apple-touch-icon.png'],
      workbox: {
        maximumFileSizeToCacheInBytes: 6 * 1024 * 1024, // 6 MB limit
        globPatterns: ['**/*.{js,css,html,ico,png,svg,jpg,jpeg,whl,ttf}'],
        cleanupOutdatedCaches: true,
        skipWaiting: true,
        clientsClaim: true,
        sourcemap: true,
      },
    }),

[nicoepp]

I've also noticed that the reload is not working if the service worker receives an update after it has first been registered and before the tab has ever been closed or reloaded.

I think the above is because in the register.ts there is a check for event.isUpdate before trying to reload. It seems to me that the workbox isUpdate flag is false as long as the tab is not closed after the first register. So, even if there are multiple updated versions of the service worker coming in already the isUpdate stays false if the tab instance is still the same that also registered the first version of the service worker.

https://github.com/vite-pwa/vite-plugin-pwa/blob/main/src/client/build/register.ts#L87

wb?.addEventListener('controlling', (event) => {
  if (event.isUpdate)
    window.location.reload()
})

[aman1792]

I see similar behavior in different browsers.

Chrome 141.0.7390.54 - ok
Yandex 24.1.1.940 stable (64-bit) - Bad
Package - "vite-plugin-pwa": "0.14.4",

I click the button, it doesn't reload the page.

[aman1792]

check #583 (comment) and #583 (comment) (change the virtual import and needRefresh to use vue reactive logic, you need to clear the interval)

check also #583 (comment) (time between sw builds may have side effects)

Do I understand correctly that this method only works for browsers that support sw?
If the user tries to use where sw does not work, will need refresh return nothing?

const supportsSW = 'serviceWorker' in navigator
In this case, only reload helps to load the new version. refresh or hard refresh ?