Progressive Web Apps with React

Adding the relevant URLs to the cache

Since we have a JavaScript object to access the URLs, we can pick and choose what we want to cache, but in this case, we want everything, so let's iterate over the object and get an array of URLs:

response.json().then(manifest => {  const urls = Object.keys(manifest).map(key => manifest[key]);})

We also want to cache the index.html and our icon, so let's push in / and /assets/icon.png:

response.json().then(manifest => {  const urls = Object.keys(manifest).map(key => manifest[key]);  urls.push(‘/’);  urls.push('/assets/icon.png');})

Now, we can add all these URLs to the cache with cache.addAll(). Note that we’re referring to the specific cache object we opened, and not the general caches variable:

self.addEventListener('install', ...