dotmind / react-use-pwa

Prompt to install Progressive Web App and more with React hooks.

@dotmind/react-use-pwa

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

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