https://github.com/smartive/react-pwa-toolbox
Toolbox containing various helpers for creating PWA's with React.
https://github.com/smartive/react-pwa-toolbox
Last synced: 9 months ago
JSON representation
Toolbox containing various helpers for creating PWA's with React.
- Host: GitHub
- URL: https://github.com/smartive/react-pwa-toolbox
- Owner: smartive
- License: mit
- Created: 2019-12-18T13:47:50.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-10-07T02:38:25.000Z (9 months ago)
- Last Synced: 2025-10-07T04:24:18.572Z (9 months ago)
- Language: TypeScript
- Size: 176 KB
- Stars: 3
- Watchers: 6
- Forks: 1
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-pwa-toolbox
Toolbox containing various helpers for creating PWA's with React.
These helpers use themselves Google Workbox (https://github.com/GoogleChrome/workbox).
## useServiceWorker hook
This React hook can be used to register a service worker by providing the path to a service-worker file.
It will also return a boolean value indicating if a new service-worker is available to be installed and a callback which can be called to force the installation of the updated service-worker.
```tsx
import { useServiceWorker } from '@smartive/react-pwa-toolbox';
const [updateAvailable, installUpdate] = useServiceWorker('service-worker.js');
{updateAvailable && (
)}
```
## useNativeBack hook
This React hook allows the handling of a native back event, e.g. from a browser or mobile phone OS, in a single page web app.
The following example demonstrates the usage with an XState-Statemachine. The statemachine transitions will be viewed as route changes and a native back event will be handled by an action sent to the statemachine.
```tsx
import { useNativeBack } from '@smartive/react-pwa-toolbox';
import { useMachine } from '@xstate/react';
const [current, send, service] = useMachine(StateMachine);
const routeChanged = useNativeBack(() => send('BACK'));
service.onTransition((current) => routeChanged(current.value));
```