Simple Service Worker Example

by nlindblad

HTML

<div style="max-width: 700px; margin: 0 auto 0 auto;">
    <button id="swinstall">Install Service Worker</button>
    <button id="swuninstall">Uninstall Service Worker</button>
    <button id="loadimage">Load image</button>
    <div id="js-log" style="height: 400px; overflow: scroll; color: white; background: black; font-family: monospace; line-height: 150%; font-size: 12px; padding: 7px;"></div>
    
    <div id="images">
    
    </div>
</div>

JavaScript

window.addEventListener('message', function () {
    debugger;
});

function log() {
    var el = document.createElement('div');
    el.innerHTML = Array.prototype.join.call(arguments, '<br />');
        document.getElementById('js-log').appendChild(el);
}

document.getElementById('loadimage').addEventListener('click', function() {
		//var el = document.createElement('img');
    //el.src = 'https://api.mapbox.com/v4/mapbox.terrain-rgb/2/2/1.pngraw?access_token=pk.eyJ1IjoibmxpbmRibGFkIiwiYSI6ImNqMTZqaW1kNDAwMmYycXBwMm9hb3E5M2wifQ.RaJ7VgNPMGZzI7vlzZYztw';
    //el.src = 'https://jsfiddle.net/img/logo.png';
    //document.getElementById('images').appendChild(el);
    fetch('https://api.mapbox.com/v4/mapbox.terrain-rgb/2/2/1.pngraw?access_token=pk.eyJ1IjoibmxpbmRibGFkIiwiYSI6ImNqMTZqaW1kNDAwMmYycXBwMm9hb3E5M2wifQ.RaJ7VgNPMGZzI7vlzZYztw')
});

var register = null;

if (navigator.serviceWorker) {
    log("Browser supports Service Worker");
    if (navigator.serviceWorker.current) {
        log("Current Service Worker state: \\o/");
        log('Go to chrome://serviceworker-internals/ or about:serviceworkers to see Service Worker debug output');
    } else {
        log("No Service Worker active...");
    }

    document.getElementById('swinstall').addEventListener('click', function () {
        log('About to try to install a Service Worker');
        navigator.serviceWorker.register('/nlindblad/6amug81e/show_js/', {
            scope: '/'
        })
            .then(function (serviceWorker) {
            register = serviceWorker;
            log('Successfully installed ServiceWorker');
        log('Go to chrome://serviceworker-internals/ or about:serviceworkers to see Service Worker debug output');
            serviceWorker.addEventListener('statechange', function (event) {
                log("Worker state is now " + event.target.state);
            });
        }, function (why) {
            log('Failed to install:' + why);
        });
    });
    ...