Pwa-module: Detect and update new builds

[fatlinesofcode]

We're using the PWA module with Nuxt in SSR mode.

We have noticed that if a user installs the app to the homescreen and we deploy new page change, the user still sees the old version.

Is it possible to detect new versions so we can display a reload notification?
Or is possible to run update request through the service-worker see when a user re-open's the app using visibilitychange api?

_{This question is available on Nuxt community (#c173)}

[cmty[bot]]

This issue as been imported as question since it does not respect pwa-module issue template. Only bug reports and feature requests stays open to reduce maintainers workload.
If your issue is not a question, please mention the repo admin or moderator to change its type and it will be re-opened automatically.
Your question is available at https://cmty.app/nuxt/pwa-module/issues/c173.

[fatlinesofcode]

@pi0 any thoughts on this?

[fatlinesofcode]

Some example approaches :

Workbox, update-version flow : https://medium.com/@webmaxru/workbox-4-implementing-refresh-to-update-version-flow-using-the-workbox-window-module-41284967e79c

Vue PWA cache-busting : https://medium.com/js-dojo/vuejs-pwa-cache-busting-8d09edd22a31

[buremba]

Did anyone get this feature working with this module?

[chadananda]

Seems like this would be a pretty important piece of app functionality

[zachzoup]

This is pretty old, but it doesn't look like anyone ever posted their solution. The docs mention that we can use await window.$workbox to access the SW. I was able to add a few lines of code to my layouts/default.vue file to listen for events and show a message.

const workbox = await window.$workbox;
if (workbox) {
    workbox.addEventListener('installed', (event) => {
        if (event.isUpdate) {
            // whatever you want to do to let the user know there's an update available
        }
    });
}

edit: zachjharris is me

[pi0]

@zachzoup If you would like to add a page specific to your solution to docs or write a blog post it's more than welcome :+1:

[zachjharris]

@pi0 I will add to the docs from my personal account (this)

[novis-opscale]

@zachjharris I'm still not able to update my new builds. Getting value of workbox as undefined

[zachjharris]

@novis-opscale can you post the complete code?

[novis-opscale]

@zachjharris I was able to get workbox object, earlier I was using @nuxtjs/[email protected] in my old project code. I have created a new project [https://github.com/novis-opscale/nuxt-pwa-test.git] and defined code block inside default layout and I'm simply trying to console log for installed, activated and waiting events but this time event listeners do not seem to work when I start build server

[1forh]

@novis-opscale Did you ever get this working? I'm running into the same issue.

[zachjharris]

@1forh are changes being made to sw.js in build to ensure that the updated worker is recognized as new?

[aldd-cangulor]

This is pretty old, but it doesn't look like anyone ever posted their solution. The docs mention that we can use await window.$workbox to access the SW. I was able to add a few lines of code to my layouts/default.vue file to listen for events and show a message.

const workbox = await window.$workbox;
if (workbox) {
    workbox.addEventListener('installed', (event) => {
        if (event.isUpdate) {
            // whatever you want to do to let the user know there's an update available
        }
    });
}

edit: zachjharris is me

Whats is the solution please

[mckrava]

Why topic is close if answer is still not clear? This feature works like a magic - unexpectable. Can somebody give any more or less clear recommendation how to implement "Update available" message on Nuxt? Thanks a lot!

[Coltron0117]

This is probably the most important feature/reason to use a PWA and there isn't an example or clear documentation. I never hit the isUpdate in the eventListener. I could extensively look at Workbox documentation but I feel this PWA module should be a one stop shop and have the documentation to support it.

[zachjharris]

@Coltron0117 are any changes being made to your sw.js file when a new build is deployed? My (limited) understanding is that workbox will only recognize that an update is available if there is a change to sw.js.

[Coltron0117]

@Coltron0117 are any changes being made to your sw.js file when a new build is deployed? My (limited) understanding is that workbox will only recognize that an update is available if there is a change to sw.js.

Yeah that works but it would be nice if there was a way to auto increment versioning and for that to be added to the sw.js file so that on deployment it knows to re-cache.

[fatlinesofcode]

we solved this internally by writing the build datetime to a static version.json when nuxt builds run.
On the client side, when the app first mounted it checks the version.json against the last locally stored version. If it different the app display a "we made some changes, click to reload" prompt

/**
 * Build version info.
 * BUILD_TIME time of the deployment build
 */
const version = {
  'BUILD_TIME': format(buildTime, 'yyyy-MM-dd HH-mm-ss')
}

const writeVersion = new CreateFileWebpack({ path: resolve(__dirname, '../static'), fileName: 'version.json', content: JSON.stringify(version) })

const plugins = [
  writeVersion
]

[Coltron0117]

Thanks for the idea. I ended up using a version number and checking against local storage to prompt whether the cache needs to be refreshed or not. Then showing the button. Cheers!

[Mctony17]

Thanks for the idea. I ended up using a version number and checking against local storage to prompt whether the cache needs to be refreshed or not. Then showing the button. Cheers!

Please can you share a snippet on this?

[jcardus]

Thanks for the idea. I ended up using a version number and checking against local storage to prompt whether the cache needs to be refreshed or not. Then showing the button. Cheers!

Please can you share a snippet on this?

you can use this: https://www.npmjs.com/package/webpack-version-file

[AlejandroAkbal]

For anyone still wondering how to do this

1. Create the following plugin

// 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()
  })
}

1. Add the plugin to Nuxt

// nuxt.config.js

// ...

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

// ...

1. Enjoy! 🎉

[AllanOricil]

Sorry, do we need to add the plugin or is it added out of the box? Did not understand.

[AlejandroAkbal]

Sorry, do we need to add the plugin or is it added out of the box? Did not understand.

You have to manually create it.

Look at @devCrossNet commit in the following link.

https://github.com/vuesion/vuesion/commit/afd133df394e5aab5fd79e78451bce5cce377d81