register-service-worker

What is register-service-worker?

The register-service-worker npm package is a utility for registering service workers in web applications. It simplifies the process of setting up service workers, handling updates, and managing the service worker lifecycle events.

What are register-service-worker's main functionalities?

Basic Service Worker Registration

This feature allows you to register a service worker with various lifecycle hooks such as ready, registered, cached, updatefound, updated, offline, and error. These hooks provide callbacks for different stages of the service worker's lifecycle.

import { register } from 'register-service-worker';

register('/service-worker.js', {
  ready() {
    console.log('Service worker is active.');
  },
  registered() {
    console.log('Service worker has been registered.');
  },
  cached() {
    console.log('Content has been cached for offline use.');
  },
  updatefound() {
    console.log('New content is downloading.');
  },
  updated() {
    console.log('New content is available; please refresh.');
  },
  offline() {
    console.log('No internet connection found. App is running in offline mode.');
  },
  error(error) {
    console.error('Error during service worker registration:', error);
  }
});

Custom Service Worker Path

This feature allows you to specify a custom path for your service worker file. It provides the same lifecycle hooks as the basic registration but uses a different service worker script.

import { register } from 'register-service-worker';

register('/custom-service-worker.js', {
  ready() {
    console.log('Custom service worker is active.');
  },
  registered() {
    console.log('Custom service worker has been registered.');
  },
  cached() {
    console.log('Custom content has been cached for offline use.');
  },
  updatefound() {
    console.log('New custom content is downloading.');
  },
  updated() {
    console.log('New custom content is available; please refresh.');
  },
  offline() {
    console.log('No internet connection found. Custom app is running in offline mode.');
  },
  error(error) {
    console.error('Error during custom service worker registration:', error);
  }
});

Other packages similar to register-service-worker

workbox-webpack-plugin

The workbox-webpack-plugin is a plugin for webpack that generates a service worker using Workbox. It provides more advanced features like precaching, runtime caching, and strategies for handling different types of requests. Compared to register-service-worker, it offers more comprehensive service worker management and is more suitable for complex applications.

sw-precache

The sw-precache package is a tool for generating a service worker that precaches resources. It is similar to register-service-worker in that it simplifies the process of setting up a service worker, but it focuses more on precaching and less on lifecycle event handling. It is a good choice for applications that need robust caching strategies.

serviceworker-webpack-plugin

The serviceworker-webpack-plugin is another webpack plugin that simplifies the creation and registration of service workers. It allows you to write your service worker code in a modular way and integrates well with the webpack build process. Compared to register-service-worker, it offers more flexibility in how the service worker is written and managed.

README

register-service-worker

A script to simplify service worker registration with hooks for common events.

Usage

Note: this script uses ES modules export and is expected to be used with a client side bundler that can handle ES modules syntax.

import { register } from 'register-service-worker'

register('/service-worker.js', {
  registrationOptions: { scope: './' },
  ready (registration) {
    console.log('Service worker is active.')
  },
  registered (registration) {
    console.log('Service worker has been registered.')
  },
  cached (registration) {
    console.log('Content has been cached for offline use.')
  },
  updatefound (registration) {
    console.log('New content is downloading.')
  },
  updated (registration) {
    console.log('New content is available; please refresh.')
  },
  offline () {
    console.log('No internet connection found. App is running in offline mode.')
  },
  error (error) {
    console.error('Error during service worker registration:', error)
  }
})

The ready, registered, cached, updatefound and updated events passes a ServiceWorkerRegistration instance in their arguments.

The registrationOptions object will be passed as the second argument to ServiceWorkerContainer.register()

Changelog

1.7.2 (2020-12-10)

Bug Fixes

• catch serviceWorker.ready Promise rejections (#46) (563fa94), closes #45

<a name="1.7.1"></a>