[Solved] PWA force refresh when new version released?

  • @ssuess thank you for add your solution, I have implemented it with Vuex and works fine.

  • @ssuess @israel965 can you post a bit more detail please? I’m having the exact same problem, but I haven’t worked at that lowlevel with quasar yet.

    If i wanted to just add a button to manually force update, without the version check… (I would have to tell users to push it of course but…)

    this is the magic code that actually busts the cache and reloads everything?

    • do you manually create a version string each time you do a new version deploy somewhere or does the quasar build / webpack process generate some type of hash you can use easily?

    • the localStorage method you use, does quasar wrap these APIs? if using VueX does vueX have an option to push data to localStorage?

    Thanks for any help.

  • @dcsan window.location.reload(true) will clear the cache, but unless you have the updated version up on the server, it will just reload the same thing. The fact of publishing a new version in quasar (and then uploading it to the server) sets all the unique cache signatures. While on android the PWAs will automatically update when those signatures change, on iOS this was not the case, because the app would never check. So running window.location.reload(true) forces the app to delete its cache and check again, this time finding the new version (and loading and caching it). As for the localStorage method I use, it is via the localForage plugin (https://github.com/shidianxia/vue-localforage). I just store a simple versionstring in my localStorage and compare that against one I set on the server and retrieve each time I update (this is separate from the cache signatures that Quasar sets within the code). If the version on the server is newer, I clear my local cache and reload (Otherwise I leave it alone because I don’t want to needlessly reload my app all the time, only when there is a newer version). Hope this helps.

  • thanks for the response! and tip on localForage, tho it’s a callback based API which I don’t really prefer.
    I also found this writeup

    are there any version info in the app available from the quasar webpack build process? otherwise I’m thinking to put something into my deploy pipeline to write a JSON file with the current epoch time into /public folder and then check against that. no need to put that into the DB just deploy the file and load from client as a static JSON.

  • localForage can be used via promise or callback, FYI.

  • Quasar also provides a localstorage API:

  • After this time, is there a way in Quasar v1.X to auto-refresh changes if detected or show user a notification? Using service-workers or another tool.

  • As mentioned in other posts, I’ve solved this adding the next code to the register-server-worker.js:

    updated (registration) { // registration -> a ServiceWorkerRegistration instance
      console.log('New content is available; please refresh.')
        message: i18n.t('messages.update_available'),
        icon: 'cloud_download',
        closeBtn: i18n.t('labels.update'),
        timeout: 10000,
        onDismiss () {

    But as you want to update immediately, you must take control of the service worker lifecycle using skipWaiting().
    Add the next code to your custom-service-worker.js if you are using one like me:


    But, if you are using the default configuration, add the next to the quasar.conf.js file that will add for you:

    pwa: {
      workboxOptions: { skipWaiting: true }, // only for NON InjectManifest

    If you don’t add this skip, your app will enter in a endless loop asking for update if you try to reload.

Log in to reply