use-pwa 2.2.0 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +46 -47
- package/dist/index.d.mts +26 -0
- package/dist/index.d.ts +21 -12
- package/dist/index.js +99 -164
- package/dist/index.mjs +79 -0
- package/package.json +52 -62
- package/.vscode/settings.json +0 -1
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js.map +0 -1
- package/tsconfig.gen-dts.json +0 -19
package/README.md
CHANGED
|
@@ -1,65 +1,64 @@
|
|
|
1
1
|
# use-pwa
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
React hook for detecting and handling PWA (Progressive Web App) installation.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
- TypeScript support
|
|
8
|
-
- SSR support
|
|
9
|
-
- Update support
|
|
5
|
+
[Demo](https://use-pwa.kkweb.io/)
|
|
10
6
|
|
|
11
7
|
## Installation
|
|
12
8
|
|
|
13
|
-
|
|
9
|
+
```bash
|
|
10
|
+
npm install use-pwa
|
|
11
|
+
```
|
|
14
12
|
|
|
15
|
-
##
|
|
13
|
+
## Usage
|
|
16
14
|
|
|
17
|
-
|
|
15
|
+
```tsx
|
|
16
|
+
import usePwa from "use-pwa";
|
|
18
17
|
|
|
19
|
-
|
|
18
|
+
function App() {
|
|
19
|
+
const { canInstall, install, isInstalled, isSupported } = usePwa();
|
|
20
20
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
| 〃 | Safari | `false` | `false` | `false` | `false` | `false` | `undefined` |
|
|
25
|
-
| 〃 | Firefox | `false` | `false` | `false` | `false` | `false` | `undefined` |
|
|
26
|
-
| Android | Chrome | `false` (\*1) | `true` | `false` | `true` | `false` | `undefined` (\*2) |
|
|
27
|
-
| 〃 | Brave | `false` (\*1) | `true` | `false` | `true` | `false` | `undefined` (\*2) |
|
|
28
|
-
| iOS | Safari | `false` | `false` | `true` | `false` | `false` | `undefined` |
|
|
29
|
-
| 〃 | Brave | `false` | `false` | `true` | `false` | `false` | `undefined` |
|
|
21
|
+
if (!isSupported || isInstalled) {
|
|
22
|
+
return null;
|
|
23
|
+
}
|
|
30
24
|
|
|
31
|
-
|
|
32
|
-
|
|
25
|
+
return (
|
|
26
|
+
<button disabled={!canInstall} onClick={install}>
|
|
27
|
+
Install PWA
|
|
28
|
+
</button>
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
```
|
|
33
32
|
|
|
34
|
-
|
|
33
|
+
## API
|
|
35
34
|
|
|
36
|
-
|
|
37
|
-
| ------- | ----------- | ------------- | ---------------- | ----------- | ---------- | ------------ | ----------- |
|
|
38
|
-
| Mac | PWA | `false` (\*1) | `false` (\*1) | `false` | `true` | `true` (\*2) | `undefined` |
|
|
39
|
-
| 〃 | Chrome | `false` | `false` | `false` | `true` | `false` | `undefined` |
|
|
40
|
-
| Android | PWA(Chrome) | `false` | `false` | `false` | `true` | `true` | `undefined` |
|
|
41
|
-
| 〃 | Chrome | `false` | `false` | `false` | `true` | `false` | `undefined` |
|
|
42
|
-
| 〃 | PWA(Brave) | `false` | `false` | `false` | `true` | `true` | `undefined` |
|
|
43
|
-
| 〃 | Brave | `false` | `true` | `false` | `true` | `false` | `undefined` |
|
|
44
|
-
| iOS | PWA | `false` | `false` | `true` | `false` | `true` | `undefined` |
|
|
45
|
-
| 〃 | Safari | `false` | `false` | `true` | `false` | `false` | `undefined` |
|
|
35
|
+
### `usePwa(): PwaData`
|
|
46
36
|
|
|
47
|
-
|
|
48
|
-
|
|
37
|
+
| Property | Type | Description |
|
|
38
|
+
|----------|------|-------------|
|
|
39
|
+
| `canInstall` | `boolean` | `true` when install prompt is available |
|
|
40
|
+
| `install` | `() => Promise<UserChoice \| undefined>` | Triggers the install prompt |
|
|
41
|
+
| `isInstalled` | `boolean` | `true` when running as installed PWA |
|
|
42
|
+
| `isSupported` | `boolean` | `true` when browser supports PWA installation |
|
|
49
43
|
|
|
50
|
-
|
|
44
|
+
### `UserChoice`
|
|
51
45
|
|
|
52
|
-
|
|
46
|
+
Returned by `install()` when the user responds to the prompt:
|
|
47
|
+
|
|
48
|
+
| Property | Type | Description |
|
|
49
|
+
|----------|------|-------------|
|
|
50
|
+
| `outcome` | `"accepted" \| "dismissed"` | User's choice |
|
|
51
|
+
| `platform` | `string` | Platform string |
|
|
52
|
+
|
|
53
|
+
## Features
|
|
54
|
+
|
|
55
|
+
- Simple 4-property API
|
|
56
|
+
- Detects PWA install prompts
|
|
57
|
+
- Browser support detection
|
|
58
|
+
- Standalone mode detection
|
|
59
|
+
- SSR compatible
|
|
60
|
+
- TypeScript support
|
|
53
61
|
|
|
54
|
-
##
|
|
62
|
+
## License
|
|
55
63
|
|
|
56
|
-
|
|
57
|
-
| ----------------- | :------: | :------: | ------------------------------------------------------------------------------------------- |
|
|
58
|
-
| appinstalled | Boolean | | [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/appinstalled_event) |
|
|
59
|
-
| canInstallprompt | Boolean | | [MDN](https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent) |
|
|
60
|
-
| enabledA2hs | Boolean | | [MDN](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen) |
|
|
61
|
-
| enabledPwa | Boolean | | [MDN](https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent) |
|
|
62
|
-
| isLoading | Boolean | | |
|
|
63
|
-
| isPwa | Boolean | | [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/display-mode) |
|
|
64
|
-
| showInstallPrompt | Function | | [MDN](https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent/prompt) |
|
|
65
|
-
| userChoice | Object | ✓ | [MDN](https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent) |
|
|
64
|
+
MIT
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
type UserChoice = {
|
|
2
|
+
outcome: "accepted" | "dismissed";
|
|
3
|
+
platform: string;
|
|
4
|
+
};
|
|
5
|
+
interface BeforeInstallPromptEvent extends Event {
|
|
6
|
+
readonly platforms: string[];
|
|
7
|
+
readonly userChoice: Promise<UserChoice>;
|
|
8
|
+
prompt(): Promise<void>;
|
|
9
|
+
}
|
|
10
|
+
declare global {
|
|
11
|
+
interface WindowEventMap {
|
|
12
|
+
beforeinstallprompt: BeforeInstallPromptEvent;
|
|
13
|
+
}
|
|
14
|
+
interface Navigator {
|
|
15
|
+
standalone?: boolean;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
type PwaData = {
|
|
19
|
+
canInstall: boolean;
|
|
20
|
+
install: () => Promise<UserChoice | undefined>;
|
|
21
|
+
isInstalled: boolean;
|
|
22
|
+
isSupported: boolean;
|
|
23
|
+
};
|
|
24
|
+
declare function usePwa(): PwaData;
|
|
25
|
+
|
|
26
|
+
export { type PwaData, type UserChoice, usePwa as default, usePwa };
|
package/dist/index.d.ts
CHANGED
|
@@ -2,16 +2,25 @@ type UserChoice = {
|
|
|
2
2
|
outcome: "accepted" | "dismissed";
|
|
3
3
|
platform: string;
|
|
4
4
|
};
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
5
|
+
interface BeforeInstallPromptEvent extends Event {
|
|
6
|
+
readonly platforms: string[];
|
|
7
|
+
readonly userChoice: Promise<UserChoice>;
|
|
8
|
+
prompt(): Promise<void>;
|
|
9
|
+
}
|
|
10
|
+
declare global {
|
|
11
|
+
interface WindowEventMap {
|
|
12
|
+
beforeinstallprompt: BeforeInstallPromptEvent;
|
|
13
|
+
}
|
|
14
|
+
interface Navigator {
|
|
15
|
+
standalone?: boolean;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
type PwaData = {
|
|
19
|
+
canInstall: boolean;
|
|
20
|
+
install: () => Promise<UserChoice | undefined>;
|
|
21
|
+
isInstalled: boolean;
|
|
22
|
+
isSupported: boolean;
|
|
14
23
|
};
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
24
|
+
declare function usePwa(): PwaData;
|
|
25
|
+
|
|
26
|
+
export { type PwaData, type UserChoice, usePwa as default, usePwa };
|
package/dist/index.js
CHANGED
|
@@ -1,171 +1,106 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
14
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
15
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
16
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
17
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
18
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
19
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
20
|
-
});
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
21
9
|
};
|
|
22
|
-
var
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
30
|
-
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
31
|
-
switch (op[0]) {
|
|
32
|
-
case 0: case 1: t = op; break;
|
|
33
|
-
case 4: _.label++; return { value: op[1], done: false };
|
|
34
|
-
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
35
|
-
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
36
|
-
default:
|
|
37
|
-
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
38
|
-
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
39
|
-
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
40
|
-
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
41
|
-
if (t[2]) _.ops.pop();
|
|
42
|
-
_.trys.pop(); continue;
|
|
43
|
-
}
|
|
44
|
-
op = body.call(thisArg, _);
|
|
45
|
-
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
46
|
-
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
47
|
-
}
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
48
17
|
};
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/index.ts
|
|
21
|
+
var index_exports = {};
|
|
22
|
+
__export(index_exports, {
|
|
23
|
+
default: () => usePwa,
|
|
24
|
+
usePwa: () => usePwa
|
|
25
|
+
});
|
|
26
|
+
module.exports = __toCommonJS(index_exports);
|
|
27
|
+
|
|
28
|
+
// src/hooks/use-pwa.ts
|
|
29
|
+
var import_react = require("react");
|
|
30
|
+
var capturedEvent = null;
|
|
31
|
+
if (typeof window !== "undefined") {
|
|
32
|
+
window.addEventListener("beforeinstallprompt", (event) => {
|
|
33
|
+
event.preventDefault();
|
|
34
|
+
capturedEvent = event;
|
|
35
|
+
});
|
|
55
36
|
}
|
|
56
37
|
function usePwa() {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
setUserChoice(userChoice);
|
|
85
|
-
return [2 /*return*/];
|
|
86
|
-
}
|
|
87
|
-
});
|
|
88
|
-
}); }, []);
|
|
89
|
-
var _g = (0, react_1.useState)({
|
|
90
|
-
appinstalled: false,
|
|
91
|
-
beforeinstallprompt: false,
|
|
92
|
-
enabledA2hs: false,
|
|
93
|
-
enabledPwa: false,
|
|
94
|
-
isPwa: false,
|
|
95
|
-
}), completed = _g[0], setCompleted = _g[1];
|
|
96
|
-
var isLoading = (0, react_1.useMemo)(function () { return Object.values(completed).includes(false); }, [completed]);
|
|
97
|
-
(0, react_1.useEffect)(function () {
|
|
98
|
-
window.addEventListener("appinstalled", handleAppinstalled);
|
|
99
|
-
setCompleted(function (prevCompleted) { return (__assign(__assign({}, prevCompleted), { appinstalled: true })); });
|
|
100
|
-
return function () { return window.removeEventListener("appinstalled", handleAppinstalled); };
|
|
101
|
-
}, [handleAppinstalled]);
|
|
102
|
-
(0, react_1.useEffect)(function () {
|
|
103
|
-
// @ts-ignore
|
|
104
|
-
window.addEventListener("beforeinstallprompt", handleBeforeinstallprompt);
|
|
105
|
-
setCompleted(function (prevCompleted) { return (__assign(__assign({}, prevCompleted), { beforeinstallprompt: true })); });
|
|
106
|
-
return function () {
|
|
107
|
-
// @ts-ignore
|
|
108
|
-
return window.removeEventListener("beforeinstallprompt", handleBeforeinstallprompt);
|
|
109
|
-
};
|
|
110
|
-
}, [handleBeforeinstallprompt]);
|
|
111
|
-
(0, react_1.useEffect)(function () {
|
|
112
|
-
try {
|
|
113
|
-
var lownerUserAgent = window.navigator.userAgent.toLowerCase();
|
|
114
|
-
if (!lownerUserAgent.includes("iphone") &&
|
|
115
|
-
!lownerUserAgent.includes("ipad")) {
|
|
116
|
-
return;
|
|
117
|
-
}
|
|
118
|
-
onEnabledA2hs();
|
|
119
|
-
}
|
|
120
|
-
finally {
|
|
121
|
-
setCompleted(function (prevCompleted) { return (__assign(__assign({}, prevCompleted), { enabledA2hs: true })); });
|
|
122
|
-
}
|
|
123
|
-
}, [onEnabledA2hs]);
|
|
124
|
-
(0, react_1.useEffect)(function () {
|
|
125
|
-
try {
|
|
126
|
-
if (!("BeforeInstallPromptEvent" in window)) {
|
|
127
|
-
return;
|
|
128
|
-
}
|
|
129
|
-
onEnabledPwa();
|
|
130
|
-
}
|
|
131
|
-
finally {
|
|
132
|
-
setCompleted(function (prevCompleted) { return (__assign(__assign({}, prevCompleted), { enabledPwa: true })); });
|
|
133
|
-
}
|
|
134
|
-
}, [onEnabledPwa]);
|
|
135
|
-
(0, react_1.useEffect)(function () {
|
|
136
|
-
try {
|
|
137
|
-
// Android Trusted Web App
|
|
138
|
-
if (window.document.referrer.includes("android-app://")) {
|
|
139
|
-
onIsPwa();
|
|
140
|
-
return;
|
|
141
|
-
}
|
|
142
|
-
// Chrome PWA (supporting fullscreen, standalone, minimal-ui)
|
|
143
|
-
if (["fullscreen", "standalone", "minimal-ui"].some(function (displayMode) {
|
|
144
|
-
return window.matchMedia("(display-mode: " + displayMode + ")").matches;
|
|
145
|
-
})) {
|
|
146
|
-
onIsPwa();
|
|
147
|
-
return;
|
|
148
|
-
}
|
|
149
|
-
// NOT iOS PWA Standalone
|
|
150
|
-
if (!("standalone" in window.navigator) || !window.navigator.standalone) {
|
|
151
|
-
return;
|
|
152
|
-
}
|
|
153
|
-
onIsPwa();
|
|
154
|
-
}
|
|
155
|
-
finally {
|
|
156
|
-
setCompleted(function (prevCompleted) { return (__assign(__assign({}, prevCompleted), { isPwa: true })); });
|
|
157
|
-
}
|
|
158
|
-
}, [onIsPwa]);
|
|
159
|
-
return {
|
|
160
|
-
appinstalled: appinstalled,
|
|
161
|
-
canInstallprompt: canInstallprompt,
|
|
162
|
-
enabledA2hs: enabledA2hs,
|
|
163
|
-
enabledPwa: enabledPwa,
|
|
164
|
-
isLoading: isLoading,
|
|
165
|
-
isPwa: isPwa,
|
|
166
|
-
showInstallPrompt: showInstallPrompt,
|
|
167
|
-
userChoice: userChoice,
|
|
38
|
+
const promptEvent = (0, import_react.useRef)(capturedEvent);
|
|
39
|
+
const [canInstall, setCanInstall] = (0, import_react.useState)(false);
|
|
40
|
+
const [isInstalled, setIsInstalled] = (0, import_react.useState)(false);
|
|
41
|
+
const [isSupported, setIsSupported] = (0, import_react.useState)(false);
|
|
42
|
+
const install = (0, import_react.useCallback)(async () => {
|
|
43
|
+
if (!promptEvent.current) {
|
|
44
|
+
return void 0;
|
|
45
|
+
}
|
|
46
|
+
await promptEvent.current.prompt();
|
|
47
|
+
const choice = await promptEvent.current.userChoice;
|
|
48
|
+
if (choice.outcome === "accepted") {
|
|
49
|
+
setCanInstall(false);
|
|
50
|
+
promptEvent.current = null;
|
|
51
|
+
capturedEvent = null;
|
|
52
|
+
}
|
|
53
|
+
return choice;
|
|
54
|
+
}, []);
|
|
55
|
+
(0, import_react.useEffect)(() => {
|
|
56
|
+
if (capturedEvent) {
|
|
57
|
+
promptEvent.current = capturedEvent;
|
|
58
|
+
setCanInstall(true);
|
|
59
|
+
}
|
|
60
|
+
const handleBeforeInstallPrompt = (event) => {
|
|
61
|
+
event.preventDefault();
|
|
62
|
+
promptEvent.current = event;
|
|
63
|
+
capturedEvent = event;
|
|
64
|
+
setCanInstall(true);
|
|
168
65
|
};
|
|
66
|
+
window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt);
|
|
67
|
+
return () => {
|
|
68
|
+
window.removeEventListener(
|
|
69
|
+
"beforeinstallprompt",
|
|
70
|
+
handleBeforeInstallPrompt
|
|
71
|
+
);
|
|
72
|
+
};
|
|
73
|
+
}, []);
|
|
74
|
+
(0, import_react.useEffect)(() => {
|
|
75
|
+
if (document.referrer.includes("android-app://")) {
|
|
76
|
+
setIsInstalled(true);
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
const displayModes = ["fullscreen", "standalone", "minimal-ui"];
|
|
80
|
+
const isDisplayModePwa = displayModes.some(
|
|
81
|
+
(mode) => window.matchMedia(`(display-mode: ${mode})`).matches
|
|
82
|
+
);
|
|
83
|
+
if (isDisplayModePwa) {
|
|
84
|
+
setIsInstalled(true);
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
if (navigator.standalone) {
|
|
88
|
+
setIsInstalled(true);
|
|
89
|
+
}
|
|
90
|
+
}, []);
|
|
91
|
+
(0, import_react.useEffect)(() => {
|
|
92
|
+
if ("BeforeInstallPromptEvent" in window) {
|
|
93
|
+
setIsSupported(true);
|
|
94
|
+
}
|
|
95
|
+
}, []);
|
|
96
|
+
return {
|
|
97
|
+
canInstall,
|
|
98
|
+
install,
|
|
99
|
+
isInstalled,
|
|
100
|
+
isSupported
|
|
101
|
+
};
|
|
169
102
|
}
|
|
170
|
-
|
|
171
|
-
|
|
103
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
104
|
+
0 && (module.exports = {
|
|
105
|
+
usePwa
|
|
106
|
+
});
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
// src/hooks/use-pwa.ts
|
|
2
|
+
import { useCallback, useEffect, useRef, useState } from "react";
|
|
3
|
+
var capturedEvent = null;
|
|
4
|
+
if (typeof window !== "undefined") {
|
|
5
|
+
window.addEventListener("beforeinstallprompt", (event) => {
|
|
6
|
+
event.preventDefault();
|
|
7
|
+
capturedEvent = event;
|
|
8
|
+
});
|
|
9
|
+
}
|
|
10
|
+
function usePwa() {
|
|
11
|
+
const promptEvent = useRef(capturedEvent);
|
|
12
|
+
const [canInstall, setCanInstall] = useState(false);
|
|
13
|
+
const [isInstalled, setIsInstalled] = useState(false);
|
|
14
|
+
const [isSupported, setIsSupported] = useState(false);
|
|
15
|
+
const install = useCallback(async () => {
|
|
16
|
+
if (!promptEvent.current) {
|
|
17
|
+
return void 0;
|
|
18
|
+
}
|
|
19
|
+
await promptEvent.current.prompt();
|
|
20
|
+
const choice = await promptEvent.current.userChoice;
|
|
21
|
+
if (choice.outcome === "accepted") {
|
|
22
|
+
setCanInstall(false);
|
|
23
|
+
promptEvent.current = null;
|
|
24
|
+
capturedEvent = null;
|
|
25
|
+
}
|
|
26
|
+
return choice;
|
|
27
|
+
}, []);
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
if (capturedEvent) {
|
|
30
|
+
promptEvent.current = capturedEvent;
|
|
31
|
+
setCanInstall(true);
|
|
32
|
+
}
|
|
33
|
+
const handleBeforeInstallPrompt = (event) => {
|
|
34
|
+
event.preventDefault();
|
|
35
|
+
promptEvent.current = event;
|
|
36
|
+
capturedEvent = event;
|
|
37
|
+
setCanInstall(true);
|
|
38
|
+
};
|
|
39
|
+
window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt);
|
|
40
|
+
return () => {
|
|
41
|
+
window.removeEventListener(
|
|
42
|
+
"beforeinstallprompt",
|
|
43
|
+
handleBeforeInstallPrompt
|
|
44
|
+
);
|
|
45
|
+
};
|
|
46
|
+
}, []);
|
|
47
|
+
useEffect(() => {
|
|
48
|
+
if (document.referrer.includes("android-app://")) {
|
|
49
|
+
setIsInstalled(true);
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
const displayModes = ["fullscreen", "standalone", "minimal-ui"];
|
|
53
|
+
const isDisplayModePwa = displayModes.some(
|
|
54
|
+
(mode) => window.matchMedia(`(display-mode: ${mode})`).matches
|
|
55
|
+
);
|
|
56
|
+
if (isDisplayModePwa) {
|
|
57
|
+
setIsInstalled(true);
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
if (navigator.standalone) {
|
|
61
|
+
setIsInstalled(true);
|
|
62
|
+
}
|
|
63
|
+
}, []);
|
|
64
|
+
useEffect(() => {
|
|
65
|
+
if ("BeforeInstallPromptEvent" in window) {
|
|
66
|
+
setIsSupported(true);
|
|
67
|
+
}
|
|
68
|
+
}, []);
|
|
69
|
+
return {
|
|
70
|
+
canInstall,
|
|
71
|
+
install,
|
|
72
|
+
isInstalled,
|
|
73
|
+
isSupported
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
export {
|
|
77
|
+
usePwa as default,
|
|
78
|
+
usePwa
|
|
79
|
+
};
|
package/package.json
CHANGED
|
@@ -1,75 +1,65 @@
|
|
|
1
1
|
{
|
|
2
|
-
"
|
|
3
|
-
"
|
|
4
|
-
|
|
5
|
-
"last 1 chrome version",
|
|
6
|
-
"last 1 firefox version",
|
|
7
|
-
"last 1 safari version"
|
|
8
|
-
],
|
|
9
|
-
"production": [
|
|
10
|
-
">0.2%",
|
|
11
|
-
"not dead",
|
|
12
|
-
"not op_mini all"
|
|
13
|
-
]
|
|
14
|
-
},
|
|
15
|
-
"bugs": {
|
|
16
|
-
"url": "https://github.com/piro0919/use-pwa/issues"
|
|
17
|
-
},
|
|
18
|
-
"devDependencies": {
|
|
19
|
-
"@types/node": "12.20.55",
|
|
20
|
-
"@types/react": "16.14.60",
|
|
21
|
-
"@types/react-dom": "16.9.24",
|
|
22
|
-
"gh-pages": "3.2.3",
|
|
23
|
-
"react": "17.0.2",
|
|
24
|
-
"react-dom": "17.0.2",
|
|
25
|
-
"react-scripts": "4.0.3",
|
|
26
|
-
"typescript": "4.9.5",
|
|
27
|
-
"web-vitals": "0.2.4",
|
|
28
|
-
"workbox-background-sync": "5.1.4",
|
|
29
|
-
"workbox-broadcast-update": "5.1.4",
|
|
30
|
-
"workbox-cacheable-response": "5.1.4",
|
|
31
|
-
"workbox-core": "5.1.4",
|
|
32
|
-
"workbox-expiration": "5.1.4",
|
|
33
|
-
"workbox-google-analytics": "5.1.4",
|
|
34
|
-
"workbox-navigation-preload": "5.1.4",
|
|
35
|
-
"workbox-precaching": "5.1.4",
|
|
36
|
-
"workbox-range-requests": "5.1.4",
|
|
37
|
-
"workbox-routing": "5.1.4",
|
|
38
|
-
"workbox-strategies": "5.1.4",
|
|
39
|
-
"workbox-streams": "5.1.4"
|
|
40
|
-
},
|
|
41
|
-
"eslintConfig": {
|
|
42
|
-
"extends": [
|
|
43
|
-
"react-app",
|
|
44
|
-
"react-app/jest"
|
|
45
|
-
]
|
|
46
|
-
},
|
|
47
|
-
"homepage": "https://use-pwa.kk-web.link",
|
|
2
|
+
"name": "use-pwa",
|
|
3
|
+
"version": "3.0.0",
|
|
4
|
+
"description": "React hook for PWA installation detection and handling",
|
|
48
5
|
"keywords": [
|
|
49
|
-
"hooks",
|
|
50
6
|
"react",
|
|
7
|
+
"hook",
|
|
51
8
|
"pwa",
|
|
52
|
-
"
|
|
9
|
+
"progressive-web-app",
|
|
10
|
+
"install-prompt",
|
|
11
|
+
"a2hs"
|
|
53
12
|
],
|
|
13
|
+
"author": "piro0919",
|
|
54
14
|
"license": "MIT",
|
|
55
|
-
"main": "dist/index.js",
|
|
56
|
-
"module": "dist/index.js",
|
|
57
|
-
"name": "use-pwa",
|
|
58
|
-
"private": false,
|
|
59
15
|
"repository": {
|
|
60
16
|
"type": "git",
|
|
61
|
-
"url": "https://github.com/piro0919/use-pwa.git"
|
|
17
|
+
"url": "git+https://github.com/piro0919/use-pwa.git"
|
|
18
|
+
},
|
|
19
|
+
"homepage": "https://use-pwa.kkweb.io",
|
|
20
|
+
"bugs": {
|
|
21
|
+
"url": "https://github.com/piro0919/use-pwa/issues"
|
|
62
22
|
},
|
|
23
|
+
"exports": {
|
|
24
|
+
".": {
|
|
25
|
+
"import": {
|
|
26
|
+
"types": "./dist/index.d.mts",
|
|
27
|
+
"default": "./dist/index.mjs"
|
|
28
|
+
},
|
|
29
|
+
"require": {
|
|
30
|
+
"types": "./dist/index.d.ts",
|
|
31
|
+
"default": "./dist/index.js"
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
"files": [
|
|
36
|
+
"dist"
|
|
37
|
+
],
|
|
38
|
+
"sideEffects": false,
|
|
63
39
|
"scripts": {
|
|
64
|
-
"build": "
|
|
65
|
-
"build:
|
|
66
|
-
"
|
|
67
|
-
"
|
|
68
|
-
"
|
|
40
|
+
"build": "next build",
|
|
41
|
+
"build:lib": "tsup",
|
|
42
|
+
"dev": "next dev",
|
|
43
|
+
"format": "biome format --write",
|
|
44
|
+
"lint": "biome check",
|
|
45
|
+
"prepublishOnly": "npm run build:lib",
|
|
46
|
+
"start": "next start"
|
|
69
47
|
},
|
|
70
|
-
"
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
48
|
+
"peerDependencies": {
|
|
49
|
+
"react": ">=17.0.0"
|
|
50
|
+
},
|
|
51
|
+
"devDependencies": {
|
|
52
|
+
"@biomejs/biome": "2.2.0",
|
|
53
|
+
"@serwist/next": "^9.4.2",
|
|
54
|
+
"@types/node": "25.0.3",
|
|
55
|
+
"@types/react": "^19.2.7",
|
|
56
|
+
"babel-plugin-react-compiler": "^1.0.0",
|
|
57
|
+
"lefthook": "^2.0.13",
|
|
58
|
+
"next": "16.1.1",
|
|
59
|
+
"react": "19.2.3",
|
|
60
|
+
"react-dom": "19.2.3",
|
|
61
|
+
"serwist": "^9.4.2",
|
|
62
|
+
"tsup": "^8.5.1",
|
|
63
|
+
"typescript": "^5"
|
|
74
64
|
}
|
|
75
65
|
}
|
package/.vscode/settings.json
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{}
|
package/dist/index.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/hooks/usePwa/index.ts"],"names":[],"mappings":"AASA,KAAK,UAAU,GAAG;IAChB,OAAO,EAAE,UAAU,GAAG,WAAW,CAAC;IAClC,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAQF,MAAM,MAAM,OAAO,GAAG;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,IAAI,OAAO,CA0JxC"}
|
package/dist/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/hooks/usePwa/index.ts"],"names":[],"mappings":"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"}
|
package/tsconfig.gen-dts.json
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"declaration": true,
|
|
4
|
-
"declarationMap": true,
|
|
5
|
-
"esModuleInterop": true,
|
|
6
|
-
"jsx": "react",
|
|
7
|
-
"lib": ["es2017", "dom"],
|
|
8
|
-
"module": "commonjs",
|
|
9
|
-
"moduleResolution": "node",
|
|
10
|
-
"newLine": "lf",
|
|
11
|
-
"outDir": "dist",
|
|
12
|
-
"skipLibCheck": true,
|
|
13
|
-
"sourceMap": true,
|
|
14
|
-
"strict": true,
|
|
15
|
-
"strictNullChecks": false,
|
|
16
|
-
"target": "es5"
|
|
17
|
-
},
|
|
18
|
-
"include": ["src/hooks/usePwa/index.ts"]
|
|
19
|
-
}
|