feat : add dont ask me again for install web app
This commit is contained in:
@@ -6,10 +6,18 @@ import { usePathname } from "next/navigation";
|
|||||||
import { syncCommissionPush } from "@/components/commission/push-client";
|
import { syncCommissionPush } from "@/components/commission/push-client";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||||
|
import { Field, FieldLabel } from "@/components/ui/field";
|
||||||
|
import { Switch } from "@/components/ui/switch";
|
||||||
|
|
||||||
type InstallEvent = Event & { prompt: () => Promise<void>; userChoice: Promise<{ outcome: string }> };
|
type InstallEvent = Event & { prompt: () => Promise<void>; userChoice: Promise<{ outcome: string }> };
|
||||||
|
|
||||||
const dismissedKey = "site-entry-prompt-dismissed";
|
const dismissedKey = "site-entry-prompt-dismissed";
|
||||||
|
const dontAskAgainKey = "site-entry-prompt-dont-ask-again";
|
||||||
|
|
||||||
|
function isPromptDismissed() {
|
||||||
|
return sessionStorage.getItem(dismissedKey) === "1" ||
|
||||||
|
localStorage.getItem(dontAskAgainKey) === "1";
|
||||||
|
}
|
||||||
|
|
||||||
function isInstalled() {
|
function isInstalled() {
|
||||||
return window.matchMedia("(display-mode: standalone)").matches ||
|
return window.matchMedia("(display-mode: standalone)").matches ||
|
||||||
@@ -24,6 +32,7 @@ export function SiteEntryPrompt() {
|
|||||||
const [permission, setPermission] = useState<NotificationPermission | null>(null);
|
const [permission, setPermission] = useState<NotificationPermission | null>(null);
|
||||||
const [busy, setBusy] = useState(false);
|
const [busy, setBusy] = useState(false);
|
||||||
const [error, setError] = useState("");
|
const [error, setError] = useState("");
|
||||||
|
const [dontAskAgain, setDontAskAgain] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Commission pages have their own prompt, tied to the signed-in user's messages.
|
// Commission pages have their own prompt, tied to the signed-in user's messages.
|
||||||
@@ -41,7 +50,7 @@ export function SiteEntryPrompt() {
|
|||||||
const frame = requestAnimationFrame(() => {
|
const frame = requestAnimationFrame(() => {
|
||||||
setInstalled(installedNow);
|
setInstalled(installedNow);
|
||||||
setPermission(canNotify ? Notification.permission : null);
|
setPermission(canNotify ? Notification.permission : null);
|
||||||
if (!sessionStorage.getItem(dismissedKey) &&
|
if (!isPromptDismissed() &&
|
||||||
((ios && !installedNow) || (canNotify && Notification.permission === "default"))) {
|
((ios && !installedNow) || (canNotify && Notification.permission === "default"))) {
|
||||||
setOpen(true);
|
setOpen(true);
|
||||||
}
|
}
|
||||||
@@ -50,7 +59,7 @@ export function SiteEntryPrompt() {
|
|||||||
const beforeInstall = (event: Event) => {
|
const beforeInstall = (event: Event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
setInstallEvent(event as InstallEvent);
|
setInstallEvent(event as InstallEvent);
|
||||||
if (!sessionStorage.getItem(dismissedKey)) setOpen(true);
|
if (!isPromptDismissed()) setOpen(true);
|
||||||
};
|
};
|
||||||
const onInstalled = () => {
|
const onInstalled = () => {
|
||||||
setInstalled(true);
|
setInstalled(true);
|
||||||
@@ -71,6 +80,12 @@ export function SiteEntryPrompt() {
|
|||||||
setOpen(false);
|
setOpen(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function toggleDontAskAgain(checked: boolean) {
|
||||||
|
setDontAskAgain(checked);
|
||||||
|
if (checked) localStorage.setItem(dontAskAgainKey, "1");
|
||||||
|
else localStorage.removeItem(dontAskAgainKey);
|
||||||
|
}
|
||||||
|
|
||||||
async function install() {
|
async function install() {
|
||||||
if (!installEvent) return;
|
if (!installEvent) return;
|
||||||
await installEvent.prompt();
|
await installEvent.prompt();
|
||||||
@@ -127,6 +142,10 @@ export function SiteEntryPrompt() {
|
|||||||
ติดตั้งและเปิดจากหน้าจอโฮมก่อน จึงจะเปิดการแจ้งเตือนได้บน iPhone/iPad
|
ติดตั้งและเปิดจากหน้าจอโฮมก่อน จึงจะเปิดการแจ้งเตือนได้บน iPhone/iPad
|
||||||
</p>}
|
</p>}
|
||||||
{error && <p role="alert" className="text-sm text-destructive">{error}</p>}
|
{error && <p role="alert" className="text-sm text-destructive">{error}</p>}
|
||||||
|
<Field orientation="horizontal">
|
||||||
|
<FieldLabel htmlFor="site-entry-dont-ask-again">ไม่ต้องถามอีก</FieldLabel>
|
||||||
|
<Switch id="site-entry-dont-ask-again" checked={dontAskAgain} onCheckedChange={toggleDontAskAgain} />
|
||||||
|
</Field>
|
||||||
<DialogFooter>
|
<DialogFooter>
|
||||||
<Button type="button" variant="outline" disabled={busy} onClick={dismiss}>ไว้ก่อน</Button>
|
<Button type="button" variant="outline" disabled={busy} onClick={dismiss}>ไว้ก่อน</Button>
|
||||||
{installEvent && !installed && <Button type="button" variant="secondary" disabled={busy} onClick={() => void install()}>ติดตั้งแอป</Button>}
|
{installEvent && !installed && <Button type="button" variant="secondary" disabled={busy} onClick={() => void install()}>ติดตั้งแอป</Button>}
|
||||||
|
|||||||
Reference in New Issue
Block a user