"use client"; import React, { useEffect, useState } from "react"; import { Button } from "@/components/ui/button"; import { Download } from "lucide-react"; import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardAction, } from "@/components/ui/card"; import Cookies from "js-cookie"; interface CustomWindow extends Window { MSStream?: unknown; } interface BeforeInstallPromptEvent extends Event { prompt: () => void; userChoice: Promise<{ outcome: "accepted" | "dismissed"; platform: string }>; } export default function InstallPrompt() { const [isIOS, setIsIOS] = useState(false); const [isStandalone, setIsStandalone] = useState(false); const [deferredPrompt, setDeferredPrompt] = useState(null); const [isDismissed, setIsDismissed] = useState(false); useEffect(() => { const customWindow = window as CustomWindow; setIsIOS( /iPad|iPhone|iPod/.test(navigator.userAgent) && !customWindow.MSStream ); setIsStandalone(window.matchMedia("(display-mode: standalone)").matches); const dismissed = Cookies.get("install_prompt_dismissed"); if (dismissed) { setIsDismissed(true); } const handleBeforeInstallPrompt = (e: Event) => { e.preventDefault(); setDeferredPrompt(e as BeforeInstallPromptEvent); }; window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt); return () => { window.removeEventListener( "beforeinstallprompt", handleBeforeInstallPrompt ); }; }, []); const handleInstallClick = async () => { if (!deferredPrompt) return; deferredPrompt.prompt(); const { outcome } = await deferredPrompt.userChoice; if (outcome === "accepted") { console.log("User accepted the install prompt"); } else { console.log("User dismissed the install prompt"); Cookies.set("install_prompt_dismissed", "true", { expires: 7 }); } setDeferredPrompt(null); }; const handleCloseClick = () => { setIsStandalone(true); Cookies.set("install_prompt_dismissed", "true", { expires: 7 }); }; if (isStandalone || (!isIOS && !deferredPrompt) || isDismissed) { return null; } return (
Install Thoughts Get the full app experience on your device. {!isIOS && deferredPrompt && ( )} {isIOS && (

To install, tap the Share icon and then "Add to Home Screen" .

)}
); }