Progressive Web Apps with React

The asset manifest

Our build process automatically generates an asset-manifest.json file for us, with a list of every JavaScript file our application contains. It looks something like this:

{  "main.js": "static/js/main.8d0d0660.js",  "static/js/0.8d0d0660.chunk.js": "static/js/0.8d0d0660.chunk.js",  "static/js/1.8d0d0660.chunk.js": "static/js/1.8d0d0660.chunk.js",  "static/js/2.8d0d0660.chunk.js": "static/js/2.8d0d0660.chunk.js"}

In other words, we have a list of every JS file we want to cache. More importantly, the asset manifest is updated with the new hash of every file, so we don't have to worry about keeping that up to date.

We can thus use the URLs in the asset manifest alongside the Cache.addAll() method to instantly cache all our JavaScript ...