Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/JCofman/react-hook-use-service-worker
A react hook to register a service worker
https://github.com/JCofman/react-hook-use-service-worker
react service-worker
Last synced: about 1 month ago
JSON representation
A react hook to register a service worker
- Host: GitHub
- URL: https://github.com/JCofman/react-hook-use-service-worker
- Owner: JCofman
- License: mit
- Created: 2020-02-22T12:07:55.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-08-09T18:15:45.000Z (over 1 year ago)
- Last Synced: 2024-07-31T07:15:53.224Z (4 months ago)
- Topics: react, service-worker
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-hook-use-service-worker
- Size: 2.63 MB
- Stars: 15
- Watchers: 2
- Forks: 6
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-react-hooks - `useServiceWorker`
- awesome-react-hooks-cn - `useServiceWorker`
- awesome-react-hooks - `useServiceWorker`
- awesome-react-hooks - `useServiceWorker`
README
# React use service worker hook & Utilities ·
[](#contributors-)
> Get everything out of your PWA
This is a [React Hook](https://reactjs.org/docs/hooks-overview.html) which can register a service worker.
**Table of Contents** _generated with [DocToc](https://github.com/thlorenz/doctoc)_
- [React use service worker hook & Utilities ·](#react-use-service-worker-hook-amp-utilities-middot)
- [Affiliate](#affiliate)
- [🎯 Objective](#-objective)
- [🚀 Installation](#-installation)
- [Usage](#usage)
- [Contribute and Commands](#contribute-and-commands)
- [Jest](#jest)
- [TypeScript](#typescript)
- [Continuous Integration](#continuous-integration)
- [Contributors](#contributors)
## 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.
Buy me a coffee
My personal patreon
Sizzy
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`
## Usage
You can import the hook and use the hook like that
```js
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
useServiceWorker,
ProvideServiceWorker,
} from 'react-hook-use-service-worker';
const MyComponent = () => {
const mySW = useServiceWorker();
return
current service worker status: {mySW.serviceWorkerStatus};
};
const App = () => {
return (
);
};
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.
```js
// 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:
```bash
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:
```bash
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](https://github.com/palmerhq/tsdx/pull/88/files).
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](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
