破解版捕鱼游戏大全免费下载

書名： Service Worker Development Cookbook
作者名： Sean Amarasinghe
本章字數： 450字
更新時間： 2021-07-14 10:05:20

Providing a stale version on error

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.

Getting ready

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.

How to do it...

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.html file 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.js in the same folder as the index.html file 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.

How it works...

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;
}

There's more...

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);
});

官术网_书友最值得收藏!

Service Worker Development Cookbook

Providing a stale version on error

Getting ready

How to do it...

How it works...

There's more...