// tick this to make the cache invalidate and update const CACHE_VERSION = 1; const CURRENT_CACHES = { 'read-through': 'read-through-cache-v' + CACHE_VERSION }; self.addEventListener('activate', (event) => { // Delete all caches that aren't named in CURRENT_CACHES. // While there is only one cache in this example, the same logic will handle the case where // there are multiple versioned caches. const expectedCacheNames = Object.keys(CURRENT_CACHES).map((key) => { return CURRENT_CACHES[key]; }); event.waitUntil( caches.keys().then((cacheNames) => { return Promise.all( cacheNames.map((cacheName) => { if (expectedCacheNames.indexOf(cacheName) === -1) { // If this cache name isn't present in the array of "expected" cache names, then delete it. console.log('Deleting out of date cache:', cacheName); return caches.delete(cacheName); } }) ); }) ); }); // This sample illustrates an aggressive approach to caching, in which every valid response is // cached and every request is first checked against the cache. // This may not be an appropriate approach if your web application makes requests for // arbitrary URLs as part of its normal operation (e.g. a RSS client or a news aggregator), // as the cache could end up containing large responses that might not end up ever being accessed. // Other approaches, like selectively caching based on response headers or only caching // responses served from a specific domain, might be more appropriate for those use cases. self.addEventListener('fetch', (event) => { event.respondWith( caches.open(CURRENT_CACHES['read-through']).then((cache) => { return cache.match(event.request).then((response) => { if (response) { // If there is an entry in the cache for event.request, then response will be defined // and we can just return it. return response; } // Otherwise, if there is no entry in the cache for event.request, response will be // undefined, and we need to fetch() the resource. console.log(' No response for %s found in cache. ' + 'About to fetch from network...', event.request.url); // We call .clone() on the request since we might use it in the call to cache.put() later on. // Both fetch() and cache.put() "consume" the request, so we need to make a copy. // (see https://fetch.spec.whatwg.org/#dom-request-clone) return fetch(event.request.clone()).then((response) => { // Optional: add in extra conditions here, e.g. response.type == 'basic' to only cache // responses from the same domain. See https://fetch.spec.whatwg.org/#concept-response-type if (response.status < 400 && response.type === 'basic') { // We need to call .clone() on the response object to save a copy of it to the cache. // (https://fetch.spec.whatwg.org/#dom-request-clone) cache.put(event.request, response.clone()); } // Return the original response object, which will be used to fulfill the resource request. return response; }); }).catch((error) => { // This catch() will handle exceptions that arise from the match() or fetch() operations. // Note that a HTTP error response (e.g. 404) will NOT trigger an exception. // It will return a normal response object that has the appropriate error code set. console.error(' Read-through caching failed:', error); throw error; }); }) ); });