1. register-service-worker
Script for registering service worker, with hooks
register-service-worker
Package: register-service-worker
Created by: yyx990803
Last modified: Sun, 15 May 2022 17:07:35 GMT
Version: 1.7.2
License: MIT
Downloads: 790,085
Repository: https://github.com/yyx990803/register-service-worker

Install

npm install register-service-worker
yarn add register-service-worker

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()

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin