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 { Button } from "@/components/ui/button";
|
||||
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 }> };
|
||||
|
||||
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() {
|
||||
return window.matchMedia("(display-mode: standalone)").matches ||
|
||||
@@ -24,6 +32,7 @@ export function SiteEntryPrompt() {
|
||||
const [permission, setPermission] = useState<NotificationPermission | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [dontAskAgain, setDontAskAgain] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Commission pages have their own prompt, tied to the signed-in user's messages.
|
||||
@@ -41,7 +50,7 @@ export function SiteEntryPrompt() {
|
||||
const frame = requestAnimationFrame(() => {
|
||||
setInstalled(installedNow);
|
||||
setPermission(canNotify ? Notification.permission : null);
|
||||
if (!sessionStorage.getItem(dismissedKey) &&
|
||||
if (!isPromptDismissed() &&
|
||||
((ios && !installedNow) || (canNotify && Notification.permission === "default"))) {
|
||||
setOpen(true);
|
||||
}
|
||||
@@ -50,7 +59,7 @@ export function SiteEntryPrompt() {
|
||||
const beforeInstall = (event: Event) => {
|
||||
event.preventDefault();
|
||||
setInstallEvent(event as InstallEvent);
|
||||
if (!sessionStorage.getItem(dismissedKey)) setOpen(true);
|
||||
if (!isPromptDismissed()) setOpen(true);
|
||||
};
|
||||
const onInstalled = () => {
|
||||
setInstalled(true);
|
||||
@@ -71,6 +80,12 @@ export function SiteEntryPrompt() {
|
||||
setOpen(false);
|
||||
}
|
||||
|
||||
function toggleDontAskAgain(checked: boolean) {
|
||||
setDontAskAgain(checked);
|
||||
if (checked) localStorage.setItem(dontAskAgainKey, "1");
|
||||
else localStorage.removeItem(dontAskAgainKey);
|
||||
}
|
||||
|
||||
async function install() {
|
||||
if (!installEvent) return;
|
||||
await installEvent.prompt();
|
||||
@@ -127,6 +142,10 @@ export function SiteEntryPrompt() {
|
||||
ติดตั้งและเปิดจากหน้าจอโฮมก่อน จึงจะเปิดการแจ้งเตือนได้บน iPhone/iPad
|
||||
</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>
|
||||
<Button type="button" variant="outline" disabled={busy} onClick={dismiss}>ไว้ก่อน</Button>
|
||||
{installEvent && !installed && <Button type="button" variant="secondary" disabled={busy} onClick={() => void install()}>ติดตั้งแอป</Button>}
|
||||
|
||||
Reference in New Issue
Block a user