3

Is it possible to identify updates on the server, that's, has updates on the page (HTML) or on the style (CSS) and make a request to server to get updated data? If so, how?

Lucas Kauer
  • 278
  • 1
  • 3
  • 12

3 Answers3

5

Shortly;

  1. When your service worker script change, it will set to replace the old one user has as soon as user gets online with your PWA.
  2. You should reflect changes to the array of items you have in your SW.
  3. You should change the name of the cache, and remove the old cache.
  4. As the result, your users will always have the latest version of your app.

With details;

1) Change your SW to replace the one user currently have.

Even slightest change in your SW is enough for it to be considered as a new version, so it will take over the old one. This quote from Google Web Developers explains it;

Update your service worker JavaScript file. When the user navigates to your site, the browser tries to redownload the script file that defined the service worker in the background. If there is even a byte's difference in the service worker file compared to what it currently has, it considers it new.

Best practice would be keeping a version number anywhere in your SW, and updating it programmatically as the content change. It could even be quoted, does not matter, it will still work. Remember: even a byte's difference is enough.

2) Reflect your changes to the list of items to be cached.

You keep a list of assets to be cached in your SW. So reflect added/updated/removed assets to your list. Best practice would be setting up cache buster for your assets. That is because SW is located a layer behind the browser cache, so to speak.

In another words: fetch requests from SW goes through browser cache. So SW will pick new assets from browser cache instead of the server, and cache those until SW changes again.

In that case you will end up half of your users using your PWA with new assets while the other half is suffering from incredulous bugs. And you would be having wonderful time with over-exposure to complaints and frustration of being unable to find the cause or a way to reproduce those.

3) Replace your old cache, do not merge it.

If you do not change the name of the cache for your updated list of assets, those will be merged with old ones.

Merge will be happen in a way that old and removed assets will be kept while new ones added and changed ones will be replaced. While things will seem to work okay this way, you will be accumulating old assets on users' devices. And space you are storing is not infinite.

4) Everyone is happy

It may look tedious to implement and keep track of all the things mentioned but I assure you that otherwise you will start having way greater and way more unpleasant things to deal with. And unsatisfied users will be a nice plus.

So I encourage you to design your SW for once and for good.

Community
  • 1
  • 1
Umur Karagöz
  • 2,970
  • 1
  • 19
  • 29
  • Do I need to reload the page to get that change? Or it will happen automaically? – Sravan May 01 '18 at 11:11
  • 1
    @Sravan Sorry for late reply. I'll still provide a an answer for further reference. Short answer is **yes**, you do need a refresh to get the changes. Long answer can be found here: https://stackoverflow.com/a/41915695/4306828 – Umur Karagöz May 08 '18 at 09:55
  • @Sravan & @ Umur, refresh isn't enough: *"refreshing the page isn't enough to let the new version take over"*, https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle. *"To get the update, close or navigate away from all tabs using the current service worker"* – KajMagnus May 03 '19 at 07:58
0

Yes it is possible by invalidating the cache in your service worker:

https://developers.google.com/web/fundamentals/getting-started/primers/service-workers#update-a-service-worker

Note also that at the moment there is an open issue and Service worker JavaScript update frequency (every 24 hours?) as the service worker may not be updated due to browser cache.

However you may also want to take a look at sw-precache which does this for you (for example through a gulp task)

Community
  • 1
  • 1
Kevin Farrugia
  • 6,431
  • 4
  • 38
  • 61
-2

Have a look at LiveJS to dynamically update the css.
I believe the solution they use is to add a get parameter with a timestamp to the css or html page: /css/style.css?time=1234 and calculate the hash of the result. If the hash changed since the last verification, update the CSS, otherwise, keep looking.

A similar implementation could be built from HTML, but I have not seen any similar projects for it. You should have a look at Ajax if you want to automatically update data in your page.

Antony
  • 1,253
  • 11
  • 19