As we stated at the beginning of this chapter, one of the main uses for service workers is to cache page resources for future use. We saw this with our first simple ServiceWorker, but we should set up a more complicated page with more resources. Follow these steps:
- Create a brand new ServiceWorker called CacheServiceWorker.js and add the following template code to it. This is what most of the ServiceWorker instances will use:
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('v1').then((cache) => {
return cache.addAll([
// add resources here
]);
}).then(() => {
console.log('we are ready!');
})
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match...