Lab: Offline Status

From: Offline Recipes for Service Workers

Instructions: After this page loads, disconnect from the Internet, then click the Show Another Random Logo button. The image below the buttons should change to one of six random logos. That is because, after the page loaded, a Service Worker downloaded and cached all the assets that this page needs. These assets can now be used offline, and to help the page load faster even when online!

Notes: I found two inconsistencies in the original tutorial that gave me bugs to find and correct. Both appear in the service-worker.js file:

1. When creating the REQUIRED_FILES variable, you can just use relative URLs like 'app.js', but if you just use '/', it will cache the absolute root document, not the relative root. For example, for this demo, it cached https://aarontgrogg.com/, not https://aarontgrogg.com/lab/service-workers/offline-status/, which is what I wanted. So I used the full relative URL for each of my assets, like '/lab/service-workers/offline-status/'.
2. In the fetch listener, the caches.match receives the event.request, but what it really needs is the event.request.url.