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.
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'.
In a standard Progressive Web Application, what files would one typically precache?
In order to ensure my application works as best as possible offline, I am precaching all of the following files:
index.html template (my app is a Vue SPA)In my case, this comes to approximately 2MB (likely to increase once the application is completed)
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.