feat(storefront): Add web push notifications support with Firebase Cloud Messaging

Implements composable and utilities for Firebase Cloud Messaging integration:
- Composable use-notification-permission with permission handling and foreground listener setup
- Firebase-specific implementation in firebase-notifications script with async imports
- VAPID key support in Firebase config type definition

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: leomp12

packages/storefront/client.d.ts

@@ -18,6 +18,7 @@ interface Window {
     messagingSenderId: string,
     appId: string,
     measurementId?: string,
+    vapidKey?: string,
   };
   $reCaptchaSiteKey?: string;
   ECOM_STORE_ID: number;

packages/storefront/src/lib/composables/use-notification-permission.ts

@@ -0,0 +1,96 @@
+import { ref, onMounted } from 'vue';
+
+export type Props = {
+  delayBeforePrompt?: number;
+  daysBeforeReprompt?: number;
+  onTokenReceived?: (token: string) => void | Promise<void>;
+  registerFn?: () => Promise<string | null>;
+  setupListenerFn?: (callback: (payload: any) => void) => Promise<void>;
+}
+
+const useNotificationPermission = (props: Props = {}) => {
+  const {
+    delayBeforePrompt = 3000,
+    daysBeforeReprompt = 7,
+    onTokenReceived,
+    registerFn,
+    setupListenerFn,
+  } = props;
+  const isVisible = ref(false);
+  const isRequesting = ref(false);
+
+  const checkPermission = () => {
+    if (!('Notification' in window)) return false;
+    if (Notification.permission === 'granted') return false;
+    if (Notification.permission === 'denied') return false;
+    const dismissed = localStorage.getItem('notification-prompt-dismissed');
+    if (dismissed) {
+      const dismissedAt = parseInt(dismissed, 10);
+      const daysSinceDismiss = (Date.now() - dismissedAt) / (1000 * 60 * 60 * 24);
+      if (daysSinceDismiss < daysBeforeReprompt) return false;
+    }
+    return true;
+  };
+
+  const requestPermission = async () => {
+    if (!registerFn) {
+      console.error('registerFn not provided');
+      return;
+    }
+    isRequesting.value = true;
+    try {
+      const token = await registerFn();
+      if (token) {
+        if (onTokenReceived) {
+          await onTokenReceived(token);
+        }
+        isVisible.value = false;
+        localStorage.removeItem('notification-prompt-dismissed');
+      }
+    } catch (error) {
+      console.error('Error enabling notifications:', error);
+    } finally {
+      isRequesting.value = false;
+    }
+  };
+
+  const dismiss = () => {
+    isVisible.value = false;
+    localStorage.setItem('notification-prompt-dismissed', Date.now().toString());
+  };
+
+  const setupForegroundListener = async () => {
+    if (!setupListenerFn) return;
+    await setupListenerFn((payload) => {
+      console.log('Foreground notification:', payload);
+      if (payload.notification) {
+        const { title, body, icon } = payload.notification;
+        // eslint-disable-next-line no-new
+        new Notification(title || 'Nova notificação', {
+          body,
+          icon,
+          data: payload.data,
+        });
+      }
+    });
+  };
+  onMounted(() => {
+    setTimeout(() => {
+      isVisible.value = checkPermission();
+    }, delayBeforePrompt);
+    setupForegroundListener();
+  });
+
+  return {
+    isVisible,
+    isRequesting,
+    requestPermission,
+    dismiss,
+  };
+};
+
+export default useNotificationPermission;
+
+export {
+  useNotificationPermission,
+};

packages/storefront/src/lib/scripts/firebase-notifications.ts

@@ -0,0 +1,52 @@
+export const registerNotification = async (): Promise<string | null> => {
+  try {
+    const vapidKey = window.$firebaseConfig?.vapidKey;
+    if (!vapidKey) {
+      console.error('VAPID key not configured');
+      return null;
+    }
+
+    const permission = await Notification.requestPermission();
+    if (permission !== 'granted') {
+      console.warn('Notification permission denied');
+      return null;
+    }
+
+    const { firebaseApp } = await import('./firebase-app');
+    const { getMessaging, getToken } = await import('firebase/messaging');
+
+    const messaging = getMessaging(firebaseApp);
+    const registration = await navigator.serviceWorker.register('/firebase-messaging-sw.js');
+    const token = await getToken(messaging, {
+      vapidKey,
+      serviceWorkerRegistration: registration,
+    });
+
+    if (token) {
+      console.log('FCM token:', token);
+      return token;
+    }
+    console.warn('Failed to get FCM token');
+    return null;
+  } catch (error) {
+    console.error('Error requesting notification permission:', error);
+    return null;
+  }
+};
+
+export const setupForegroundListener = async (
+  callback: (payload: any) => void,
+): Promise<void> => {
+  if (import.meta.env.SSR) return;
+  if (Notification.permission !== 'granted') return;
+
+  try {
+    const { firebaseApp } = await import('./firebase-app');
+    const { getMessaging, onMessage } = await import('firebase/messaging');
+
+    const messaging = getMessaging(firebaseApp);
+    onMessage(messaging, callback);
+  } catch (error) {
+    console.error('Error setting up foreground listener:', error);
+  }
+};