markvanwijnen/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web Application</title>
</head>
<body>

<div id="update-banner" data-state="noupdate">
    <div class="content">
        <div class="headline">No update available</div>
        <div class="subhead">Waiting for an update to become available</div>
    </div>
</div>

<style>
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    background: #221E34;
}

#update-banner {
    color: #FFFFFF;
    background: #2A263C;
}

#update-banner .content {
    margin: 0 auto;
    max-width: 980px;
    padding: 20px;
}

#update-banner .headline {
    font-weight: 800;
    font-size: 15px;
}

#update-banner .subhead {
    font-size: 13px;
}

#update-banner[data-state="updateavailable"] {
    cursor: pointer;
    background: #26AE60;
}
</style>

<script>
// Check for Service Worker support
if ('serviceWorker' in navigator) {

    // The UI that will be presented when an update is found
    var presentUpdateAvailable = serviceWorker => {
        document.getElementById('update-banner').dataset.state = 'updateavailable';
        document.querySelector('#update-banner .headline').innerHTML = 'Update available';
        document.querySelector('#update-banner .subhead').innerHTML = 'Click here to update the app to the latest version';
        document.getElementById('update-banner').addEventListener('click', clickEvent => {
            serviceWorker.postMessage('skipWaiting');
        });
    }

    // Register our service worker
    navigator.serviceWorker.register('service-worker.js')
    .then(registration => {

        // Present the update available UI if there is already an update waiting
        if (registration.waiting) presentUpdateAvailable(registration.waiting);

        // We wait for an UpdateFoundEvent, which is fired anytime a new service worker is acquired
        registration.onupdatefound = updatefoundevent => {

            // Ignore the event if this is our first service worker and thus not an update
            if (!registration.active) return;

            // Listen for any state changes on the new service worker
            registration.installing.addEventListener('statechange', statechangeevent => {

                // Wait for the service worker to enter the installed state (aka waiting)
                if (statechangeevent.target.state !== 'installed') return;

                // Present the update available UI
                presentUpdateAvailable(registration.waiting);
            });
        };

        // We wait for a ControllerEvent, which is fired when the document acquires a new service worker
        navigator.serviceWorker.addEventListener('controllerchange', controllerchangeevent => {

            // We delay our code until the new service worker is activated
            controllerchangeevent.target.ready.then(registration => {

                // Reload the window
                if (!window.isReloading) {
                    window.isReloading = true;
                    window.location.reload();
                }

            });
        });
    });
}
</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>My Web Application</title>
	</head>
	<body>

	<div id="update-banner" data-state="noupdate">
	<div class="content">
	<div class="headline">No update available</div>
	<div class="subhead">Waiting for an update to become available</div>
	</div>
	</div>

	<style>
	body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
	background: #221E34;
	}

	#update-banner {
	color: #FFFFFF;
	background: #2A263C;
	}

	#update-banner .content {
	margin: 0 auto;
	max-width: 980px;
	padding: 20px;
	}

	#update-banner .headline {
	font-weight: 800;
	font-size: 15px;
	}

	#update-banner .subhead {
	font-size: 13px;
	}

	#update-banner[data-state="updateavailable"] {
	cursor: pointer;
	background: #26AE60;
	}
	</style>

	<script>
	// Check for Service Worker support
	if ('serviceWorker' in navigator) {

	// The UI that will be presented when an update is found
	var presentUpdateAvailable = serviceWorker => {
	document.getElementById('update-banner').dataset.state = 'updateavailable';
	document.querySelector('#update-banner .headline').innerHTML = 'Update available';
	document.querySelector('#update-banner .subhead').innerHTML = 'Click here to update the app to the latest version';
	document.getElementById('update-banner').addEventListener('click', clickEvent => {
	serviceWorker.postMessage('skipWaiting');
	});
	}

	// Register our service worker
	navigator.serviceWorker.register('service-worker.js')
	.then(registration => {

	// Present the update available UI if there is already an update waiting
	if (registration.waiting) presentUpdateAvailable(registration.waiting);

	// We wait for an UpdateFoundEvent, which is fired anytime a new service worker is acquired
	registration.onupdatefound = updatefoundevent => {

	// Ignore the event if this is our first service worker and thus not an update
	if (!registration.active) return;

	// Listen for any state changes on the new service worker
	registration.installing.addEventListener('statechange', statechangeevent => {

	// Wait for the service worker to enter the installed state (aka waiting)
	if (statechangeevent.target.state !== 'installed') return;

	// Present the update available UI
	presentUpdateAvailable(registration.waiting);
	});
	};

	// We wait for a ControllerEvent, which is fired when the document acquires a new service worker
	navigator.serviceWorker.addEventListener('controllerchange', controllerchangeevent => {

	// We delay our code until the new service worker is activated
	controllerchangeevent.target.ready.then(registration => {

	// Reload the window
	if (!window.isReloading) {
	window.isReloading = true;
	window.location.reload();
	}

	});
	});
	});
	}
	</script>

	</body>
	</html>