Prompt to install Progressive Web App and more with React hooks
npm install @dotmind/react-use-pwa
Prompt to install Progressive Web App and more with React hooks. Builded by .mind.io
- Menu
- ✋ Disclaimer
- 💻 Installation
- 👷♂️ How it's work
- usePwa usage
- usePwaAppSize usage
- ⚡️ Contributing
- 🔐 License
This package help to prompt to install and manage Progressive Web App (PWA) installed with React hooks.
Please check if your app have the required criteria before use : web.dev/install-criteria
Want to make a good PWA ? Read this
SSR support ✅
``bash`
yarn add @dotmind/react-use-pwa
or
`bash`
npm i @dotmind/react-use-pwa --save
`javascript
import { useEffect, useCallback } from 'react';
import { usePwa } from '@dotmind/react-use-pwa';
const App = () => {
const {
installPrompt,
isInstalled,
isStandalone,
isOffline,
canInstall,
} = usePwa();
const handleInstallPrompt = useCallback(() => {
if (canInstall) {
installPrompt();
}
}, [canInstall, installPrompt]);
if (isOffline) {
return
Please check your network 📶
; if (!isInstalled || !isStandalone) {
return (
);
}
return (
`
| | description | type |
|-|-|-|
| installPrompt | Show install prompt | () => Promise |boolean
| isInstalled | Is app installed on device | |boolean
| isStandalone | Is app run in standalone mode | |boolean
| isOffline | Is app run in offline mode | |boolean
| canInstall | Device can install app | |'accepted' \| 'dismissed' \| 'unknow'
| userChoice | Prompt user choice | |
Choose app launching width and height (only in desktop standalone mode).
`javascript
import { usePwaAppSize } from '@dotmind/react-use-pwa';
const App = () => {
usePwaAppSize(400, 560);
return
};
`
| arguments | description | required | default value |
|-|-|-|-|
| width | App width | false | 800 |800
| height | App height | false | |{ fixed: false }
| options | App options | false | |
App options
| option | description | type
|-|-|-|
| fixed | User can't resize app width & height | boolean`
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.