feat: Add desktop PWA install banner (#1209) (#1484)

* feat: Add desktop PWA install banner (#1209)

Introduce a PWA installation prompt banenr for desktop layouts.
The banner will be integrated in Header and HomeHeader components,
to ensure to be displayed on top of each page.

* fix: pwa banner flicker

This commit fixes an issue where the usePWA hook
led to an initial falsy 'generic' bannerState.

The generic bannerState will actualy render the banner.
The 'hidden' bannerState which will prevent the rendering
was detected with a short delay - which led to shortly render
the banner (flicker).

The fix is to adjust the defaultBanner state to hidden instead
of generic + to explicit check for 'generic' bannerState conditions
to be true.

* minor design tweak

---------

Co-authored-by: annarhughes <annaraehughes@live.co.uk>

Author: MartinGodzina

components/banner/DesktopPwaBanner.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import usePWA from '@/lib/hooks/usePwa';
+import AddBoxOutlinedIcon from '@mui/icons-material/AddBoxOutlined';
+import IosShareIcon from '@mui/icons-material/IosShare';
+import { Button, Paper, Stack, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { useTranslations } from 'next-intl';
+
+export const DesktopPwaBanner = () => {
+  const { bannerState, declineInstallation, install } = usePWA();
+  const t = useTranslations('Shared.pwaBanner');
+  const theme = useTheme();
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
+
+  if (isSmallScreen || bannerState === 'Hidden') return null;
+
+  return (
+    <Paper
+      elevation={1}
+      sx={{
+        px: 2,
+        py: 1.5,
+        display: 'flex',
+        alignItems: 'center',
+        gap: bannerState === 'Generic' ? 0 : '1rem',
+        justifyContent: bannerState === 'Generic' ? 'space-between' : 'flex-start',
+        backgroundColor: 'common.white',
+        width: '100%',
+      }}
+    >
+      <Typography variant="body2" sx={{ fontWeight: 500, whiteSpace: 'nowrap' }}>
+        {t(bannerState === 'Generic' ? 'mobileDescription' : 'iosDescription')}
+      </Typography>
+
+      {bannerState === 'Generic' ? (
+        <Stack direction="row" spacing={2}>
+          <Button
+            onClick={declineInstallation}
+            variant="outlined"
+            color="secondary"
+            size="small"
+            sx={{ px: 2, minWidth: 'auto', whiteSpace: 'nowrap' }}
+          >
+            {t('button-decline-label')}
+          </Button>
+          <Button
+            onClick={install}
+            variant="contained"
+            color="secondary"
+            size="small"
+            sx={{ px: 2, minWidth: 'auto', whiteSpace: 'nowrap' }}
+          >
+            {t('button-install-label')}
+          </Button>
+        </Stack>
+      ) : (
+        <Stack direction="row" gap={2}>
+          <Stack alignItems="center" direction="row" gap={1}>
+            <Typography variant="body1">{t('iosStep1')}</Typography>
+            <IosShareIcon />
+          </Stack>
+          <Stack alignItems="center" direction="row" gap={1}>
+            <Typography variant="body1">{t('iosStep2')}</Typography>
+            <AddBoxOutlinedIcon />
+          </Stack>
+        </Stack>
+      )}
+    </Paper>
+  );
+};

components/layout/Header.tsx

@@ -13,6 +13,7 @@ import { ISbRichtext } from '@storyblok/react/rsc';
 import { useTranslations } from 'next-intl';
 import Image, { StaticImageData } from 'next/image';
 import { render } from 'storyblok-rich-text-react-renderer';
+import { DesktopPwaBanner } from '../banner/DesktopPwaBanner';
 
 export interface HeaderProps {
   title: string;
@@ -106,6 +107,7 @@ const Header = (props: HeaderProps) => {
 
   return (
     <Container sx={headerContainerStyle}>
+      <DesktopPwaBanner />
       <Box sx={textContainerStyle}>
         <IconButton
           sx={backButtonStyle}

components/layout/HomeHeader.tsx

@@ -11,6 +11,7 @@ import { useTranslations } from 'next-intl';
 import Image, { StaticImageData } from 'next/image';
 import * as React from 'react';
 import { render } from 'storyblok-rich-text-react-renderer';
+import { DesktopPwaBanner } from '../banner/DesktopPwaBanner';
 
 interface HeaderProps {
   title:
@@ -74,6 +75,7 @@ const Header = (props: HeaderProps) => {
 
   return (
     <Container sx={headerContainerStyles}>
+      <DesktopPwaBanner />
       <Box sx={textContainerStyle}>
         <Box sx={textContentStyle}>
           <Typography variant="h1" component="h1" mb={3}>

lib/hooks/usePWA.test.ts

@@ -46,11 +46,6 @@ describe('usePWA hook', () => {
       })),
     });
 
-    Object.defineProperty(window, 'navigator', {
-      value: { userAgent: 'iphone' },
-      writable: true,
-    });
-
     Cookies.get = jest.fn();
     Cookies.set = jest.fn();
 
@@ -71,6 +66,7 @@ describe('usePWA hook', () => {
   });
 
   it('should show Generic banner initially', () => {
+    (window as any).beforeinstallpromptEvent = {};
     Cookies.get = jest.fn().mockReturnValue(undefined);
 
     const { result } = renderHook(() => usePWA());
@@ -151,8 +147,10 @@ describe('usePWA hook', () => {
     const addEventListenerSpy = jest.spyOn(window, 'addEventListener');
     const { result } = renderHook(() => usePWA());
 
-    // Simulate install event
     act(() => {
+      // Simulate user click on pwa banner (custom banner ui) install button - this will open the native browser install modal
+      result.current.install();
+      // Simulate user clicked on install on native pwa modal - this will fire an appinstalled event.
       const handler = addEventListenerSpy.mock.calls.find(
         ([event]) => event === 'appinstalled',
       )?.[1] as EventListener;

lib/hooks/usePwa.ts

@@ -22,16 +22,11 @@ interface BeforeInstallPromptEvent extends Event {
 const PWA_BANNER_DISMISSED = 'pwaBannerDismissed';
 
 export default function usePWA() {
-  const [bannerState, setBannerState] = useState<PwaBannerState>('Generic');
+  const [bannerState, setBannerState] = useState<PwaBannerState>('Hidden');
   const [installAttempted, setInstallAttempted] = useState(false);
   const dispatch = useAppDispatch();
-
   const user = useTypedSelector((state) => state.user);
   const userCookiesAccepted = user.cookiesAccepted || Cookies.get('analyticsConsent') === 'true';
-  const isIos = useMemo(
-    () => /iphone|ipad|ipod/.test(window.navigator.userAgent.toLowerCase()),
-    [],
-  );
 
   const getPwaMetaData = useMemo(() => {
     const userAgent = window.navigator.userAgent;
@@ -89,6 +84,9 @@ export default function usePWA() {
     const pwaBannerDismissedCookie = Boolean(Cookies.get(PWA_BANNER_DISMISSED));
     const isStandalone =
       typeof window !== 'undefined' && window.matchMedia('(display-mode: standalone)').matches;
+    const isIos =
+      typeof window !== 'undefined' && /iphone|ipad|ipod/.test(window?.navigator.userAgent.toLowerCase());
+
     const isHidden =
       pwaBannerDismissedCookie ||
       user.pwaDismissed ||
@@ -97,13 +95,14 @@ export default function usePWA() {
 
     if (isHidden && bannerState !== 'Hidden') setBannerState('Hidden');
     if (installAttempted && isIos && bannerState !== 'Ios') setBannerState('Ios');
+    if (!isHidden && !installAttempted && bannerState !== 'Generic') setBannerState('Generic');
 
     window.addEventListener('appinstalled', appInstalledCb);
 
     return () => {
       window.removeEventListener('appinstalled', appInstalledCb);
     };
-  }, [isIos, user.pwaDismissed, installAttempted, bannerState]);
+  }, [user.pwaDismissed, installAttempted, bannerState]);
 
   return {
     declineInstallation,