Feature/pwa detection (#1460)

* CSP header updates

Updated urls for content security policy to be passed

* pwa detection

* adding debugview to true

* pwa or webapp loaded event in GA

---------

Co-authored-by: Kylee Fields <43586156+kyleecodes@users.noreply.github.com>

Author: niksanand1717

app/layout.tsx

@@ -1,10 +1,24 @@
-import { ReactNode } from 'react';
+'use client';
+
+import { PWA_LOADED, WEB_APP_LOADED } from '@/lib/constants/events';
+import logEvent from '@/lib/utils/logEvent';
+import { storePWAStatus, usePWAStatus } from '@/lib/utils/pwaDetection';
+import { ReactNode, useEffect } from 'react';
 
 type Props = {
   children: ReactNode;
 };
 
 // Since we have a `not-found.tsx` page on the root, a layout file is required to pass children
 export default function RootLayout({ children }: Props) {
+  const pwaStatus = usePWAStatus();
+
+  useEffect(() => {
+    if (pwaStatus) {
+      // Store status for future reference
+      storePWAStatus(pwaStatus);
+      pwaStatus.isInstalled ? logEvent(PWA_LOADED) : logEvent(WEB_APP_LOADED);
+    }
+  }, [pwaStatus]);
   return children;
 }

components/layout/BaseLayout.tsx

@@ -100,7 +100,10 @@ export default async function BaseLayout({ children, locale }: BaseLayoutProps)
                     )}
                     <Analytics />
                   </body>
-                  <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID || ''} />
+                  <GoogleAnalytics
+                    debugMode={true}
+                    gaId={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID || ''}
+                  />
                 </StoryblokProvider>
               </ThemeProvider>
             </AppRouterCacheProvider>

lib/constants/events.ts

@@ -249,3 +249,7 @@ export const SIGN_UP_TODAY_BANNER_BUTTON_CLICKED = 'SIGN_UP_TODAY_BANNER_BUTTON_
 // PWA EVENTS
 export const PWA_INSTALLED = 'PWA_INSTALLED';
 export const PWA_DISMISSED = 'PWA_DISMISSED';
+
+// TYPE OF APP LOADED
+export const PWA_LOADED = 'PWA_LOADED';
+export const WEB_APP_LOADED = 'WEB_APP_LOADED';

lib/utils/pwaDetection.ts

@@ -0,0 +1,147 @@
+import { useEffect, useState } from 'react';
+
+export interface PWAStatus {
+  isInstalled: boolean;
+  installSource: string;
+  displayMode: string;
+  detectionMethods: Record<string, boolean>;
+}
+
+/**
+ * Detects if the app is running as an installed PWA
+ * @returns PWA status information or null if running on server
+ */
+export const detectPWA = (): PWAStatus | null => {
+  // Early return if running on server
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  // Basic display mode checks
+  const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
+  const isFullScreen = window.matchMedia('(display-mode: fullscreen)').matches;
+  const isMinimalUi = window.matchMedia('(display-mode: minimal-ui)').matches;
+  const isWindowControls = window.matchMedia('(display-mode: window-controls-overlay)').matches;
+
+  // Platform-specific checks
+  const iosPWA = Boolean((window.navigator as any).standalone);
+  const isWindowsApp = navigator.userAgent.includes('MSAppHost');
+  const isAndroidPWA = document.referrer.includes('android-app://');
+
+  // Technical checks
+  const hasServiceWorker = 'serviceWorker' in navigator;
+  const hasManifest = !!Array.from(document.querySelectorAll('link')).find(
+    (link) => link.rel === 'manifest',
+  );
+  const isHttps = window.location.protocol === 'https:';
+
+  // Combined determination
+  const detectionMethods = {
+    isStandalone,
+    isFullScreen,
+    isMinimalUi,
+    isWindowControls,
+    iosPWA,
+    isWindowsApp,
+    isAndroidPWA,
+    hasServiceWorker,
+    hasManifest,
+    isHttps,
+  };
+
+  const isInstalled =
+    isStandalone ||
+    isFullScreen ||
+    isMinimalUi ||
+    isWindowControls ||
+    iosPWA ||
+    isWindowsApp ||
+    isAndroidPWA;
+
+  // Determine display mode
+  let displayMode = 'browser';
+  if (isStandalone) displayMode = 'standalone';
+  if (isFullScreen) displayMode = 'fullscreen';
+  if (isMinimalUi) displayMode = 'minimal-ui';
+  if (isWindowControls) displayMode = 'window-controls-overlay';
+
+  // Determine install source
+  let installSource = 'browser';
+  if (isAndroidPWA) {
+    installSource = 'Android';
+  } else if (iosPWA) {
+    installSource = 'iOS';
+  } else if (isWindowsApp) {
+    installSource = 'Windows Store';
+  } else if (isWindowControls) {
+    installSource = 'Chrome Desktop';
+  } else if (isStandalone || isFullScreen || isMinimalUi) {
+    installSource = 'Home Screen';
+  }
+
+  return {
+    isInstalled,
+    installSource,
+    displayMode,
+    detectionMethods,
+  };
+};
+
+/**
+ * Hook to monitor PWA installation status
+ */
+export const usePWAStatus = () => {
+  const [pwaStatus, setPwaStatus] = useState<PWAStatus | null>(null);
+
+  useEffect(() => {
+    // Initial check
+    setPwaStatus(detectPWA());
+
+    // Set up listeners for display mode changes
+    const modeQueries = [
+      window.matchMedia('(display-mode: standalone)'),
+      window.matchMedia('(display-mode: fullscreen)'),
+      window.matchMedia('(display-mode: minimal-ui)'),
+      window.matchMedia('(display-mode: window-controls-overlay)'),
+    ];
+
+    const handleDisplayModeChange = () => {
+      setPwaStatus(detectPWA());
+    };
+
+    modeQueries.forEach((query) => {
+      query.addEventListener('change', handleDisplayModeChange);
+    });
+
+    return () => {
+      modeQueries.forEach((query) => {
+        query.removeEventListener('change', handleDisplayModeChange);
+      });
+    };
+  }, []);
+
+  return pwaStatus;
+};
+
+/**
+ * Store PWA status in local storage
+ */
+export const storePWAStatus = (status: PWAStatus | null): void => {
+  if (typeof localStorage === 'undefined' || !status) return;
+
+  localStorage.setItem('pwaInstalled', String(status.isInstalled));
+  localStorage.setItem('pwaInstallSource', status.installSource);
+  localStorage.setItem('pwaDisplayMode', status.displayMode);
+};
+
+/**
+ * Get previously stored PWA status
+ */
+export const getStoredPWAStatus = (): { isInstalled: boolean; source: string } | null => {
+  if (typeof localStorage === 'undefined') return null;
+
+  const isInstalled = localStorage.getItem('pwaInstalled') === 'true';
+  const source = localStorage.getItem('pwaInstallSource') || '';
+
+  return { isInstalled, source };
+};