What files should be Precached by a Service Worker (in general)?

7
votes

I appreciate this question might be slighty 'opinion based', however, I think a generalised answer could very much help others in the future that are interested in learning more about PWA's and Service Workers.

Background

I have searched around the web and am surprised to find no clear description of what the best practices are when it comes to selecting the files to be precached by a Service Worker for a PWA.

There are various articles/documentation that outline what precaching does and how it works (see here for more information), but none of them give examples of 'common practices'.

Question

In a standard Progressive Web Application, what files would one typically precache?

What I am currently doing...

In order to ensure my application works as best as possible offline, I am precaching all of the following files:

  • The index.html template (my app is a Vue SPA)
  • All JS files (including the JS from dynamic imports)
  • All CSS files (there is only one)
  • The web manifest
  • Any custom fonts the application uses
  • Any required language files (this is dynamic i.e. will only precache language of the current visitor)
  • All app icons (see list below)
  • All splash screens (see list below)

In my case, this comes to approximately 2MB (likely to increase once the application is completed)

Breakdown of App Icons

  • android-chrome-192x192.png
  • android-chrome-512x512.png
  • apple-touch-icon-120x120-precomposed.png
  • apple-touch-icon-120x120.png
  • apple-touch-icon-180x180-precomposed.png
  • apple-touch-icon-180x180.png
  • apple-touch-icon-72x72-precomposed.png
  • apple-touch-icon-72x72.png
  • apple-touch-icon-precomposed.png
  • apple-touch-icon.png
  • icon_128x128.png
  • icon_144x144.png
  • icon_152x152.png
  • icon_192x192.png
  • icon_384x384.png
  • icon_512x512.png
  • icon_72x72.png
  • icon_96x96.png
  • favicon-16x16.png
  • favicon-194x194.png
  • favicon-32x32.png
  • favicon.ico
  • mstile-144x144.png
  • safari-pinned-tab.svg

Breakdown of Splash Screens

  • splash-1125x2436.png
  • splash-1242x2148.png
  • splash-1536x2048.png
  • splash-1668x2224.png
  • splash-2048x2732.png
  • splash-640x1136.png
  • splash-750x1294.png
1
service-workerprogressive-web-appsworkboxsw-precache

1 Answers

2
votes

As a general rule, you should prefetch in your PWA all those static assets that compose the app core shell.
Thus, the minimum set of assets that you want to make immediately available for your user, even without an internet connection. If the prefetch of those resources fails, the service worker will NOT be installed, as they are crucial for the PWA itself.

The scenarios can change from case to case.
For example, in a simple case you can cache only an offline page, some company logo images and the related javascript file. In other (as example https://www.trivago.ch/), you can provide a full offline game to interact with your users while offline.

I wrote a series of articles about Progressive Web Apps, if anyone want to further investigate the topic.