Menu

• Menu
• ✋ Disclaimer
• 💻 Installation
• 👷‍♂️ How it's work
  • usePwa usage
  • usePwaAppSize usage
• ⚡️ Contributing
• 🔐 License

✋ Disclaimer

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 ✅

💻 Installation

yarn add @dotmind/react-use-pwa

or

npm i @dotmind/react-use-pwa --save

👷‍♂️ How it's work

usePwa usage

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 <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' |

usePwaAppSize usage

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

⚡️ Contributing

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.

🔐 License

MIT