Service Worker Experiment

index.js

(function (window) {
    'use strict';

    // Uncomment after getting https server to work on windows or finally have a Linux environment
    // if ((!location.port || location.port === "8080") && location.protocol !== 'https:') {
    //     location.protocol = 'https:';
    // }

    /*console.log('location protocol: %s', location.protocol);
    console.log('location port: %s', location.port);*/

    if (navigator.serviceWorker) {
        window.addEventListener('load', function () {

            navigator.serviceWorker.register('/worker.js', {scope: '/'})
                .then(function (registration) {
                    console.info('> [ServiceWorker] registration successful with scope: ', registration.scope);

                    document.querySelector('#status').textContent = '[ServiceWorker] registration successful with scope: ' + registration.scope;

                }).catch(function (err) {
                    console.error('> [ServiceWorker] registration failed: ', err);
                    document.querySelector('#status').textContent = err;
                });
        });
    }

}(this));

manifest.json

{
  "name": "Inner Mind Consulting",
  "short_name": "InnerMind",
  "scope": "/",
  "icons": [{
    "src": "/app/img/favicon.ico",
    "sizes": "64x64",
    "type": "image/x-icon"
  }],
  "display": "standalone",
  "start_url": "/"
}

worker.js

/*global self fetch Promise URL*/

(function (self) {
    'use strict';

    var caches = self.caches,
        VERSION = '0.0.1',
        INNERMIND_CACHE = 'innermindco.com-cache-v' + VERSION,

        urlsToCache = [
            '/',
            '/index.js',
            '/lib/fetch/fetch.js',
            '/app/img/favicon.ico',
            '/app/css/reset.css',
            '/app/css/app.css',
            '/offline.html'
        ];

    var preCache = function (CACHE) {
        return caches.open(CACHE).then(function (cache) {
            return cache.addAll(urlsToCache);
        });
    };

    self.addEventListener('install', function (event) {

        console.log('> [ServiceWorker] Installing ' + INNERMIND_CACHE);

        event.waitUntil(preCache(INNERMIND_CACHE));
    });

    var fromNetwork = function (request, timeout) {
        return new Promise(function (resolve, reject) {
            var timeoutId = setTimeout(reject, timeout);

            fetch(request).then(function (response) {
                clearTimeout(timeoutId);
                resolve(response);
            }, reject);
        });
    };

    var fromCache = function (request) {
        return caches.open(INNERMIND_CACHE).then(function (cache) {
            return cache.match(request).then(function (match) {
                return match || Promise.reject('No Match Found: ' + match);
            });
        });
    };

    // Doesn't work for some reason?
    /*var networkOrCache = function (request, timeout) {
        return fromNetwork(request, timeout).then(function (response) {
            return response.ok
                ? response
                : fromCache(request);

        }).catch(function (err) {
            if (err) {
                console.log(err);
            }
            return fromCache(request);
        });
    };*/

    /*var update = function (request) {
        return caches.open(INNERMIND_CACHE).then(function (cache) {
            return fetch(request).then(function (response) {
                return cache.put(request, response);
            });
        });
    };*/

    self.addEventListener('fetch', function (event) {

        event.respondWith(fromNetwork(event.request, 400).catch(function () {
            return fromCache(event.request);
        }));

        //event.waitUntil(update(event.request)); // needs new request object? bitches about reusing request object
    });

    self.addEventListener('activate', function (event) {

        console.log('> [ServiceWorker] Activating ' + INNERMIND_CACHE);

        var cacheWhitelist = [INNERMIND_CACHE];

        event.waitUntil(caches.keys()
            .then(function (cacheNames) {
                return Promise.all(cacheNames.map(function (cacheName) {
                    if (cacheWhitelist.indexOf(cacheName) === -1) {
                        console.log('> [ServiceWorker] Deleting out of date cache:', cacheName);

                        return caches.delete(cacheName);
                    }
                }));
            }));
    });

}(this));