@cocreate/notification 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [1.1.0](https://github.com/CoCreate-app/CoCreate-notification/compare/v1.0.1...v1.1.0) (2023-10-09)
+
+
+### Bug Fixes
+
+* generates Vapid keys per client and returns publicKey to client, the public key is used to create a subscription object and return to server ([0267c19](https://github.com/CoCreate-app/CoCreate-notification/commit/0267c1904a6e6d03c73e4c767cb39f26287776d9))
+
+
+### Features
+
+* Use subscription.endpoint to get the apikey ([5fdb66d](https://github.com/CoCreate-app/CoCreate-notification/commit/5fdb66d52ca996ca096f3c935a75bd98c812a9cc))
+
+## [1.0.1](https://github.com/CoCreate-app/CoCreate-notification/compare/v1.0.0...v1.0.1) (2023-09-24)
+
+
+### Bug Fixes
+
+* add web-push in order to generate Vapid keys ([cffd320](https://github.com/CoCreate-app/CoCreate-notification/commit/cffd3202b28722cb930b2be18370b1c835c6e2b2))
+
 # 1.0.0 (2023-09-24)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/notification",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Simple HTML5 & JavaScript component add, update & remove values in element's notification from input, select or js api. Easily configured using HTML5 notification and/or JavaScript API.",
   "keywords": [
     "cocreate",
@@ -58,6 +58,7 @@
   },
   "dependencies": {
     "@cocreate/actions": "^1.11.2",
-    "@cocreate/socket-client": "^1.28.0"
+    "@cocreate/socket-client": "^1.28.0",
+    "web-push": "^3.6.6"
   }
 }

package/src/client.js

@@ -1,14 +1,6 @@
 import socket from '@cocreate/socket-client'
 // import actions from '@cocreate/actions'
 
-// Request push notification permission
-const permission = await Notification.requestPermission();
-if (permission === 'granted') {
-    // User granted push notification permission, handle it here
-    subscribeToPushNotifications();
-}
-
-
 async function handlePushPermission() {
     // Request push notification permission
     const permission = await Notification.requestPermission();
@@ -18,14 +10,9 @@ async function handlePushPermission() {
         const registration = await navigator.serviceWorker.ready;
         try {
             // Create a new subscription or retrieve the existing one
-            const existingSubscription = await registration.pushManager.getSubscription();
+            let subscription = await registration.pushManager.getSubscription();
 
-            if (existingSubscription) {
-                // Update the existing subscription if needed
-                // This might involve generating a new public key or other changes
-                // For this example, we'll assume no updates are needed
-                console.log('Subscription already exists:', existingSubscription);
-            } else {
+            if (!subscription) {
                 //TODO: getPublicKey
                 let response = await socket.send({
                     method: 'notification.publicKey',
@@ -35,31 +22,31 @@ async function handlePushPermission() {
                     return
 
                 // Create a new subscription
-                const newSubscription = await registration.pushManager.subscribe({
+                subscription = await registration.pushManager.subscribe({
                     userVisibleOnly: true,
                     applicationServerKey: response.publicKey,
                 });
 
-                await socket.send({
-                    method: 'notification.subscription',
-                    subscription: newSubscription
-                })
+            }
 
-                console.log('New subscription created:', newSubscription);
+            await socket.send({
+                method: 'notification.subscription',
+                subscription: subscription
+            })
 
-                navigator.serviceWorker.addEventListener('pushsubscriptionchange', (event) => {
-                    // Handle the subscription change here
-                    const newSubscription = event.newSubscription;
-                    const oldSubscription = event.oldSubscription;
+            console.log('New subscription created:', subscription);
 
-                    socket.send({
-                        method: 'notification.subscription',
-                        subscription: newSubscription
-                    })
+            navigator.serviceWorker.addEventListener('pushsubscriptionchange', (event) => {
+                // Handle the subscription change here
+                const newSubscription = event.newSubscription;
+                const oldSubscription = event.oldSubscription;
 
-                });
+                socket.send({
+                    method: 'notification.subscription',
+                    subscription: subscription
+                })
 
-            }
+            });
         } catch (error) {
             console.error('Error handling push subscription:', error);
         }
@@ -77,3 +64,4 @@ document.querySelector('[actions*="notification.subscribe"]').addEventListener('
 //     endEvent: "notification",
 //     callback: (action) => handlePushPermission
 // });
+export default {}

package/src/server.js

@@ -1,9 +1,10 @@
 const crypto = require('crypto');
 const https = require('https');
+const webpush = require('web-push');
 
 class CoCreateNotification {
     constructor(crud) {
-        this.wsManager = crud.wsManager
+        this.socket = crud.wsManager
         this.crud = crud
         this.newKeyMap = new Map()
         this.subscriptions = new Map()
@@ -11,10 +12,10 @@ class CoCreateNotification {
     }
 
     init() {
-        if (this.wsManager) {
-            this.wsManager.on('notification.publicKey', (data) => this.publicKey(data));
-            this.wsManager.on('notification.subscription', (data) => this.subscription(data));
-            this.wsManager.on('notification.send', (data) => this.send(data));
+        if (this.socket) {
+            this.socket.on('notification.publicKey', (data) => this.publicKey(data));
+            this.socket.on('notification.subscription', (data) => this.subscription(data));
+            this.socket.on('notification.send', (data) => this.send(data));
         }
     }
 
@@ -22,52 +23,100 @@ class CoCreateNotification {
     publicKey(data) {
         let subscription = this.subscriptions.has(data.clientId)
         if (!subscription) {
-            let newKeys = this.generateVapidKeys()
-            this.newKeyMap.set(data.clientId, newKeys)
-            data.publicKey = newKeyMap.publicKey
-        } else {
-            data.publicKey = subscription.publicKey
+            // let newKeys = this.generateVapidKeys()
+            subscription = webpush.generateVAPIDKeys()
+            this.newKeyMap.set(data.clientId, subscription)
         }
 
-        this.socket.send(data)
+        console.log('subscription: ', subscription)
 
+        data.publicKey = subscription.publicKey
+        if (data.socket)
+            this.socket.send(data)
     }
 
     async subscription(data) {
         let newKeys = this.newKeyMap.get(data.clientId)
         if (newKeys) {
             this.newKeyMap.delete(data.clientId)
+
             this.subscriptions.set(data.clientId, { ...newKeys, ...data.subscription })
         } else {
             newKeys = this.subscriptions.get(data.clientId)
             if (newKeys) {
                 newKeys = { ...newKeys, ...data.subscription }
             } else {
-                newKeys = {}
+                newKeys = await this.crud.send({
+                    method: 'read.object',
+                    array: 'clients',
+                    object: {
+                        _id: data.clientId
+                    }
+                })
+                if (newKeys && newKeys.object && newKeys.object[0]) {
+                    newKeys = newKeys.object[0]
+                    newKeys = { ...newKeys, ...data.subscription }
+                    this.subscriptions.set(data.clientId, { ...newKeys, ...data.subscription })
+                } else {
+                    this.publicKey(data)
+                    this.subscription(data)
+                }
             }
-        }
 
-        crud.send({
-            method: 'update.object',
-            array: 'keys',
-            object: {
-                ...data.subscription,
-                ...newKeys
-            }
-        });
+        }
 
+        if (newKeys) {
+            let tokenOptions = {
+                vapidDetails: {
+                    subject: 'mailto:contact@cocreate.app',
+                    publicKey: newKeys.publicKey,
+                    privateKey: newKeys.privateKey
+                },
+                // Other optional options can be included here
+            };
+
+            const jwt = webpush.generateRequestDetails(data.subscription, null, tokenOptions);
+
+            this.crud.send({
+                method: 'update.object',
+                array: 'clients',
+                object: {
+                    _id: data.clientId,
+                    ...data.subscription,
+                    ...newKeys,
+                    jwt
+                },
+                upsert: true,
+                organization_id: data.organization_id
+            });
+        }
     };
 
     // Load the client's subscription object from storage
-    send(data) {
-        const key = crud.send({ array: 'keys', filter: { query: [{}] } });
-
-        const subscription = key.object[0]
+    async send(data) {
+        let subscription = this.subscriptions.get(data.clientId)
+        if (!subscription) {
+            try {
+                subscription = await this.crud.send({
+                    method: 'read.object',
+                    array: 'clients',
+                    object: {
+                        _id: data.clientId
+                    },
+                    organization_id: data.organization_id
+
+                })
+            } catch (error) {
+                console.log(error)
+            }
+            if (subscription && subscription.object && subscription.object[0])
+                subscription = subscription.object[0]
+        }
         if (!subscription || !subscription.privateKey)
             return
 
         const cutoffDate = new Date();
-        cutoffDate.setDate(cutoffDate.getDate() - subscription.rotateKeysIn || 90);
+        cutoffDate.setDate(cutoffDate.getDate() - 90);
 
         // Compare the modification time with the cutoff date
         if (!this.newKeyMap.has(data.clientId) && subscription.privateKeyCreatedOn < cutoffDate) {
@@ -78,15 +127,27 @@ class CoCreateNotification {
         if (data.payload && !data.payload.timestamp)
             data.payload.timestamp = Date.now()
 
-        let payload = {...subscription, ...data.payload}
-        delete payload.privateKey
-        delete payload.publicKey
-        payload = JSON.stringify(payload);
+        // let payload = data.payload
+        // delete payload.privateKey
+        // delete payload.publicKey
+
+        let tokenOptions = {
+            vapidDetails: {
+                subject: 'mailto:contact@cocreate.app',
+                publicKey: subscription.publicKey,
+                privateKey: subscription.privateKey
+            },
+            // Other optional options can be included here
+        };
+
+        const jwt = webpush.generateRequestDetails(subscription.endpoint, payload, tokenOptions);
+        const apiKey = getAPIKeyForEndpoint(subscrption.endpoint);
+
 
         const options = {
             method: 'POST',
             headers: {
-                'Authorization': `Bearer ${this.getVapidJWT(subscription.privateKey)}`,
+                'Authorization': `Bearer ${apiKey || jwt.headers.Authorization}`,
                 'Content-Type': 'application/json',
             },
         };
@@ -103,6 +164,26 @@ class CoCreateNotification {
         pushRequest.end();
     }
 
+    getAPIKeyForEndpoint(endpoint) {
+        // Define the mapping of browser endpoints to API keys
+        const browserEndpointsAndAPIKeys = {
+            'https://fcm.googleapis.com/': 'yourFCMApiKey',
+            'https://updates.push.services.mozilla.com/wpush/v2/': 'yourMozillaPushServiceApiKey',
+            'https://api.push.apple.com/': 'yourAPNsApiKey', // For Safari on Mac
+            'https://api.sandbox.push.apple.com/': 'yourAPNsDevApiKey', // For Safari on iOS (Development)
+            'https://api.push.apple.com/': 'yourAPNsProdApiKey', // For Safari on iOS (Production)
+            // Add more browser endpoints and their API keys as needed
+        };
+
+        // Iterate through the keys in the mapping
+        for (const browserEndpoint of Object.keys(browserEndpointsAndAPIKeys)) {
+            if (endpoint.startsWith(browserEndpoint)) {
+                // Return the associated API key if the endpoint starts with a known browser endpoint
+                return browserEndpointsAndAPIKeys[browserEndpoint];
+            }
+        }
+    }
+
     generateVapidKeys() {
         const { privateKey, publicKey } = crypto.generateKeyPairSync('rsa', {
             modulusLength: 4096, // Choose an appropriate key length
@@ -138,10 +219,11 @@ class CoCreateNotification {
 
     // Function to base64 URL encode
     base64URLEncode(value) {
-        return value.toString('base64')
+        const base64 = Buffer.from(value).toString('base64');
+        return base64
             .replace(/\+/g, '-')
             .replace(/\//g, '_')
-            .replace(/=/g, '');
+            .replace(/=+$/, ''); // Remove trailing equal signs
     }
 
 
@@ -157,7 +239,7 @@ const payloadExample = {
         { action: 'action-2', title: 'Action 2' },
     ],
     tag: 'notification-tag', // A unique identifier for the notification
-    data,
+    data: {},
     vibrate: [100, 50, 100], // Vibration pattern (milliseconds)
     image: '/path/to/notification-image.jpg', // An image to display within the notification
     requireInteraction: true, // Requires user interaction to close the notification