Files
boris/src/hooks/usePWAInstall.ts

73 lines
1.9 KiB
TypeScript

import { useState, useEffect } from 'react'
interface BeforeInstallPromptEvent extends Event {
prompt: () => Promise<void>
userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>
}
export function usePWAInstall() {
const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(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,
}
}