import { useState, useEffect } from 'react' interface BeforeInstallPromptEvent extends Event { prompt: () => Promise userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }> } export function usePWAInstall() { const [deferredPrompt, setDeferredPrompt] = useState(null) const [isInstallable, setIsInstallable] = useState(false) const [isInstalled, setIsInstalled] = useState(false) useEffect(() => { // Check if app is already installed if (window.matchMedia('(display-mode: standalone)').matches) { setIsInstalled(true) return } // Listen for the beforeinstallprompt event const handleBeforeInstallPrompt = (e: Event) => { e.preventDefault() const installPromptEvent = e as BeforeInstallPromptEvent setDeferredPrompt(installPromptEvent) setIsInstallable(true) } // Listen for successful installation const handleAppInstalled = () => { setIsInstalled(true) setIsInstallable(false) setDeferredPrompt(null) } window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt) window.addEventListener('appinstalled', handleAppInstalled) return () => { window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt) window.removeEventListener('appinstalled', handleAppInstalled) } }, []) const installApp = async () => { if (!deferredPrompt) { return false } try { await deferredPrompt.prompt() const choiceResult = await deferredPrompt.userChoice if (choiceResult.outcome === 'accepted') { setIsInstallable(false) setDeferredPrompt(null) return true } else { return false } } catch (error) { console.error('Error installing PWA:', error) return false } } return { isInstallable, isInstalled, installApp, } }