https://github.com/sws2apps/react-sw-helper
A pure react component library to handle service worker
https://github.com/sws2apps/react-sw-helper
component react react-component reactjs service-worker sw
Last synced: 6 months ago
JSON representation
A pure react component library to handle service worker
- Host: GitHub
- URL: https://github.com/sws2apps/react-sw-helper
- Owner: sws2apps
- License: mit
- Created: 2022-05-18T13:59:06.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-29T04:34:39.000Z (12 months ago)
- Last Synced: 2024-05-29T17:39:00.830Z (12 months ago)
- Topics: component, react, react-component, reactjs, service-worker, sw
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@sws2apps/react-sw-helper
- Size: 1.59 MB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# React Service Worker Helper
A pure react component for managing service worker life cycle. This project is inspired by the project [@medipass/react-service-worker](https://github.com/medipass/react-service-worker) published by @medipass (it is currently inactive for 4 years now). Tailored to our needs, and hopefully for you too, here are the differences from the original one:
- we have updated the code to use the functional component of react.
- the service worker is registered by default if you are building the reactjs app for production.
- we have disabled the option to unregister the service worker.
## Installation
```
npm i @sws2apps/react-sw-helper
```
## Usage
### Basic implementation
Import the `` component and wrap it around your application.
```jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import ServiceWorkerWrapper from '@sws2apps/react-sw-helper';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
);
```
### Advanced implementation
```jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import ServiceWorkerWrapper from '@sws2apps/react-sw-helper';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
console.log(`An error occured: ${err}`)}
onInstalled={() => console.log('Service worker installed')}
onUpdated={() => console.log('Service worker updated')}
onWaiting={() => console.log('Service worker waiting')}
publicServiceWorkerDest='/service-worker.js'
>
{({ update }) => }
);
```
## `` props
### publicServiceWorkerDest
> `string`
The destination of where your service worker is located.
Example usage:
``
### publicUrl
> `string` | Optional
The public URL of your application. Defaults to the root origin.
Example usage:
``
### onError
> `function(error: Error)` | Optional
Invoked when an error occurs during service worker registration.
Example usage:
`` console.log(`An error occured! Error: ${err}`)} /> ``
### onInstalled
> `function()` | Optional
Invoked when the service worker is installed.
Example usage:
` console.log('Service worker successfully installed.')} />`
### onUpdated
> `function()` | Optional
Invoked when the service worker is updated.
Example usage:
` console.log('Service worker successfully updated.')} />`
### onWaiting
> `function()` | Optional
Invoked when the service worker is already installed but waiting to be activated.
Example usage:
` console.log('Service worker already installed but waiting to be activated.')} />`
### `children` Render Props
#### update
> `function()`
When invoked, `update` will update the service worker. Please note that this function **does not** reload the page.