TypeScript icon, indicating that this package has built-in type declarations

0.2.1 • Public • Published

React use service worker hook & Utilities ·

Get everything out of your PWA

This is a React Hook which can register a service worker.


If you like to support my OSS work you could "buy me a coffee" or want to take a look on tools I recommend you could checkout.

Buy Me A Coffee
Buy me a coffee

My personal patreon
Buy Me A Coffee

A super useful App when developing for different screens

🎯 Objective

Make it easier to target low-end devices while progressively adding high-end-only features on top. Using these hooks and utilities can help you give users a great experience best suited to their device and network constraints.

🚀 Installation

npm i react-hook-use-service-worker --save or yarn add react-hook-use-service-worker


You can import the hook and use the hook like that

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { useServiceWorker, ProvideServiceWorker } from '../.';
const MyComponent = () => {
  const mySW = useServiceWorker();
  return <div>current service worker status: {mySW.serviceWorkerStatus}</div>;
const App = () => {
  return (
      <ProvideServiceWorker fileName={'/my-sw.js'}>
export default App;

and your service worker file e.g. /my-sw.js. Make sure you host your service worker in the root folder of your project.

// my-sw.js
const version = 'my-sw 1';
const main = async () => {
  console.log(`Service Worker ${version} is starting ...`);
const onInstall = async evt => {
  console.log(`Service Worker ${version} installed.`);
const onActivate = async evt => {
const handleActivation = async () => {
  await clients.claim();
  console.log(`Service Worker ${version} activated.`);
self.addEventListener('install', onInstall);
self.addEventListener('activate', onActivate);

Contribute and Commands

The recommended workflow is to run TSDX in one terminal:

npm start # or yarn start 

This builds to /dist and runs the project in watch mode so any edits you save inside src causes a rebuild to /dist.

Then run the example inside another:

cd example
npm i # or yarn to install dependencies 
npm start # or yarn start 

The default example imports and live reloads whatever is in /dist, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. No symlinking required, we use Parcel's aliasing.

To do a one-off build, use npm run build or yarn build.

To run tests, use npm test or yarn test.


Jest tests are set up to run with npm test or yarn test. This runs the test watcher (Jest) in an interactive mode. By default, runs tests related to files changed since the last commit.


tsconfig.json is set up to interpret dom and esnext types, as well as react for jsx. Adjust according to your needs.

Continuous Integration


Thanks goes to these wonderful people (emoji key):

Jacob Cofman
Jacob Cofman


This project follows the all-contributors specification. Contributions of any kind welcome!




DownloadsWeekly Downloads






Unpacked Size

53.3 kB

Total Files


Last publish


  • jcofman