web-manager 4.0.14 → 4.0.16

package/dist/modules/notifications.js

@@ -6,8 +6,8 @@ class Notifications {
 
   // Check if notifications are supported
   isSupported() {
-    return 'Notification' in window && 
-           'serviceWorker' in navigator && 
+    return 'Notification' in window &&
+           'serviceWorker' in navigator &&
            this.manager.firebaseMessaging !== undefined;
   }
 
@@ -79,7 +79,7 @@ class Notifications {
       storage.set('notifications', {
         subscribed: true,
         token: token,
-        subscribedAt: new Date().toISOString(),
+        timestamp: new Date().toISOString(),
         uid: this.manager.auth().getUser()?.uid || null
       });
 
@@ -102,7 +102,7 @@ class Notifications {
 
       const { deleteToken } = await import('firebase/messaging');
       const messaging = this.manager.firebaseMessaging;
-      
+
       if (messaging) {
         await deleteToken(messaging);
       }
@@ -121,7 +121,7 @@ class Notifications {
   // Request permission (without subscribing)
   async requestPermission() {
     try {
-      if (!('Notification' in window)) {
+      if (!this.isSupported()) {
         throw new Error('Notifications not supported');
       }
 
@@ -147,7 +147,7 @@ class Notifications {
 
       const { getToken } = await import('firebase/messaging');
       const swRegistration = this.manager.state.serviceWorker;
-      
+
       return await getToken(messaging, {
         serviceWorkerRegistration: swRegistration
       });
@@ -166,7 +166,7 @@ class Notifications {
 
       const { onMessage } = await import('firebase/messaging');
       const messaging = this.manager.firebaseMessaging;
-      
+
       if (!messaging) {
         return () => {};
       }
@@ -191,38 +191,55 @@ class Notifications {
 
       const { onMessage } = await import('firebase/messaging');
       const messaging = this.manager.firebaseMessaging;
-      
+
       if (!messaging) {
         return () => {};
       }
 
       return onMessage(messaging, (payload) => {
         console.log('Foreground message received:', payload);
-        
-        // Show notification if app is in foreground
-        if (payload.notification) {
-          const { title, body, icon, badge, image } = payload.notification;
-          const clickAction = payload.data?.click_action || payload.notification.click_action;
-          
+
+        // Extract notification data - handle both payload.notification and payload.data formats
+        const notificationData = payload.notification || payload.data || {};
+        const { title, body, icon, badge, image, click_action, url, tag } = notificationData;
+
+        // Determine the click URL (prioritize click_action, then url, then data.url)
+        const clickUrl = click_action || url || payload.data?.click_action || payload.data?.url;
+
+        // Show notification if we have at least a title
+        if (title) {
           const notification = new Notification(title, {
-            body,
-            icon,
-            badge,
-            image,
-            data: payload.data,
-            requireInteraction: false,
+            body: body || '',
+            icon: icon || '/favicon.ico',
+            badge: badge,
+            image: image,
+            tag: tag || 'default',
+            data: { ...payload.data, clickUrl },
+            requireInteraction: true,
+            renotify: true
           });
 
           notification.onclick = (event) => {
             event.preventDefault();
-            if (clickAction) {
-              window.open(clickAction, '_blank');
+
+            // Focus or open the target window
+            if (clickUrl) {
+              // Try to find an existing window/tab with this URL
+              window.focus();
+              window.open(clickUrl, '_blank');
+            } else {
+              // Just focus the current window if no URL
+              window.focus();
             }
+
             notification.close();
           };
         }
 
-        callback(payload);
+        // Call the user's callback with the full payload
+        if (callback) {
+          callback(payload);
+        }
       });
     } catch (error) {
       console.error('Message listener error:', error);
@@ -230,51 +247,136 @@ class Notifications {
     }
   }
 
+  // Sync subscription when auth state changes
+  async syncSubscription() {
+    try {
+      // Check if we have a stored notification token
+      const storage = this.manager.storage();
+      const storedNotification = storage.get('notifications');
+
+      if (!storedNotification?.token) {
+        return false;
+      }
+
+      // Update the subscription in Firestore with current auth state
+      await this._saveSubscription(storedNotification.token);
+
+      // Update local storage with current user ID
+      const user = this.manager.auth().getUser();
+      storage.set('notifications', {
+        ...storedNotification,
+        uid: user?.uid || null,
+        timestamp: new Date().toISOString()
+      });
+
+      return true;
+    } catch (error) {
+      console.error('Sync subscription error:', error);
+      return false;
+    }
+  }
+
   // Save subscription to Firestore
   async _saveSubscription(token) {
     try {
       const firestore = this.manager.firebaseFirestore;
       const user = this.manager.auth().getUser();
-      
+
       if (!firestore || !token) {
         return;
       }
 
-      const { doc, setDoc, serverTimestamp } = await import('firebase/firestore');
-      
-      const subscriptionData = {
-        token,
-        platform: 'web',
-        userAgent: navigator.userAgent,
-        tags: ['general'],
-        created: serverTimestamp(),
-        updated: serverTimestamp(),
-      };
-
-      if (user) {
-        subscriptionData.userId = user.uid;
-        subscriptionData.userEmail = user.email;
-      }
+      const { doc, getDoc, setDoc, updateDoc, deleteDoc } = await import('firebase/firestore');
+      const { getContext } = await import('./utilities.js');
+
+      const now = new Date();
+      const timestamp = now.toISOString();
+      const timestampUNIX = Math.floor(now.getTime() / 1000);
+
+      // Get context for client information
+      const context = getContext();
+      const clientData = context.client;
+
+      // Reference to the notification document (ID is the token)
+      const notificationRef = doc(firestore, 'notifications', token);
+
+      // Check if document already exists
+      const existingDoc = await getDoc(notificationRef);
+      const existingData = existingDoc.exists() ? existingDoc.data() : null;
+
+      // Determine if we need to update
+      const currentUid = user?.uid || null;
+      const existingUid = existingData?.uid || null;
+      const needsUpdate = existingUid !== currentUid;
+
+      if (!existingData) {
+        // New subscription - create the document
+        const subscriptionData = {
+          token,
+          context: {
+            client: clientData
+          },
+          tags: ['general'],
+          created: {
+            timestamp,
+            timestampUNIX
+          },
+          updated: {
+            timestamp,
+            timestampUNIX
+          },
+          uid: currentUid
+        };
+
+        await setDoc(notificationRef, subscriptionData);
+
+      } else if (needsUpdate) {
+        // Existing subscription needs update (userId changed)
+        const updateData = {
+          context: {
+            client: clientData
+          },
+          updated: {
+            timestamp,
+            timestampUNIX
+          },
+          uid: currentUid
+        };
 
-      // Save to notifications collection
-      await setDoc(
-        doc(firestore, 'notifications', token),
-        subscriptionData,
-        { merge: true }
-      );
+        await updateDoc(notificationRef, updateData);
+      }
+      // If no update needed, do nothing
 
-      // If user is authenticated, also save reference in user document
-      if (user) {
+      // Update user's notification reference if authenticated
+      if (user && (!existingData || needsUpdate)) {
         await setDoc(
           doc(firestore, 'users', user.uid, 'notifications', token),
           {
             token,
-            created: serverTimestamp(),
+            created: existingData?.created || {
+              timestamp,
+              timestampUNIX
+            },
+            updated: {
+              timestamp,
+              timestampUNIX
+            },
             active: true
           },
           { merge: true }
         );
       }
+
+      // Remove old user reference if user changed
+      if (existingUid && existingUid !== currentUid && existingUid !== null) {
+        try {
+          await deleteDoc(doc(firestore, 'users', existingUid, 'notifications', token));
+        } catch (err) {
+          // Ignore errors when cleaning up old references
+          console.log('Could not clean up old user notification reference:', err.message);
+        }
+      }
+
     } catch (error) {
       console.error('Save subscription error:', error);
       // Don't throw - this is not critical for the subscription process
@@ -282,4 +384,4 @@ class Notifications {
   }
 }
 
-export default Notifications;
+export default Notifications;

package/dist/modules/utilities.js

@@ -60,22 +60,22 @@ export function showNotification(message, options = {}) {
   // Handle different input types
   let text = message;
   let type = options.type || 'info';
-  
+
   // If message is an Error object, extract message and default to danger
   if (message instanceof Error) {
     text = message.message;
     type = options.type || 'danger';
   }
-  
+
   // Handle string as second parameter for backwards compatibility
   if (typeof options === 'string') {
     options = { type: options };
     type = options.type;
   }
-  
+
   // Extract options
   const timeout = options.timeout !== undefined ? options.timeout : 5000;
-  
+
   const $notification = document.createElement('div');
   $notification.className = `alert alert-${type} alert-dismissible fade show position-fixed top-0 start-50 translate-middle-x mt-5`;
   $notification.style.zIndex = '9999';
@@ -116,28 +116,50 @@ export function getContext() {
     }
   }
 
+  // Get platform
+  function getPlatform() {
+    const platform = (navigator.userAgentData?.platform || navigator.platform || 'unknown').toLowerCase();
+
+    if (/iphone|ipad|ipod/.test(platform)) {
+      return 'ios';
+    } else if (/android/.test(platform)) {
+      return 'android';
+    } else if (/win/.test(platform)) {
+      return 'windows';
+    } else if (/mac/.test(platform)) {
+      return 'macos';
+    } else if (/linux/.test(platform)) {
+      return 'linux';
+    } else if (/cros/.test(platform)) {
+      return 'chromeos';
+    } else {
+      return 'unknown';
+    }
+  }
+
   // Return context information
   return {
     client: {
+      language: navigator.language,
       mobile: isMobile(),
+      platform: getPlatform(),
+      userAgent: navigator.userAgent,
+      url: window.location.href,
     },
     browser: {
-      userAgent: navigator.userAgent,
-      language: navigator.language,
-      platform: navigator.platform,
       vendor: navigator.vendor,
     },
-    screen: {
-      width: window.screen?.width,
-      height: window.screen?.height,
-      availWidth: window.screen?.availWidth,
-      availHeight: window.screen?.availHeight,
-      colorDepth: window.screen?.colorDepth,
-      pixelRatio: window.devicePixelRatio || 1,
-    },
-    viewport: {
-      width: window.innerWidth,
-      height: window.innerHeight,
-    }
+    // screen: {
+    //   width: window.screen?.width,
+    //   height: window.screen?.height,
+    //   availWidth: window.screen?.availWidth,
+    //   availHeight: window.screen?.availHeight,
+    //   colorDepth: window.screen?.colorDepth,
+    //   pixelRatio: window.devicePixelRatio || 1,
+    // },
+    // viewport: {
+    //   width: window.innerWidth,
+    //   height: window.innerHeight,
+    // }
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-manager",
-  "version": "4.0.14",
+  "version": "4.0.16",
   "description": "Easily access important variables such as the query string, current domain, and current page in a single object.",
   "main": "dist/index.js",
   "module": "src/index.js",