Adding Service worker to Jekyll Site

I finally added the service worker for my Jekyll site madhur.co.in.

For introduction, Service workers enable rich offline experiences, periodic background syncs and push notifications.

For start, I have just implemented offline caching of JS/CSS/HTML files so that the site can be browsed even when offline.

Here is the simplest definition of a service worker which generates the Url of pages so that they can be cached

---
layout: null
---


var cacheName = 'madhur-cache-v1';
var filesToCache = [
    // Stylesheets
    // Pages and assets
    {% for page in site.html_pages %}
        {% if page.url contains 'projects' or page.url contains '404'   %}
            
        {% else %}
            '{{ page.url }}',
        {% endif %}
        
    {% endfor %}

    // Blog posts
    {% for post in site.posts %}
        '{{ post.url }}',
    {% endfor %}

    // JS files, Portfolio assets and main video
    // (!) This will throw a Liquid error. Read below.
    {% for file in site.static_files %}
        {% if file.extname == '.js' or file.path contains '/portfolio/screenshots' or file.path contains '/portfolio/thumbnails' %}
              '{{ file.path }}',
        {% endif %}
    {% endfor %}
];


// serviceWorker.js
self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open(cacheName).then(function(cache) {
            return cache.addAll(filesToCache);
        })
    );
});

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request)
            .then(function(response) {
                if (response) {
                    console.log('[*] Serving cached: ' + event.request.url);
                    return response;
                }

                console.log('[*] Fetching: ' + event.request.url);
                return fetch(event.request);
            }
        )
    );
});

The generated file can be seen at http://www.madhur.co.in/serviceWorker.js

In current implementation, the service worker will always return the response from the cache if one exists. However, there are lot of strategies which can be implemented for example:

  • Cache Only
  • Network only
  • Cache First
  • Network First
  • Fastest

These and many other such patterns are documented in offline cookbook

These patterns can be easy implemented using sw-toolbox