React-pwa-toolkit
Most common PWA helpers in one toolkit. Powered by Hooks
Don't hesitate to support the project on Github if you like it ❤️ Also, contributors are always welcome!
Overview
The library is made to help to detect what browser your user has and gives you a convenient API to access user behave and most useful device events.
Use cases
First of all, install it and require the library. This is a React Module.
yarn add react-pwa-toolkit
;;
Browser detection
Use it inside useEffect.
It will be something like:
"browser": "name": "Safari" "version": "11.0" "os": "name": "iOS" "version": "11.0" "platform": "type": "mobile" "vendor": "Apple" "model": "iPhone" "engine": "name": "WebKit" "version": "604.1.38"
Network Status
If network is available, isOnline will be true. (default: true)
const isOnline = ; // true/false
PWA Status
Check user is using PWA or it is a browser.
const isPwa = ; // true/false
Visibility Status
You can track user behave when they move between tabs,
So it is helpful to play a music track when the document becomes visible and pauses the music when the document is no longer visible,
Or even lock the app when they leave it.
const isVisible = ; // true/false
Add-to-home-screen helper and installation Status
Check user choice on add-to-home-screen prompt with installationStatus.
NOTE: If you set it's initial value as false
in useInstallPrompt(false)
, it will show add-to-home-screen popup as soon as possible.
BUT if you want to show a fancy popup to encourage user to install your app set the initial value as true
like useInstallPrompt(true)
then you have access to show the popup whenever you want.
const installationStatus installationEvent = ;
License
Licensed as MIT. All rights not explicitly granted in the MIT license are reserved. See the included LICENSE file for more details.