[V0_FILE]typescriptreact:file="components/pwa-install-prompt.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { X, Download, Smartphone, Monitor, Share } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" interface BeforeInstallPromptEvent extends Event { prompt(): Promise userChoice: Promise<{ outcome: "accepted" | "dismissed" }> } export default function PWAInstallPrompt() { const [deferredPrompt, setDeferredPrompt] = useState(null) const [showPrompt, setShowPrompt] = useState(false) const [isIOS, setIsIOS] = useState(false) const [isStandalone, setIsStandalone] = useState(false) const [isAndroid, setIsAndroid] = useState(false) const [dismissed, setDismissed] = useState(false) useEffect(() => { // Check if user has already dismissed the prompt const hasBeenDismissed = localStorage.getItem("pwa-install-dismissed") if (hasBeenDismissed) { setDismissed(true) return } // Detect platform const userAgent = navigator.userAgent.toLowerCase() const isIOSDevice = /ipad|iphone|ipod/.test(userAgent) && !(window as any).MSStream const isAndroidDevice = /android/.test(userAgent) const isInStandalone = window.matchMedia("(display-mode: standalone)").matches || (window.navigator as any).standalone === true setIsIOS(isIOSDevice) setIsAndroid(isAndroidDevice) setIsStandalone(isInStandalone) // Don't show if already installed if (isInStandalone) { return } // Handle beforeinstallprompt event const handleBeforeInstallPrompt = (e: Event) => { e.preventDefault() setDeferredPrompt(e as BeforeInstallPromptEvent) // Show prompt after a short delay setTimeout(() => setShowPrompt(true), 2000) } // For iOS, show prompt after a delay since there's no beforeinstallprompt if (isIOSDevice) { setTimeout(() => setShowPrompt(true), 3000) } window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt) return () => { window.removeEventListener("beforeinstallprompt", handleBeforeInstallPrompt) } }, []) const handleInstallClick = async () => { if (deferredPrompt) { deferredPrompt.prompt() const { outcome } = await deferredPrompt.userChoice if (outcome === "accepted") { setDeferredPrompt(null) setShowPrompt(false) } } } const handleDismiss = () => { setShowPrompt(false) setDismissed(true) localStorage.setItem("pwa-install-dismissed", "true") } const handleNotNow = () => { setShowPrompt(false) // Show again in 24 hours setTimeout( () => { localStorage.removeItem("pwa-install-dismissed") }, 24 * 60 * 60 * 1000, ) } if (!showPrompt || dismissed || isStandalone) { return null } return (

{isIOS ? ( ) : isAndroid ? ( ) : ( )}

Install App

Get the full experience! Install our app for faster access and offline use.

{isIOS ? (

Tap the share button

Then "Add to Home Screen"

) : (

)}

) } [V0_FILE]typescriptreact:file="components/install-banner.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { X, Download, Zap } from "lucide-react" import { Button } from "@/components/ui/button" interface BeforeInstallPromptEvent extends Event { prompt(): Promise userChoice: Promise<{ outcome: "accepted" | "dismissed" }> } export default function InstallBanner() { const [deferredPrompt, setDeferredPrompt] = useState(null) const [showBanner, setShowBanner] = useState(false) const [isStandalone, setIsStandalone] = useState(false) useEffect(() => { // Check if already installed const isInStandalone = window.matchMedia("(display-mode: standalone)").matches || (window.navigator as any).standalone === true setIsStandalone(isInStandalone) // Check if banner was dismissed const bannerDismissed = localStorage.getItem("install-banner-dismissed") if (bannerDismissed || isInStandalone) { return } const handleBeforeInstallPrompt = (e: Event) => { e.preventDefault() setDeferredPrompt(e as BeforeInstallPromptEvent) setShowBanner(true) } window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt) return () => { window.removeEventListener("beforeinstallprompt", handleBeforeInstallPrompt) } }, []) const handleInstall = async () => { if (deferredPrompt) { deferredPrompt.prompt() const { outcome } = await deferredPrompt.userChoice if (outcome === "accepted") { setShowBanner(false) localStorage.setItem("install-banner-dismissed", "true") } } } const handleDismiss = () => { setShowBanner(false) localStorage.setItem("install-banner-dismissed", "true") } if (!showBanner || isStandalone) { return null } return (

Install our app for the best experience

Fast, reliable, and works offline

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import PWAInstallPrompt from "@/components/pwa-install-prompt" import InstallBanner from "@/components/install-banner" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Smartphone, Wifi, Zap, Shield } from "lucide-react" export default function HomePage() { return (

Welcome to Our PWA

Experience the power of a Progressive Web App with native-like features, offline support, and lightning-fast performance.

App-like Experience Install to your home screen for a native app experience Works Offline Access your content even when you're not connected Lightning Fast Optimized performance with instant loading Secure & Reliable HTTPS-secured with automatic updates

Ready to Get Started? Install our app now for the best experience across all your devices

Look for the install prompt or check your browser's menu for "Install App" or "Add to Home Screen" options.

) } [V0_FILE]typescriptreact:file="app/manifest.ts" isMerged="true" import type { MetadataRoute } from "next" export default function manifest(): MetadataRoute.Manifest { return { name: "PWA Install Demo", short_name: "PWA Demo", description: "A Progressive Web App with install prompts", start_url: "/", display: "standalone", background_color: "#ffffff", theme_color: "#3b82f6", icons: [ { src: "/icon-192x192.png", sizes: "192x192", type: "image/png", }, { src: "/icon-512x512.png", sizes: "512x512", type: "image/png", }, ], } } [V0_FILE]typescriptreact:file="components/haustidy-install-prompt.tsx" "use client" import { useState, useEffect } from "react" import { X, Download, ShoppingBag, Zap, Bell } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" interface BeforeInstallPromptEvent extends Event { prompt(): Promise userChoice: Promise<{ outcome: "accepted" | "dismissed" }> } export default function HaustidyInstallPrompt() { const [deferredPrompt, setDeferredPrompt] = useState(null) const [showPrompt, setShowPrompt] = useState(false) const [isStandalone, setIsStandalone] = useState(false) const [userEngagement, setUserEngagement] = useState(0) useEffect(() => { // Check if already installed const isInStandalone = window.matchMedia("(display-mode: standalone)").matches || (window.navigator as any).standalone === true setIsStandalone(isInStandalone) if (isInStandalone) return // Check if user has dismissed const dismissed = localStorage.getItem("haustidy-install-dismissed") if (dismissed) return // Track user engagement const trackEngagement = () => { setUserEngagement((prev) => prev + 1) } // Listen for engagement signals document.addEventListener("scroll", trackEngagement, { once: true }) document.addEventListener("click", trackEngagement) const handleBeforeInstallPrompt = (e: Event) => { e.preventDefault() setDeferredPrompt(e as BeforeInstallPromptEvent) } window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt) // Show prompt after user shows engagement (scrolled + clicked something) const checkEngagement = setInterval(() => { if (userEngagement >= 2 && (deferredPrompt || /ipad|iphone|ipod/.test(navigator.userAgent.toLowerCase()))) { setTimeout(() => setShowPrompt(true), 1000) clearInterval(checkEngagement) } }, 1000) return () => { window.removeEventListener("beforeinstallprompt", handleBeforeInstallPrompt) document.removeEventListener("scroll", trackEngagement) document.removeEventListener("click", trackEngagement) clearInterval(checkEngagement) } }, [deferredPrompt, userEngagement]) const handleInstall = async () => { if (deferredPrompt) { deferredPrompt.prompt() const { outcome } = await deferredPrompt.userChoice if (outcome === "accepted") { setShowPrompt(false) } } } const handleDismiss = () => { setShowPrompt(false) localStorage.setItem("haustidy-install-dismissed", "true") } const handleLater = () => { setShowPrompt(false) // Show again after 3 days setTimeout( () => { localStorage.removeItem("haustidy-install-dismissed") }, 3 * 24 * 60 * 60 * 1000, ) } if (!showPrompt || isStandalone) return null return (

Install Haustidy

Shop faster & get notifications

Faster checkout & browsing

Get notified of deals & restocks

) } [V0_FILE]typescriptreact:file="components/header-install-button.tsx" "use client" import { useState, useEffect } from "react" import { Smartphone } from "lucide-react" import { Button } from "@/components/ui/button" interface BeforeInstallPromptEvent extends Event { prompt(): Promise userChoice: Promise<{ outcome: "accepted" | "dismissed" }> } export default function HeaderInstallButton() { const [deferredPrompt, setDeferredPrompt] = useState(null) const [isStandalone, setIsStandalone] = useState(false) const [showButton, setShowButton] = useState(false) useEffect(() => { const isInStandalone = window.matchMedia("(display-mode: standalone)").matches || (window.navigator as any).standalone === true setIsStandalone(isInStandalone) if (isInStandalone) return const handleBeforeInstallPrompt = (e: Event) => { e.preventDefault() setDeferredPrompt(e as BeforeInstallPromptEvent) setShowButton(true) } // For iOS, show button after delay if (/ipad|iphone|ipod/.test(navigator.userAgent.toLowerCase())) { setTimeout(() => setShowButton(true), 5000) } window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt) return () => { window.removeEventListener("beforeinstallprompt", handleBeforeInstallPrompt) } }, []) const handleInstall = async () => { if (deferredPrompt) { deferredPrompt.prompt() const { outcome } = await deferredPrompt.userChoice if (outcome === "accepted") { setShowButton(false) } } } if (!showButton || isStandalone) return null return ( ) } [V0_FILE]typescriptreact:file="components/cart-install-prompt.tsx" "use client" import { useState, useEffect } from "react" import { Download, ShoppingBag, X } from "lucide-react" import { Button } from "@/components/ui/button" interface BeforeInstallPromptEvent extends Event { prompt(): Promise userChoice: Promise<{ outcome: "accepted" | "dismissed" }> } interface CartInstallPromptProps { cartItemCount: number } export default function CartInstallPrompt({ cartItemCount }: CartInstallPromptProps) { const [deferredPrompt, setDeferredPrompt] = useState(null) const [showPrompt, setShowPrompt] = useState(false) const [isStandalone, setIsStandalone] = useState(false) useEffect(() => { const isInStandalone = window.matchMedia("(display-mode: standalone)").matches || (window.navigator as any).standalone === true setIsStandalone(isInStandalone) if (isInStandalone) return const dismissed = localStorage.getItem("cart-install-dismissed") if (dismissed) return const handleBeforeInstallPrompt = (e: Event) => { e.preventDefault() setDeferredPrompt(e as BeforeInstallPromptEvent) } window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt) // Show prompt when user has items in cart if (cartItemCount > 0 && (deferredPrompt || /ipad|iphone|ipod/.test(navigator.userAgent.toLowerCase()))) { setTimeout(() => setShowPrompt(true), 2000) } return () => { window.removeEventListener("beforeinstallprompt", handleBeforeInstallPrompt) } }, [cartItemCount, deferredPrompt]) const handleInstall = async () => { if (deferredPrompt) { deferredPrompt.prompt() const { outcome } = await deferredPrompt.userChoice if (outcome === "accepted") { setShowPrompt(false) } } } const handleDismiss = () => { setShowPrompt(false) localStorage.setItem("cart-install-dismissed", "true") } if (!showPrompt || isStandalone || cartItemCount === 0) return null return (

Install for faster checkout

Save your cart and get instant access

) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import HeaderInstallButton from "@/components/header-install-button" import HaustidyInstallPrompt from "@/components/haustidy-install-prompt" import CartInstallPrompt from "@/components/cart-install-prompt" export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {/* Your existing header */}

Haustidy

{/* Your existing search, account, cart icons */}

{children} {/* Install prompts */} ) }