diff --git a/src/components/menu/SideMenu.tsx b/src/components/menu/SideMenu.tsx index 5dec5bd..bfaa756 100644 --- a/src/components/menu/SideMenu.tsx +++ b/src/components/menu/SideMenu.tsx @@ -1,6 +1,6 @@ 'use client'; -import React, { useMemo, useRef } from 'react'; +import React, { useMemo, useRef, useState, useEffect } from 'react'; import { motion, Variants } from 'framer-motion'; import SideMenuItem from './SideMenuItem'; import NoteBoardIcon from '../icons/NoteBoardIcon'; @@ -52,6 +52,11 @@ type Props = { togglenightModeState: React.MouseEventHandler | undefined; }; +type BeforeInstallPromptEvent = Event & { + prompt: () => Promise; + userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>; +}; + function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeState }: Props) { const menuStateMemo = useMemo(() => menuState, [menuState]); const closeRef = useRef(null); @@ -59,6 +64,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS const { state: logoutModal, toggle: toggleLogoutModal } = useToggle(); const { state: shareModal, toggle: toggleShareModal } = useToggle(); const { state: installPwaModal, toggle: toggleInstallPwaModal } = useToggle(); + const [deferredPrompt, setDeferredPrompt] = useState(null); const params = useParams(); const { name } = params; @@ -78,6 +84,33 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS visible: { x: 0, transition: { delay: 0.075, duration: 0.1, ease: 'easeInOut' } } }; + useEffect(() => { + const handleBeforeInstallPrompt = (e: Event) => { + e.preventDefault(); + setDeferredPrompt(e as BeforeInstallPromptEvent); + }; + + window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt); + + return () => { + window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt); + }; + }, []); + + const handleInstallPWA = async () => { + if (!deferredPrompt) { + return; + } + + deferredPrompt.prompt(); + const { outcome } = await deferredPrompt.userChoice; + + if (outcome === 'accepted') { + setDeferredPrompt(null); + toggleInstallPwaModal(); + } + }; + const hrefOnClicks = [ { href: '?logout', handler: toggleLogoutModal }, { href: '?share', handler: toggleShareModal }, @@ -264,7 +297,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS {tInstallPwaModal('Description')}

-