homam/index.html

## index.html
<!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>

## offline.html
<!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>

## sw.js


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


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