Simple ServiceWorker for Guardian hackday

worker.js

console.log("Worker startup");

this.oninstall = function(event) {

    console.log('Worker install');

    event.waitUntil(
        caches.create('static').then(function(cache) {
            return cache.add(
                //Templates
                '/assets/offline/offline-list.html',

                //Assets
                '/assets/images/global/sprite.png',
                '/assets/stylesheets/head.default.css',
                '/assets/stylesheets/global.css'
            );
        }).catch(function(err){
            console.log('Worker install failed');
            console.log(err);
        })
    );
};

this.onactivate = function(event) {
    console.log("Worker activate");
    console.log('worker caches:', caches);
};

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

    console.log('fetch:', event.request.url);
    console.log('network state:', navigator.connection.type);

    //If agent is offline
    if(navigator.connection.type === "none") {

        //If request is a static asset get from cache
        if(/^\/assets\//.test(event.request.url)){
            return caches.match(event.request).catch(function() {
                event.default();
            });
        }

        //All others return fallback template
        return caches.match('/assets/offline/offline-list.html');
    }
});

I managed to get the cache semi working without the polyfill using this:

this.oninstall = function(event) {

    console.log('Worker install');

    event.waitUntil(
        caches.create('static').then(function() {
            return caches.get('static').then(function(cache) {
                console.log(cache);

                var resourceUrls = [
                    'http://localhost:9000/assets/offline/offline-list.html',
                    'http://localhost:9000/assets/images/global/sprite.png',
                    'http://localhost:9000/assets/stylesheets/head.default.css',
                    'http://localhost:9000/assets/stylesheets/global.css'
                ];

                return Promise.all(resourceUrls.map(function(url) {
                    return cache.add(new Request(url));
                }));

            }).catch(function(err){
                console.log('Cache install failed');
                console.log(err);
            });
        }).catch(function(err){
            console.log('Worker install failed');
            console.log(err);
        })
    );
};

But will look into the polyfill now as you suggest. Was also slightly confused why the isServiceWorkerReady page had no yellow light yet the caches object was still available. But understandable seeing as the spec is still changing.

I've been meaning to play with it all and get my head around it for the last couple of months, so very happy to be finally do it. So yes playing with TweetDeck too will be fun.

I'll let you know how I get on, and will video the final result.