install pwa

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<HTMLDivElement> | undefined;
 };
 
+type BeforeInstallPromptEvent = Event & {
+    prompt: () => Promise<void>;
+    userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>;
+};
+
 function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeState }: Props) {
     const menuStateMemo = useMemo(() => menuState, [menuState]);
     const closeRef = useRef<HTMLDivElement>(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<BeforeInstallPromptEvent | null>(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')}
                 </p>
 
-                <Button onClick={() => { }} className="text-sm mt-8">
+                <Button onClick={handleInstallPWA} className="text-sm mt-8" disabled={!deferredPrompt}>
                     <span className="font-light">{tInstallPwaModal('ButtonOk')}</span>
                 </Button>