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');
    }
});

Yeah, use the polyfills in Topika. They're iDB backed, but work pretty well. The cache implementation in Canary is really incomplete, and the spec is in flux at the moment. Basically, if it doesn't have a yellow light on https://jakearchibald.github.io/isserviceworkerready/#caches, treat it as probably broken.

Great to hear you're having a play with this stuff. Btw, I'm hoping to prototype an offline-first version of Tweetdeck later in this quarter. If it's something you're interested in putting spare time into, let me know!

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.