When and how does a PWA update itself?

Question

As far as I know, once you click "add to homescreen" on a PWA's website, the browser generates an .apk using the provided manifest file and sources and installs it like a normal app.

I noticed that when I update the website, the app also displays the updated content which suggests that the app is just a wrapper for accessing the website. I also noticed that the update to a website is not displayed instantly, I assume this is due to internal caching.

My question is, are my assumptions correct? Or more generally, when and how are PWAs updatated and is there a way to force an update on a client machine?

Solution 1

No cache scenario (No Service worker): Your PWA app will be cached only when you use Service worker. Manifest.json will help adding your web app to home screen with a icon and open without address bar. If you don't have a service worker or if your browser don't support it, web page will be loaded fresh every single time. No Cache.

Cache-On Scenario (With Service worker): Assuming you have service workers configured, service workers can cache by lazy loading or prefetching the files that are configured for caching (You can include or exclude caching anything from html, CSS, images to JSON/XML API responses).

After the initial cache, service worker will use the cache to serve your apps network request based on cache approach you have implemented from below ones.

• cache falling back to network
• Network falling back to cache
• Cache then network

Most apps choose to precache due to performance benefits and look for new files on loading, if any changes found will be loaded on next session or prompt user to refresh. With this solution, each file will have a long Hash string for each file cached by service worker. On load of each application, hash code from server will be fetched to match and find what file needs to be updated and the same will be updated in a separate service worker thread. You can notice this in network tab -> service worker response in chrome developer tools.

If you choose network-first approach, you can avoid showing old content on initial load, but loose significant performance benefits that comes with caching.

Solution 2

Only two events…

In essence, there are only two events that will automatically trigger a PWA update:

1. A change in the linked manifest.json; e.g. a changed icon file or a changed scope or start_url.
2. A one-character change in the controlling service-worker.js. Hence, if you store the version number in a const in this file and change it, an update of the PWA will be triggered.

When a change is detected, the new version will normally be activated only with the next PWA load. So, in all, two reloads are necessary to see a change.

How the update eventually is handled, is ultimately determined by the service-worker.js. Different update strategies may be defined in terms of the size and volatility of the PWA assets. It is also possible to activate a new service immediately.

However, there is one important caveat. Make sure that the browser cache expiry directive set by the .htaccess file of your asset server is set to a really short duration (e.g. hours) or even to none. Failing to do so, will result in the browser not seeing any change for days to come in the manifest.json nor the service-worker.js.

More details about service worker behaviour are available from Google Web Fundamentals.

Comments

[Coisox]

Sorry hijack this thread since @Anand are very good in this. I'm using precache approach. On laptop Chrome, when I close tab and reopen, the new service worker took place. But in Android Chrome, it did not updated immediately upon tab close/open. How to force update on Chrome Android?

[zachguo]

Will installed PWA honor the cache-control header I defined for certain resource?

[Anand]

PWAs caching is based on service workers and not on traditional browser cache meta data. Find service workers options for what your trying to do with cache in your pwa.

[dmcknight]

If you have a PWA where a particular js file is intentionally NOT cached by the service worker, will it be more likely to actually update in iOS when you make changes to it? I'd like to be able to publish updates to a js file and feel confident that iOS users are reliably getting the update the next time they open the web app.

[Anand]

Yes. If you don't cache it, then browser would do a regular http call - not proxied via service worker. You can even case that JS file and check for update on opening the app, refresh the app if there is a update. But that process takes time needed for the backend call and you have to engage the user during that app load time -like with a splash screen.

[товіаѕ]

Hi, thanks for your answer! Yes indeed, this is an important addition to keep in mind.

[Simon Wicki]

Regarding service-worker.js's max-age set to a long duration: modern browsers will treat 1d, 1w or 1y cache duration for sw.js the same as 1 day. this way you can't brick a website forever. stackoverflow.com/questions/38843970/…

[Valian Masdani]

Thank you. Keeping the version number as const makes the most sense