Prompt to install Progressive Web App and more with React hooks. Builded by .mind.io
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 ✅
yarn add @dotmind/react-use-pwaor
npm i @dotmind/react-use-pwa --saveimport { 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 <p>Please check your network 📶</p>;
}
if (!isInstalled || !isStandalone) {
return (
<button onClick={handleInstallPrompt}>
<span>Hey install our app 👋</span>
</button>
);
}
return (
<h1>Welcome to our new app 🚀</h1>
);
};| description | type | |
|---|---|---|
| installPrompt | Show install prompt | () => Promise<void> |
| 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 | boolean |
| userChoice | Prompt user choice | 'accepted' | 'dismissed' | 'unknow' |
Choose app launching width and height (only in desktop standalone mode).
import { usePwaAppSize } from '@dotmind/react-use-pwa';
const App = () => {
usePwaAppSize(400, 560);
return <AppProvider />;
};| arguments | description | required | default value |
|---|---|---|---|
| width | App width | false | 800 |
| height | App height | false | 800 |
| options | App options | false | { fixed: 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.