├── README.md ├── service-worker.js ├── offline └── index.html └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # Offline Page 2 | 3 | A simple example of an offline page using a service worker. 4 | 5 | This offline page is self-contained, with no external dependencies. 6 | 7 | 8 | ## Online page 9 | 10 | The service worker needs installing from somewhere within the website: 11 | 12 | ``` 13 | if ("serviceWorker" in navigator) { 14 | window.addEventListener("load", function() { 15 | navigator.serviceWorker.register("./service-worker.js"); 16 | }); 17 | } 18 | ``` 19 | 20 | Set the correct path to the `service-worker.js` file. 21 | 22 | 23 | ## service-worker.js 24 | 25 | Set the path to the offline page in two places: 26 | 27 | ``` 28 | required: ["/offline/"] 29 | ... 30 | return caches.match("/offline/"); 31 | ``` 32 | 33 | 34 | ## Offline page 35 | 36 | The inline base64-encoded image can be [generated online](https://www.base64-image.de/) 37 | 38 | 39 | --- 40 | 41 | ## Maintenance and support 42 | 43 | [![No Maintenance Intended](http://unmaintained.tech/badge.svg)](http://unmaintained.tech/) 44 | 45 | --- 46 | 47 | ## License 48 | 49 | This work is free. You can redistribute it and/or modify it under the 50 | terms of the Do What The Fuck You Want To Public License, Version 2, 51 | as published by Sam Hocevar. See http://www.wtfpl.net/ for more details. 52 | 53 | ``` 54 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 55 | Version 2, December 2004 56 | 57 | Copyright (C) 2004 Sam Hocevar 58 | 59 | Everyone is permitted to copy and distribute verbatim or modified 60 | copies of this license document, and changing it is allowed as long 61 | as the name is changed. 62 | 63 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 64 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 65 | 66 | 0. You just DO WHAT THE FUCK YOU WANT TO. 67 | 68 | ``` -------------------------------------------------------------------------------- /service-worker.js: -------------------------------------------------------------------------------- 1 | /* Service worker - basic offline page */ 2 | 3 | "use strict"; 4 | 5 | var cacheName = "offline"; 6 | var cacheVersion = "v1.0.0::"; 7 | var cacheFiles = { 8 | optional: [], 9 | // change this path to wherever the offline page is located, e.g. 10 | // required: ["/offline/"] 11 | required: ["/offline-page/offline/"] 12 | }; 13 | 14 | function updateCache() { 15 | return caches.open(cacheVersion + cacheName).then(function(cache) { 16 | cache.addAll(cacheFiles.optional); 17 | return cache.addAll(cacheFiles.required); 18 | }); 19 | } 20 | 21 | function clearCache() { 22 | return caches.keys().then(function(keys) { 23 | return Promise.all( 24 | keys 25 | .filter(function(key) { 26 | return key.indexOf(cacheVersion) !== 0; 27 | }) 28 | .map(function(key) { 29 | caches.delete(key); 30 | }) 31 | ); 32 | }); 33 | } 34 | 35 | self.addEventListener("install", function(event) { 36 | event.waitUntil( 37 | updateCache().then(function() { 38 | self.skipWaiting(); 39 | }) 40 | ); 41 | }); 42 | 43 | self.addEventListener("activate", function(event) { 44 | event.waitUntil( 45 | clearCache().then(function() { 46 | self.clients.claim(); 47 | }) 48 | ); 49 | }); 50 | 51 | self.addEventListener("fetch", function(event) { 52 | var request = event.request; 53 | if (request.method !== "GET") { 54 | return; 55 | } 56 | event.respondWith( 57 | fetch(request) 58 | .then(function(response) { 59 | return response; 60 | }) 61 | .catch(function() { 62 | if (request.headers.get("Accept").indexOf("text/html") !== -1) { 63 | // change this path to wherever the offline page is located, e.g. 64 | // return caches.match("/offline/"); 65 | return caches.match("/offline-page/offline/"); 66 | } 67 | return caches.match(request).then(function(response) { 68 | return response; 69 | }); 70 | }) 71 | ); 72 | }); 73 | -------------------------------------------------------------------------------- /offline/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Offline 7 | 8 | 9 | 10 | 11 | 34 | 35 | 36 |
37 |
38 | 39 |
40 |

This site is offline

41 |

Reconnect to the internet and refresh this page to see the online page

42 |
43 |
44 |
45 | 46 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Online | [Site] 7 | 8 | 9 | 10 | 11 | 34 | 35 | 36 |
37 |
38 | 39 |
40 |

This site is online

41 |

Disconnect from the internet and refresh this page to see the offline page

42 |
43 |
44 |
45 | 46 | 65 | 66 | 67 | --------------------------------------------------------------------------------