Search code examples
webpackworkbox

What is the point in precaching files in workbox?


So I'm reading this:

https://developers.google.com/web/tools/workbox/guides/precache-files/

And it says this:

Precaching a file will ensure that a file is downloaded and cached before a 
service worker is installed, meaning that if your service worker is installed, 
your files will be cached.

In the example, it describes that the service worker will download 3 files, which were the 3 files designated.

Given that I'm using the webpack plugin, and that my precache-manifest file contains all of my bundled .js files, does that mean that when I visit the website the first time, I'm downloading almost everything? (Wouldn't this make the implementation of Workbox useless for PWA?)

Whats the point in having a file that needs to keep track of all your .js files with versioning?

I have also checked the console, in the Network tab and the browser doesn't seem to download everything, so I'm unsure of the link (or lack thereof) between the application only loading what it needs, and the manifest file having references to almost everything.


Solution

  • You correctly understand the point of precaching.

    If your webpack build contains a number of "optional" resources that are unlikely to be needed by most users, then pruning the list of assets to precache is a great idea. You don't have to precache everything.

    You could use the include/exclude options in the plugin's configuration to white/blacklist asset filename patterns, and includeChunks/excludeChunks to white/blacklist entire chunks. There are more details in the docs.