If you travel a lot, chances are you have often experienced a lot of zero network connectivity. This is frustrating, especially if you want to view previously viewed pages. In this recipe, we will look at how we can address this issue by providing the user with the stale version from the cache.
To get started with service workers, you will need to have the service worker experiment feature turned on in your browser settings. If you have not done this yet, refer to the previous recipe: Setting up service workers. Service workers only run across HTTPS. To find out how to set up a development environment to support this feature, refer to the following recipes: Setting up GitHub pages for SSL, Setting up SSL for Windows, and Setting up SSL for Mac.
Follow these instructions to set up your file structure (or you can find the files in the provided directory, 01/05):
First, we need to create an
index.htmlfile as follows:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Stale on Error</title> </head> <body> <p>Registration status: <strong id="status"></strong></p> <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register( 'service-worker.js', { scope: './' } ).then( function(serviceWorker) { document.getElementById('status').innerHTML = 'successful'; }).catch(function(error) { document.getElementById('status').innerHTML = error; }); } else { document.getElementById('status').innerHTML = 'unavailable'; } </script> </body> </html>Create a JavaScript file called
service-worker.jsin the same folder as theindex.htmlfile with the following code:var version = 1; var cacheName = 'stale- ' + version; self.addEventListener('install', function(event) { self.skipWaiting(); }); self.addEventListener('activate', function(event) { if (self.clients && clients.claim) { clients.claim(); } }); self.addEventListener('fetch', function(event) { event.respondWith( fetch(event.request).then(function(response) { caches.open(cacheName).then(function(cache) { if(response.status >= 500) { cache.match(event.request). then(function(response) { return response; }).catch(function() { return response; }); } else { cache.put(event.request, response.clone()); return response; } }); }) ); });With your two files in place, navigate to
index.html.
When the registration is successful, we inspect the state of the registration and print it to the browser.
In the service-worker.js file, we always fetch the response from the network:
event.respondWith(
fetch(event.request).then(function(response) {If we received an error response, we return the stale version from the cache:
if(response.status >= 500) {
cache.match(event.request).
then(function(response) {
// Return stale version from cache
return response;
})If we can't find the stale version, we return the network response, which is the error:
}).catch(function() {
return response;
});If the response was successful (response code 200), we update the cached version:
} else {
cache.put(event.request, response.clone());
return response;
}The put() method of the cache interface allows key/value pairs to be added to the current cache object. The put() method also overrides any key/value pair previously stored in the cache that matches the request:
fetch(url).then(function (response) {
return cache.put(url, response);
});