Can't detect new builds locally

[chrissyast]

I'm trying to follow the implementation of reloading on a new build, specifically in this comment:

https://github.com/nuxt-community/pwa-module/issues/239#issuecomment-796807081

Code repeated here

**For anyone still wondering how to do this** 1. Create the following plugin ```js // pwa-update.js export default async (context) => { const workbox = await window.$workbox if (!workbox) { console.debug("Workbox couldn't be loaded.") return } workbox.addEventListener('installed', (event) => { if (!event.isUpdate) { console.debug('The PWA is on the latest version.') return } console.debug('There is an update for the PWA, reloading...') window.location.reload() }) } ``` 2. Add the plugin to Nuxt ```js // nuxt.config.js // ... plugins: [ { src: '~/plugins/pwa-update.js', mode: 'client' }, ], // ... ``` 3. Enjoy! 🎉 _Originally posted by @AlejandroAkbal in https://github.com/nuxt-community/pwa-module/issues/239#issuecomment-796807081_

However I can't get the "update for the PWA" code to be hit when I restart the server.

What I'm doing

1. nuxt build, nuxt start
2. Open in browser
3. Note number of service worker in DevTools > Application > Service Worker
4. Make some changes to the codebase
5. Repeat 1.
6. Go back to browser, don't refresh

Expected behaviour

Updated version of service worker is automatically detected and installed.

Actual behaviour

Stays on the same version of SW until browser refresh/opening new instance of page in another tab/hitting "Update" in the Service Worker section of DevTools. Also tried workaround in #401 (shouldn't be necessary on my version of pwa) with no luck

Env info

"@nuxtjs/pwa": "3.3.5"

workbox config:

workbox: {
    autoRegister: true,
    offline: false,
    offlineStrategy: "CacheFirst",
}

Update

Have tried this with a GCP build and get the same behaviour

[chrissyast]

The code from the comment linked only works when the user loads/reloads the page.

plugins\sw-update.js

export default async function checkForUpdate(context, err, firstTime = true) {
  if ("serviceWorker" in navigator) {
    const registration = await navigator.serviceWorker.getRegistration();
    if (registration) {
      registration.update();
      if (firstTime) {
        registration.addEventListener("updatefound", () => {
          // any code you need to do to suppress "unsaved changes" warnings
          window.location.reload();
        });
      }
    }
  }
  setTimeout(() => checkForUpdate(context, err, false), 5000);
}

nuxt.config.js

// ...
plugins: [
  { src: "~/plugins/sw-update.js", mode: "client" }
]
// ...

[kalnode]

The code from the comment linked only works when the user loads/reloads the page.

Ok... and the code you've provided addresses this?

[chrissyast]

The code from the comment linked only works when the user loads/reloads the page.

Ok... and the code you've provided addresses this?

Yes