├── .gitignore
├── LICENCE
├── README.md
├── assets
└── header.png
├── package-lock.json
├── package.json
├── src
├── global.d.ts
├── hooks
│ ├── usePwa.ts
│ └── usePwaAppSize.ts
├── index.ts
└── utils.ts
├── tsconfig.json
└── tslint.json
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | lib/
3 | .DS_Store
4 |
--------------------------------------------------------------------------------
/LICENCE:
--------------------------------------------------------------------------------
1 | Copyright 2021 .mind
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 |
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 |
7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
8 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 | @dotmind/react-use-pwa
6 |
7 |
8 | Prompt to install Progressive Web App and more with React hooks. Builded by .mind.io
9 |
10 |
11 |
12 |
14 |
15 |
17 |
18 |
20 |
21 |
23 |
24 |
25 | ## Menu
26 |
27 | - [Menu](#menu)
28 | - [✋ Disclaimer](#-disclaimer)
29 | - [💻 Installation](#-installation)
30 | - [👷♂️ How it's work](#️-how-its-work)
31 | - [usePwa usage](#usepwa-usage)
32 | - [usePwaAppSize usage](#usepwaappsize-usage)
33 | - [⚡️ Contributing](#️-contributing)
34 | - [🔐 License](#-license)
35 |
36 |
37 | ## ✋ Disclaimer
38 |
39 | This package help to prompt to install and manage Progressive Web App (PWA) installed with React hooks.
40 |
41 | Please check if your app have the required criteria before use : [web.dev/install-criteria](https://web.dev/install-criteria/#criteria)
42 |
43 | Want to make a good PWA ? [Read this](https://web.dev/pwa-checklist/)
44 |
45 | SSR support ✅
46 |
47 | ## 💻 Installation
48 |
49 | ```bash
50 | yarn add @dotmind/react-use-pwa
51 | ```
52 |
53 | or
54 |
55 | ```bash
56 | npm i @dotmind/react-use-pwa --save
57 | ```
58 |
59 | ## 👷♂️ How it's work
60 |
61 | ### usePwa usage
62 |
63 | ```javascript
64 | import { useEffect, useCallback } from 'react';
65 | import { usePwa } from '@dotmind/react-use-pwa';
66 |
67 | const App = () => {
68 | const {
69 | installPrompt,
70 | isInstalled,
71 | isStandalone,
72 | isOffline,
73 | canInstall,
74 | } = usePwa();
75 |
76 | const handleInstallPrompt = useCallback(() => {
77 | if (canInstall) {
78 | installPrompt();
79 | }
80 | }, [canInstall, installPrompt]);
81 |
82 | if (isOffline) {
83 | return Please check your network 📶
;
84 | }
85 |
86 | if (!isInstalled || !isStandalone) {
87 | return (
88 |
89 | Hey install our app 👋
90 |
91 | );
92 | }
93 |
94 | return (
95 | Welcome to our new app 🚀
96 | );
97 | };
98 |
99 | ```
100 |
101 | | | description | type |
102 | |-|-|-|
103 | | installPrompt | Show install prompt | `() => Promise` |
104 | | isInstalled | Is app installed on device | `boolean` |
105 | | isStandalone | Is app run in standalone mode | `boolean` |
106 | | isOffline | Is app run in offline mode | `boolean` |
107 | | canInstall | Device can install app | `boolean` |
108 | | userChoice | Prompt user choice | `'accepted' \| 'dismissed' \| 'unknow'` |
109 |
110 | ### usePwaAppSize usage
111 |
112 | Choose app launching width and height (only in desktop standalone mode).
113 |
114 | ```javascript
115 | import { usePwaAppSize } from '@dotmind/react-use-pwa';
116 |
117 | const App = () => {
118 | usePwaAppSize(400, 560);
119 |
120 | return (https://github.com/bltnico)",
24 | "main": "lib/index.js",
25 | "types": "lib/index.d.ts",
26 | "scripts": {
27 | "test": "echo \"Error: no test specified\" && exit 1",
28 | "build": "rm -rf lib && tsc --project ./tsconfig.json",
29 | "lint": "tslint --fix -p ./tsconfig.json",
30 | "prepare": "npm run build",
31 | "prepublishOnly": "npm run lint"
32 | },
33 | "devDependencies": {
34 | "@tsconfig/recommended": "1.0.1",
35 | "@types/react": "17.0.3",
36 | "react": "17.0.2",
37 | "tslint": "6.1.3",
38 | "typescript": "4.2.4"
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/global.d.ts:
--------------------------------------------------------------------------------
1 | interface Navigator {
2 | standalone? : boolean;
3 | };
4 |
--------------------------------------------------------------------------------
/src/hooks/usePwa.ts:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
2 |
3 | import { isServer } from './../utils';
4 |
5 | enum UserChoice {
6 | ACCEPTED = 'accepted',
7 | DISMISSED = 'dismissed',
8 | };
9 |
10 | interface BeforeInstallPromptEvent extends Event {
11 | readonly userChoice: Promise<{
12 | outcome: UserChoice,
13 | platform: string,
14 | }>
15 |
16 | prompt(): Promise;
17 | };
18 |
19 | interface IusePwa {
20 | installPrompt: () => Promise;
21 | isInstalled: boolean;
22 | isStandalone: boolean;
23 | isOffline: boolean;
24 | canInstall: boolean;
25 | userChoice: UserChoice | 'unknow';
26 | };
27 |
28 | const usePwa = (): IusePwa => {
29 | const [canInstall, setCanInstall] = useState(false);
30 | const [isInstalled, setInstalled] = useState(false);
31 | const [isOffline, setOffline] = useState(false);
32 | const [userChoice, setUserChoice] = useState('unknow');
33 | const deferredPrompt = useRef() as React.MutableRefObject;
34 |
35 | const handleInstallEvent = useCallback(() => setInstalled(true), []);
36 |
37 | const handleBeforePromptEvent = useCallback((event: Event) => {
38 | event.preventDefault();
39 | deferredPrompt.current = event as BeforeInstallPromptEvent;
40 | setCanInstall(true);
41 | }, []);
42 |
43 | const handleOfflineEvent = useCallback((offline: boolean) => () => {
44 | setOffline(offline);
45 | }, []);
46 |
47 | useEffect(() => {
48 | if (isServer()) {
49 | return;
50 | }
51 |
52 | window.addEventListener('beforeinstallprompt', handleBeforePromptEvent);
53 | return () => window.removeEventListener('beforeinstallprompt', handleBeforePromptEvent)
54 | }, [handleBeforePromptEvent]);
55 |
56 | useEffect(() => {
57 | if (isServer()) {
58 | return;
59 | }
60 |
61 | window.addEventListener('appinstalled', handleInstallEvent);
62 | return () => window.removeEventListener('appinstalled', handleInstallEvent);
63 | }, [handleInstallEvent]);
64 |
65 | useEffect(() => {
66 | if (isServer()) {
67 | return;
68 | }
69 |
70 | if (navigator) {
71 | setOffline(!navigator.onLine);
72 | }
73 |
74 | window.addEventListener('online', handleOfflineEvent(false));
75 | window.addEventListener('offline', handleOfflineEvent(true));
76 | return () => {
77 | window.removeEventListener('online', handleOfflineEvent(false));
78 | window.removeEventListener('offline', handleOfflineEvent(true));
79 | };
80 | }, [handleOfflineEvent]);
81 |
82 | const installPrompt = useCallback(async () => {
83 | if (!deferredPrompt.current || isServer()) {
84 | return;
85 | }
86 |
87 | deferredPrompt.current.prompt();
88 | const choiceResult = await deferredPrompt.current.userChoice;
89 | deferredPrompt.current = null;
90 | setUserChoice(choiceResult.outcome);
91 | }, []);
92 |
93 | const isStandalone = useMemo(() => (
94 | !isServer() && (navigator.standalone || window.matchMedia('(display-mode: standalone)').matches)
95 | ), []);
96 |
97 | return {
98 | installPrompt,
99 | isInstalled,
100 | isStandalone,
101 | isOffline,
102 | canInstall,
103 | userChoice,
104 | };
105 | };
106 |
107 | export default usePwa;
108 |
--------------------------------------------------------------------------------
/src/hooks/usePwaAppSize.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 |
3 | import usePwa from './usePwa';
4 | import { isServer } from './../utils';
5 |
6 | interface Options {
7 | fixed: boolean;
8 | };
9 |
10 | const defaultOptions: Options = { fixed: false };
11 |
12 | const usePwaAppSize = (
13 | width: number = 800,
14 | height: number = 800,
15 | options: Options = defaultOptions,
16 | ) => {
17 | const { isStandalone } = usePwa();
18 |
19 | useEffect(() => {
20 | if (isServer()) {
21 | return;
22 | }
23 |
24 | const resizeWindow = (): void => window.resizeTo(width, height);
25 |
26 | if (isStandalone) {
27 | window.addEventListener('load', resizeWindow);
28 | if (options.fixed) {
29 | window.addEventListener('resize', resizeWindow);
30 | }
31 | }
32 |
33 | return () => {
34 | window.removeEventListener('load', resizeWindow);
35 | if (options.fixed) {
36 | window.removeEventListener('resize', resizeWindow);
37 | }
38 | };
39 | }, [isStandalone]);
40 | };
41 |
42 | export default usePwaAppSize;
43 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import usePwa from './hooks/usePwa';
2 | import usePwaAppSize from './hooks/usePwaAppSize';
3 |
4 | export { usePwa, usePwaAppSize };
5 |
--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
1 | export const isServer = (): boolean => typeof window === 'undefined';
2 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@tsconfig/recommended/tsconfig.json",
3 | "compilerOptions": {
4 | "jsx": "react",
5 | "declaration": true,
6 | "outDir": "./lib",
7 | "strict": true,
8 | "removeComments": true,
9 | "esModuleInterop": true,
10 | "skipLibCheck": true,
11 | "forceConsistentCasingInFileNames": true,
12 | "lib": ["es2015", "dom"],
13 | "baseUrl": "src/"
14 | },
15 | "include": ["src"],
16 | "exclude": [
17 | "node_modules",
18 | "**/__tests__/*"
19 | ],
20 | }
21 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "tslint:recommended"
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
3 | 
