[Solved] PWA force refresh when new version released?

dobbel

Thread with similar problem:
https://forum.quasar-framework.org/topic/6959/chrome-but-not-ff-nor-safari-randomly-fails-pwa-update/29?_=1604419034026

btw I would start new thread for this.

ssuess

@PiotrG I am pretty sure you are running into the same problem I was running into originally, which is that a simple reload will not work because you can’t let go of the app itself while you are using it without invoking the update method of your registration in navigator.serviceWorker see above for that code, and also remember that you must have skipWaiting and clientsClaim present in your service worker (they can be loaded into the service worker when using GenerateSW if you add workboxOptions: { skipWaiting: true, clientsClaim: true } in your quasar.conf.js file btw)

turigeza

@ssuess Which one are you using right now ? The last one posted here …
https://forum.quasar-framework.org/topic/2560/solved-pwa-force-refresh-when-new-version-released/31?_=1605731186657

forceSWupdate () {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.getRegistrations().then(function (registrations) {
      for (let registration of registrations) {
        registration.update()
      }
    })
  }
}

ssuess

@turigeza I use the function above when I want to trigger an update from within my code, and within my service worker I have code that checks my local version number, clears localstorage, and then forces a reload. I also have to unfortunately check in SW for what browser we are using, because different browsers behave differently when reloaded. You can see that code and explanation in this thread: https://forum.quasar-framework.org/topic/6959/solved-chrome-but-not-ff-nor-safari-randomly-fails-pwa-update/41?_=1605780104096

metalsadman

@ssuess said in [[Solved] PWA force refresh when new version released?](/post

@turigeza I use the function above when I want to trigger an update from within my code, and within my service worker I have code that checks my local version number, clears localstorage, and then forces a reload.

Mind sharing the snippet

ssuess

I linked to it above, but here it is again in more or less final form (with domains changed):

import localforage from 'localforage'

register(process.env.SERVICE_WORKER_FILE, {
  ready () {
    console.log('App is being served from cache by a service worker.')
  },
  registered (registration) { // registration -> a ServiceWorkerRegistration instance
    console.log('Service worker has been registered.')
    // console.log('scope: ' + registration.scope)
  },
  cached (registration) { // registration -> a ServiceWorkerRegistration instance
    console.log('Content has been cached for offline use.')
  },
  updatefound (registration) {
    console.log('New content is available; please refresh.')
    /* eslint-disable no-extra-boolean-cast */
    if (!!window.chrome) { // for chromium based browsers
      fetch('https://pwatest.mydomain.com/av.json?t=' + Date.now())
        .then(response => {
          response.json().then(function (data) {
            const r = confirm('There is a new version (' + data.version + ') available. Your version will be updated, alright? ' + data.message)
            if (r === true) {
              if (data.clearStorage === true) {
                localforage.clear().then(function () {
                  // Run this code once the database has been entirely deleted.
                  console.log('Database is now empty. so there now.')
                  location.reload(true)
                }).catch(function (err) {
                  // This code runs if there were any errors
                  console.log(err)
                })
              }
            } else {
              console.log('You pressed Cancel!')
            }
          })
          console.log('response:', response)
        })
        .catch(error => {
          console.error(error)
        })
      }
    },
    updated (registration) { // registration -> a ServiceWorkerRegistration instance
      console.log('New content is available; please refresh.')
      if (!window.chrome) { // for non chromium browsers
      fetch('https://pwatest.mydomain.com/av.json?t=' + Date.now())
        .then(response => {
          response.json().then(function (data) {
            const r = confirm('There is a new version (' + data.version + ') available. Your version will be updated, alright? ' + data.message)
            if (r === true) {
              if (data.clearStorage === true) {
                localforage.clear().then(function () {
                  // Run this code once the database has been entirely deleted.
                  console.log('Database is now empty. so there now.')
                  location.reload(true)
                }).catch(function (err) {
                  // This code runs if there were any errors
                  console.log(err)
                })
              }
            } else {
              console.log('You pressed Cancel!')
            }
          })
          console.log('response:', response)
        })
        .catch(error => {
          console.error(error)
        })
      }
    },
    offline () {
      console.log('No internet connection found. App is running in offline mode.')
    },
    error (err) {
      console.error('Error during service worker registration:', err)
    }
})

turigeza

@ssuess Thank you for sharing the code and explaining it as well.

danbars

It seems that Quasar now supports this out of the box: https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa#Reload-%26-Update-Automatically

ssuess

@danbars Quasar supports loading clientsClaim and skipWaiting directives into the SW file, but for a number of reasons this is not enough. Also, while on supported platforms it will update your PWA, it will do so silently. I needed a way to do all of the following:

Control or initiate the update process
Set my own versioning
Notify users about updates
Perform actions related to the update
Work around platform and browser limitations and inconsistencies so that it works the same everywhere and without failure

Marin Vartan

@carlitos thank you man, you save a lot of time