@sifrr/serviceworker

v0.0.9

Published

2 years ago

Service Worker with customizations.

Downloads

0High
0Medium
0Low

aadityataparia

sifrr service worker sw

sifrr-serviceworker ·

Customizable Service Worker.

Size

How to use

Directly in Browser using standalone distribution

Copy contents of sifrr.serviceworker.min.js or sifrr.serviceworker.js in your serviceworker file. And add this at the end of file.

const sw = new Sifrr.ServiceWorker(/* config */);
sw.setup(); // setup service worker caching
sw.setupPushNotification(defaultTitle, defaultOptions); // to setup push event listener

Browser API support needed for

Using npm

Do npm i @sifrr/serviceworker or yarn add @sifrr/serviceworker or add the package to your package.json file.

example of sw.js to be bundled (compatible with webpack/rollup/etc):

Commonjs

const SW = require('@sifrr/serviceworker');
const sw = new SW(/* config */);
sw.setup(); // setup service worker caching
sw.setupPushNotification(defaultTitle, defaultOptions); // to setup push event listener
module.exports = sw;

Example here

ES modules

import SW from '@sifrr/serviceworker';
const sw = new SW(/* config */);
sw.setup(); // setup service worker caching
sw.setupPushNotification(defaultTitle, defaultOptions); // to setup push event listener
export default sw;

then in your main js file add:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('sw.bundled.js').then(
      function(registration) {
        // Registration was successful
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
      },
      function(err) {
        // registration failed :(
        console.log('ServiceWorker registration failed: ', err);
      }
    );
  });
}

Config

Default config:

{
  version: 1,
  fallbackCacheName: 'fallbacks',
  defaultCacheName: 'default',
  policies: {
    'default': {
      policy: 'NETWORK_FIRST',
      cacheName: 'default'
    }
  },
  fallbacks: {},
  precacheUrls: []
}

version: integer Version of service worker, when you change service worker version old versions' caches will be deleted. All caches are suffixed with -v${version}.
fallbackCacheName: string Name of cache storage for fallbacks.
defaultCacheName: string Default name of cache storage to be used.
policies:

{
  'regex string': {
    policy: 'Name of policy', // default: 'NETWORK_FIRST'
    cacheName: 'Name of cache storage' // default: options.defaultCacheName
  }
}

When a request is sent, if the url matches the regex string then it will be fetched using policy and storaged in cacheName cache storage. The policy with 'default' will be used for urls not matching any regex. Note: Even though regex string is treated as regex, it should be given as a string, eg. '*.js'

fallbacks: { 'regex string': 'file url' } If request's url matches regex string (same as policies), then fallback for that url will be file from file url if request is not completed due to no connection, not found, etc. 'default' fallback will be used if no regex matches the url given.
precacheUrls: array of string Urls to be precached.

Policies

NETWORK_ONLY: Only resolve request from network.
NETWORK_FIRST: Try to resolve request from network, if fails then resolve from cache.
CACHE_ONLY: Only to resolve request from cache.
CACHE_FIRST: Try to resolve request from cache, if fails then resolve from network.
CACHE_AND_UPDATE: Send response from cache if available and then updates cache with new network response.

Push Notification

Setup push notification listener in serviceworker using sw.setupPushNotification(defaultTitle, defaultOptions, onNotificationClick), where defaultTitle is default push notification title, defaultOptions are default push notification options and onNotificationClick is fxn that will be executed when user clicks on notification.
In your main JS file use serviceWorkerRegistration object to handle pushNotifications. Simple Example:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('sw.bundled.js').then(
      function(registration) {
        // `registration` is serviceWorkerRegistration object
        // SW registration was successful
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
        registration.pushManager
          .subscribe({
            userVisibleOnly: true,
            applicationServerKey: Uint8ArrayFromPushNotificationServerPublicKey
          })
          .then(function(subscription) {
            // Subscription was successful
            console.log('User is subscribed.');
          })
          .catch(function(err) {
            // Subscription failed
            console.log('Failed to subscribe the user: ', err);
          });
      },
      function(err) {
        // SW registration failed
        console.log('ServiceWorker registration failed: ', err);
      }
    );
  });
}

Send payload from server as a JSON string with title and other options. Example:

{
  "title": "You app name",
  "body": "Notification Body",
  "actions": [
    { "action": "yes", "title": "Yes", "icon": "images/yes.png" },
    { "action": "no", "title": "No", "icon": "images/no.png" }
  ],
  ...
}

More manual configuring

In your sw file

const sw = new SW(/* config */);

// this method will be called when new service worker is available to install
sw.onInstall = () => self.skipWaiting();

// this method will be called when a notification is clicked
sw.onNotificationClick = (event) => event.notification.close();

// You can add methods on self if you need
self.addEventListener(...);