React use service worker hook & Utilities ·

Get everything out of your PWA

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

Affiliate

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.

🎯 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

Usage

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 (
    <div>
      <ProvideServiceWorker fileName={'/my-sw.js'}>
        <MyComponent></MyComponent>
      </ProvideServiceWorker>
    </div>
  );
};
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.`);
  self.skipWaiting();
};
const onActivate = async evt => {
  evt.waitUntil(handleActivation());
};

const handleActivation = async () => {
  await clients.claim();

  console.log(`Service Worker ${version} activated.`);
};

main().catch(console.error);

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

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.

TypeScript

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

Continuous Integration

Contributors

Thanks goes to these wonderful people (emoji key):

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