0.2.6 • Published 8 years ago
chialab-sw-helpers v0.2.6
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');