fix: integrate js-cookie for install prompt dismissal handling
All checks were successful
Build and Deploy Thoughts / build-and-deploy-local (push) Successful in 1m35s
All checks were successful
Build and Deploy Thoughts / build-and-deploy-local (push) Successful in 1m35s
This commit is contained in:
@@ -11,6 +11,7 @@ import {
|
|||||||
CardContent,
|
CardContent,
|
||||||
CardAction,
|
CardAction,
|
||||||
} from "@/components/ui/card";
|
} from "@/components/ui/card";
|
||||||
|
import Cookies from "js-cookie";
|
||||||
|
|
||||||
interface CustomWindow extends Window {
|
interface CustomWindow extends Window {
|
||||||
MSStream?: unknown;
|
MSStream?: unknown;
|
||||||
@@ -26,15 +27,20 @@ export default function InstallPrompt() {
|
|||||||
const [isStandalone, setIsStandalone] = useState(false);
|
const [isStandalone, setIsStandalone] = useState(false);
|
||||||
const [deferredPrompt, setDeferredPrompt] =
|
const [deferredPrompt, setDeferredPrompt] =
|
||||||
useState<BeforeInstallPromptEvent | null>(null);
|
useState<BeforeInstallPromptEvent | null>(null);
|
||||||
|
const [isDismissed, setIsDismissed] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Cast window to our custom type instead of 'any'
|
|
||||||
const customWindow = window as CustomWindow;
|
const customWindow = window as CustomWindow;
|
||||||
setIsIOS(
|
setIsIOS(
|
||||||
/iPad|iPhone|iPod/.test(navigator.userAgent) && !customWindow.MSStream
|
/iPad|iPhone|iPod/.test(navigator.userAgent) && !customWindow.MSStream
|
||||||
);
|
);
|
||||||
setIsStandalone(window.matchMedia("(display-mode: standalone)").matches);
|
setIsStandalone(window.matchMedia("(display-mode: standalone)").matches);
|
||||||
|
|
||||||
|
const dismissed = Cookies.get("install_prompt_dismissed");
|
||||||
|
if (dismissed) {
|
||||||
|
setIsDismissed(true);
|
||||||
|
}
|
||||||
|
|
||||||
const handleBeforeInstallPrompt = (e: Event) => {
|
const handleBeforeInstallPrompt = (e: Event) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
setDeferredPrompt(e as BeforeInstallPromptEvent);
|
setDeferredPrompt(e as BeforeInstallPromptEvent);
|
||||||
@@ -58,11 +64,17 @@ export default function InstallPrompt() {
|
|||||||
console.log("User accepted the install prompt");
|
console.log("User accepted the install prompt");
|
||||||
} else {
|
} else {
|
||||||
console.log("User dismissed the install prompt");
|
console.log("User dismissed the install prompt");
|
||||||
|
Cookies.set("install_prompt_dismissed", "true", { expires: 7 });
|
||||||
}
|
}
|
||||||
setDeferredPrompt(null);
|
setDeferredPrompt(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
if (isStandalone || (!isIOS && !deferredPrompt)) {
|
const handleCloseClick = () => {
|
||||||
|
setIsStandalone(true);
|
||||||
|
Cookies.set("install_prompt_dismissed", "true", { expires: 7 });
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isStandalone || (!isIOS && !deferredPrompt) || isDismissed) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -79,7 +91,7 @@ export default function InstallPrompt() {
|
|||||||
size="sm"
|
size="sm"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
className="absolute top-2 right-2"
|
className="absolute top-2 right-2"
|
||||||
onClick={() => setIsStandalone(true)}
|
onClick={handleCloseClick}
|
||||||
>
|
>
|
||||||
×
|
×
|
||||||
</Button>
|
</Button>
|
||||||
|
Reference in New Issue
Block a user