chialab-sw-helpers v0.2.5

SW Helpers

A set of helpers for Service Workers use.

Install

$ npm i chialab-sw-helpers --save

$ bower i chialab-sw-helpers --save

Samples

use RegisterHelper for Service Worker scripts registration:

// app.js
let registration = new SWHelpers.Register('service-worker.js');
registration.register()
    .then(() => {
        console.log('Well done!');
    })
    .catch(() => {
        console.log('Something went wrong.');
    });

Use StaticCache to handle precaching and offline navigation:

// service-worker.js
(global => {
    'use strict';

    global.importScripts('/node_modules/sw-toolbox/build/sw-toolbox.js');
    global.importScripts('/node_modules/chialab-sw-helpers/src/service-workers/static-cache.js');

    const FALLBACK_URL = 'https://my.sample.site/index.html';

    let sc = new global.StaticCache(FALLBACK_URL, [
        'index.html',
        'manifest.json',
        'index.css',
        'index.js',
        'system.conf.js',
        /images\/.*/,
        /node_modules\/.*/,
    ]);
})(self);

Use DynamicCache and CacheHelper for dynamically add contents to cache:

// service-worker.js
(global => {
    'use strict';

    global.importScripts('/node_modules/sw-toolbox/build/sw-toolbox.js');
    global.importScripts('/node_modules/chialab-sw-helpers/src/service-workers/dynamic-cache.js');

    let dc = new global.DynamicCache();
})(self);

// app.js
let registration = new SWHelpers.Register('service-worker.js');
registration.register();
let cache = new SWHelpers.Cache(registration);
// cache bootstrap cdn
cache.add('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
cache.add('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js');