[Solved] PWA force refresh when new version released?

ssuess

Can anyone point me to any guide for getting my PWA to update automatically for users when there are changes or a new version? Is there anything in Quasar built in to help accomplish this? Currently (on iOS at least) users need to clear their Safari cache in order to have the PWA reload its data, a not very intuitive or UI-friendly thing to do. I have been looking around the web and it seems like maybe I have to customize the service-worker.js to check some version variable and invalidate the cache? Is this the right way to go or something else?

ssuess

Has nobody ever needed to do this?

ssuess

Do I need to do this by hand outside of Quasar?? Following something like this article? (https://deanhume.com/displaying-a-new-version-available-progressive-web-app/) with all the care put into Quasar this really seems like something that is built in, but that I am simply not finding. Can someone please offer some advice before I build this from scratch?

mojimo

I’m struggling with the same problem whenever I publish a new versions of our apps to the Intranet but I haven’t find a way how to force Webpack change hash => change all file names to let the browser (Chrome, IE11) know that there is a new version.

ssuess

me neither, I can find no guide related to quasar to help, and no one is answering this post if they know. Right now I am trying to run an axios call to my API for a version check on the first page, and I can at least correctly do that and check against my locally stored (indexedDB) version to see if it is out of date. After that, I can’t figure out how to delete the local cache from within vue/quasar so that the pages will reload…

ssuess

Still hoping SOMEONE somewhere can give SOME direction, ANY direction, ANY clue, ANY help…

rstoenescu

Make use of src-pwa/register-service-worker.js… You got the “updated” method there.

ssuess

Thanks @rstoenescu , I have taken a look at that, but there is no console log when there is new content…is this supposed to fire automatically? Despite there being new content/new version of my PWA generated, nothing is happening at all. Or is this something that only works on Android perhaps (I am testing on iOS)?

ssuess

This stackexchange post has me wondering if this is even supported on iOS: https://stackoverflow.com/questions/51435349/my-pwa-web-app-keep-showing-old-version-after-a-new-release-on-safari-but-works

ssuess

This post is deleted!

ssuess

@rstoenescu ?

rstoenescu

@ssuess iOS has just started on really working on their PWA features support. So it might not work as expected yet. Desktop browsers (regardless of OS) and Android on the other hand have a pretty solid PWA support.

mesqueeb

@ssuess I made a function that refreshed it a long time ago.
But since iOS 11.12 update just completely screwed up PWA support and keeps refreshing the app every time you open, I just stopped PWA all together now.

Also, I’ve had many problems always with users not on the latest version. Sometimes safari webkit doesn’t recognise and trigger the popup to refresh to get the latest version of the app and I was never able to find out why.

mesqueeb

@ssuess Anyway, if you look in service-worker-prod.js in the PWA source folder you will find this line:

case 'installed':

That’s where you need to write your logic. I had:

case 'installed':
  // At this point, the old content will have been purged and the
  // fresh content will have been added to the cache.
  // It's the perfect time to display a "New content is
  // available; please refresh." message in the page's interface.
  if (!window.QNotify) {
    window.location.reload()
    break;
  }
  window.QNotify({
    message: window.store.getters.text.global.newVersionAvailable,
    timeout: 10000,
    type: 'info',
    actions: [{
      label: window.store.getters.text.global.refresh,
      handler: function () { window.location.reload() }
    }]
  })
  break;

ssuess

@mesqueeb I am curious what you mean about “keeps refreshing the app every time you open”, because this definitely does NOT happen in my PWA on iOS (unless I have something else wrong with it like an invalid cert or mismatched domain). In my testing, I had actually mistakenly thought refreshing was fixed because it seemed to be getting the latest version but then realized my test domain was invalid and thus was never operating as a PWA anyway. Once i tested back on the valid domain it went back to caching all the time. As I said above, the only way I have found to get my PWA to refresh is to paradoxically clear the SAFARI cache. (which obvi makes ZERO sense to a user or anyone else).

mesqueeb

@ssuess Thanks for your post.
I meant this comment in this post:

What to have in mind
Your PWA won’t keep state between sessions, if the user gets out of a PWA, it will be restarted when coming back, so if you need the user to validate an email, SMS or do a two-factor authentication, have that in mind to offer a proper solution.

It was the same for me, where every time I open the PWA it will flash and take me back to the homepage. Maybe they fixed this already?

Combined with this, not getting the prompt to install the latest service worker and having users using older versions of my apps without me being able to do anything about it just added to the list of problems… That’s why I left PWA’s.

ssuess

@mesqueeb Oh I see what you mean. Yes in fact, I am taken back to the homepage, but because everything is cached, all info on that homepage and other pages (and of course what I am storing in IndexedDB) is still the same, ie no new version or page changes are downloaded, despite being directed to the main page on every PWA launch/load. So other than a navigational inconvenience, it still won’t check for new version of PWA.

mesqueeb

@ssuess Exactly… iOS really f*cked up the PWA support this time…

I believe they want to make the worst compatibility as possible to make devs not use PWA’s and make more native apps. Because Apple won’t make money from PWA’s and they have more chances they will from native apps.

Welcome to the world where money is more important than the consumers.

ssuess

It is really a shame. And a search around the web has very little information of this type (ie clear descriptions of what is and is not supported), and no word from Apple on when or if they will ever support the missing pieces. My guess is they will not unless there is a huge outcry, for exactly the reasons you mention (ie they won’t make money from it).

ssuess

OMFG!!! I have a solution!!!

I add a check for versionstring on the server, and return it to the app.
I look for it in localtstorage (IndexedDB) and if I don’t find it, I add it. If I do find it, I compare versions and if there is a newer one on the server, I throw up a dialog.
Dismissing this dialog (my ok button is labeled “update”) runs window.location.reload(true) and then stores the new versionstring in localstorage

RESULT: My app is updated!! I have been searching for a way to do this for weeks and weeks, so glad it finally works on iOS. Hope this helps someone else.

No More Posting New Topics!

[Solved] PWA force refresh when new version released?