FAUSheppy

if ('serviceWorker' in navigator) { //check if browser supports service workers first
	window.addEventListener('load', function() {
		navigator.serviceWorker.register('/js/service-worker.js')
	})
}

FAUSheppy

self.addEventListener('install', (event) => console.log("SW installed"))

FAUSheppy

/* fetch from network */
function fromNetwork(request, timeout) {
	return new Promise( (fulfill, reject) =>
			
	/* set a timeout */
	var timeoutId = setTimeout(reject, timeout);
			
	/* with the cache open, make the request */
	caches.open("A_NAME_FOR_THIS_CACHE").then( (cache) =>
		fetch(request).then( (response) =>

FAUSheppy

/* fetch from cache */
function fromCache(request) {

	/* define a message when the request to cache failed */
	const cacheRequestFailed = new Response("Request to sw-cache failed", { "status" : 408 })
    
	/* open cache */
	return caches.open("A_NAME_FOR_THIS_CACHE").then( (cache) =>
			
		/* try to find the request in the cache */

FAUSheppy

self.addEventListener('fetch', (event) =>
	const timeout = 2000
	/* call "fromNetwork" and call "fromCache" in it's error handler */
	/* if "fromCache" also fails it returns a 408 response/javascript error */
	event.respondWith(fromNetwork(event.request, timeout).catch(() => { return fromCache(event.request) }))
)

FAUSheppy

function prefetchStuff(){
		
	/* URLs to to prefetch, note the '/' to fetch the home page aswell you */
	/* should add the current page instead if your '/'-location is a redirect */
	urls = [ "/", "/stuff", "/morestuff", "/lol" ]
	urls.forEach(url => {
			
		/* similar opening cache and fetching as before */
		caches.open("A_NAME_FOR_THIS_CACHE").then( (cache) =>
			fetch(url).then( (responseForPrecache) =>

FAUSheppy

function prefetchStuffDynamic(){
	/* fetch the prefetch information location */
	fetch("/prefetch-info").then( (response) =>
		response.json().then( (data) => {
			/* from here it's the same as before */
			data.forEach(url =>
				caches.open("A_NAME_FOR_THIS_CACHE").then((cache) => 
					fetch(url).then((responseForPrecache) => 
						cache.put(url, responseForPrecache.clone())
					)

FAUSheppy

function updateOnlineStatus(){
	if(navigator.onLine){
		document.getElementById("offline-indicator").style.display = "none"
	}else{
		document.getElementById("offline-indicator").style.display = "block"
	}
}

FAUSheppy

setInterval(() => prefetchStuffDynamic, 10000)

FAUSheppy

window.addEventListener("offline", updateOnlineStatus);
window.addEventListener("online", updateOnlineStatus);