[Solved] PWA force refresh when new version released?

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

zeppelinexpress

Hi guys, I have a doubt, how does the browser know there is a new update? is the package-lock.json?
just changing this:
{
“name”: “app”,
“version”: “0.0.1”,

is enough to automatically update on android/desktop browsers/installed versions?

ssuess

@zeppelinexpress when you build your project (for a PWA) there will be new cache signatures, which a PWA should read and then force an update. However, as mentioned above this is inconsistent across platforms and I have found it necessary to make my app check a version string that I set on the server and call the update mechanisms at that point which works everywhere. See the code examples above for what I use to make this work.

ChrisO

Rejoining this thread, because I’ve figured out a complete solution for a user controlled app refresh (similar to the pop-up in the Quasar documentation) that might be useful for others who have the same issue. It’s a combination of ideas taken from the Workbox Advanced Recipes (https://developers.google.com/web/tools/workbox/guides/advanced-recipes#offer_a_page_reload_for_users) and an article by Doug Allrich. It uses the Workbox-Window plug-in from Google.

<template>
  <q-dialog v-model="displayUpdatePrompt">
    <q-banner>
      A new version is available.
     <template v-slot:action>
       <q-btn label="Update" @click="refreshApp" />
     </template>
   </q-banner>
  <q-dialog>
</template>

<script>
import { Wokbox } from 'workbox-window'

export default {
data() {
  return {
  displayUpdatePrompt: false,
  workbox: null,
  }
},
methods: {
  refreshApp() {
    this.workbox.addEventListener('controlling', () => {
      window.location.reload()
    })
   this.workbox.messageSkipWaiting()
  }
},
created() {
  if ('service-worker' in navigator) {
    this.workbox = new Workbox('/service-worker.js')

   this.workbox.addEventListener('waiting', (event) => {
    this.displayUpdatePrompt = true
    })
    this.workbox.register()
  }
}
}
</script>

tlloyduk

@Chris-0 awesome! would you add this as a component and then call it from App.vue or is there a best practice for where to position this in a Quasar project ?

imaryjones09876

Troubleshooting methods to solve Pogo games not working issue
Clear the cache
If Pogo games are not working on your system, then the first thing that you need to do solve this problem is to clean the cache. Read out the instructions below for clearing the cache.

First, go to your browser’s settings and open your browser’s history
Now, select browser history
As you select browser’s history, a number of check boxes will open up in front of you together with the check boxes, out of those check boxes, one is cache.
Now, you need to select cache and remove the cache by clicking on the button of delete.
After deleting the cache from the browser, close the browser. Now, launch the browser again and open the Pogo website on it. Now, check whether your loading problem is resolved or not. If you are still not able to load the page, then you need to clear Java cache. In case your game is backed by flash, then erase the flash cache.
Restart or refresh our system
If you are unable to load Pogo games webpage on your computer, then try refreshing the page by pressing F5. You can also reload the page by clicking on the reload icon placed on the top of your browser. If you do so, then your internet browser will avoid the cache and you will be able to access the Pogo.com page.
Use some other browser
If you are not able to fix Pogo games not working issue by any of the above-stated methods, then use another browser to play virtual games. This will definitely solve your problem. Sometimes the problem fixes by switching the browser.
Generally people use web browsers like Internet Explorer, Google Chrome, and Firefox etc. But there are several other internet browsers that people use, which are not fit for online gaming. So, use compatible browsers for virtual gaming.
Get More Help https://pogo-supportcenter.com/pogo-games-not-loading/
pogo sign in problems, pogo support number, pogo account, club pogo sign in page, pogo games sign in page, pogo stuck online, pogo customer service phone number, pogo customer support number, pogo support phone number, pogo games not loading, pogo login problems, Pogo customer Service, Pogo Billing Support, Pogo Billing Support Number, Pogo Customer Service Number, Pogo Gems Not Showing, Pogo login issues, Pogo games not working, pogo games won ‘t load, pogo troubleshooter, pogo games down

SharpBCD

I have read all documentation and this thread but I still encounter a problem. My service worker is not triggered when I update the server as it should, it is only triggered when I open a new tab and access the app again. Any suggestion? Can I force to check for updates every 5 seconds, let’s say?

SharpBCD

Solved with this pcs of code:

		console.log('%c Service worker is active.', 'color: magenta', registration);
		const updateManual = () => {
			registration.update().catch((er)=>console.error('Error on update worker', er));
		};
		setInterval(updateManual, 500); // 500ms works for me, but you may want to set it higher.
	},```
in case someone else need it.

No More Posting New Topics!

[Solved] PWA force refresh when new version released?