@dotmind/react-use-pwa

Prompt to install Progressive Web App and more with React hooks. Builded by .mind.io

✋ 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

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