Created
September 16, 2016 14:31
-
-
Save homam/d4c9100abead7c97ffab4f7d4c94b26b to your computer and use it in GitHub Desktop.
service workers offline page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang=en-GB> | |
| <head> | |
| <meta charset='utf-8'> | |
| <title>The Air Horner</title> | |
| <meta name='viewport' content='width=device-width, initial-scale=1'> | |
| </head> | |
| <body> | |
| <iframe style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width:100%; height: 100%" | |
| src="http://tv-app-web-map.herokuapp.com/" | |
| ></iframe> | |
| <script type="text/javascript"> | |
| if(!navigator.onLine) { | |
| window.location.href = 'offline.html' | |
| } else { | |
| // if resource is not cached by sw.js | |
| // fetch('offline.html').then(x => console.log('got offline', x)) | |
| } | |
| window.addEventListener("offline", function() { | |
| window.location.href = 'offline.html' | |
| }, false); | |
| </script> | |
| <script> | |
| if('serviceWorker' in navigator) { | |
| navigator.serviceWorker.register('/sw.js', { scope: '/' }) | |
| .then(function(registration) { | |
| console.log('Service Worker Registered'); | |
| }); | |
| navigator.serviceWorker.ready.then(function(registration) { | |
| console.log('Service Worker Ready'); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang=en-GB> | |
| <head> | |
| <meta charset='utf-8'> | |
| <title>The Air Horner</title> | |
| </head> | |
| <body> | |
| bluh 40 :) ;; hello there | |
| <img src="http://statics.suitsupply.com/images/products/Jackets/large/Jackets_Green_Plain_Havana_C993_Suitsupply_Online_Store_1.jpg" /> | |
| <script type="text/javascript"> | |
| if(navigator.onLine) { | |
| window.location.href = './index.html' | |
| } | |
| window.addEventListener("online", function() { | |
| window.location.href = './index.html' | |
| }, false); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Version 0.54 | |
| const version = 40 | |
| const cacheName = version + '' | |
| const urlsToCacheKeys = new Set([ | |
| '/offline.html', | |
| 'http://statics.suitsupply.com/images/products/Jackets/large/Jackets_Green_Plain_Havana_C993_Suitsupply_Online_Store_1.jpg' | |
| ].map(u => new URL(u, self.location).href)) | |
| self.addEventListener('install', e => { | |
| console.log('% install') | |
| e.waitUntil( | |
| caches.open(cacheName).then(cache => { | |
| return cache.addAll(Array.from(urlsToCacheKeys)) | |
| .then(() => self.skipWaiting()); | |
| }) | |
| ) | |
| }); | |
| self.addEventListener('activate', event => { | |
| console.log('% activate') | |
| // event.waitUntil(self.clients.claim()); | |
| event.waitUntil( | |
| caches.keys().then(function(keyList) { | |
| return Promise.all(keyList.map(function(key) { | |
| if ([cacheName].indexOf(key) === -1) { | |
| console.log('# deleting', key) | |
| return caches.delete(key); | |
| } | |
| })); | |
| }) | |
| ); | |
| }); | |
| const cacheAResponse = (event, cache, response, log) => { | |
| if(urlsToCacheKeys.has(event.request.url)) { // remove the condition to cache everything! | |
| console.log(log, event.request.url); | |
| cache.put(event.request, response.clone()); | |
| } | |
| return response; | |
| } | |
| const cacheARequest = event => event.respondWith( | |
| caches.open(cacheName).then(cache => | |
| fetch(event.request.clone()).then(response => | |
| cacheAResponse(event, cache, response, '* cached ') | |
| ) | |
| ) | |
| ); | |
| const tryServingFromCache = event => event.respondWith( | |
| caches.open(cacheName).then(cache => | |
| cache.match(event.request).then(resp => { | |
| if(!!resp) { | |
| console.log('> from cache', event.request.url) | |
| } | |
| return resp || fetch(event.request).then(response => | |
| cacheAResponse(event, cache, response, '$ cached ') | |
| ) | |
| }) | |
| ) | |
| ); | |
| self.addEventListener('fetch', event => { | |
| if(navigator.onLine) { | |
| cacheARequest(event) | |
| } else { | |
| tryServingFromCache(event) | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Start http-server:
http-server . -p 8080 -c-1(no cache)docs:
https://github.com/w3c/ServiceWorker/blob/master/explainer.md
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
https://ole.michelsen.dk/blog/making-an-offline-webapp-with-service-workers.html
https://googlechrome.github.io/samples/service-worker/custom-offline-page/