push subscriptions managment

components/PwaManager.tsx

@@ -128,6 +128,7 @@ function PwaManager() {
 
         try {
             e.preventDefault();
+            if (subscription) {
                 await subscription.unsubscribe();
                 // Call your API to delete or invalidate subscription data on server
                 setSubscription(null);
@@ -139,7 +140,8 @@ function PwaManager() {
                             headers: {
                                 'Content-Type': 'application/json'
                             },
-                        body: JSON.stringify({ id: session?.user.id }),
+                            //send the current subscription to be removed
+                            body: JSON.stringify({ id: session.user.id, subscriptionId: subscription.endpoint })
                         }
                     ).then(response => {
                         if (!response.ok) {
@@ -151,6 +153,7 @@ function PwaManager() {
                     });
                 }
                 console.log('Web push unsubscribed!');
+            }
         } catch (error) {
             console.error('Error unsubscribing from notifications:', error);
         }

pages/api/notify.ts

@@ -35,11 +35,26 @@ const Notification = async (req, res) => {
         // publisher.pushSubscription = subscription
         const prisma = common.getPrismaClient();
         const { subscription, id } = req.body
-        const publisher = await prisma.publisher.update({
+        const publisher = await prisma.publisher.findUnique({
             where: { id },
-            data: { pushSubscription: subscription }
+            select: { pushSubscription: true }
-        })
+        });
+
+        let subscriptions = Array.isArray(publisher.pushSubscription) ? publisher.pushSubscription : (publisher.pushSubscription ? [publisher.pushSubscription] : []);
+        const index = subscriptions.findIndex(sub => sub.endpoint === subscription.endpoint);
+
+        if (index !== -1) {
+            subscriptions[index] = subscription; // Update existing subscription
+        } else {
+            subscriptions.push(subscription); // Add new subscription
+        }
+
+        await prisma.publisher.update({
+            where: { id },
+            data: { pushSubscription: subscriptions }
+        });
         console.log('Subscription for publisher', id, 'updated:', subscription)
+        res.send({ subs: subscriptions.length })
         res.statusCode = 200
         res.end()
     }
@@ -47,12 +62,31 @@ const Notification = async (req, res) => {
         // remove the subscription object from the database
         // publisher.pushSubscription = null
         const prisma = common.getPrismaClient();
-        const { id } = req.body
+        const { subscriptionId, id } = req.body;
-        const publisher = await prisma.publisher.update({
+
+        const publisher = await prisma.publisher.findUnique({
+            where: { id },
+            select: { pushSubscription: true }
+        });
+
+        let subscriptions = Array.isArray(publisher.pushSubscription) ? publisher.pushSubscription : (publisher.pushSubscription ? [publisher.pushSubscription] : []);
+        try {
+            subscriptions = subscriptions.filter(sub => sub.endpoint !== subscriptionId);
+
+            await prisma.publisher.update({
+                where: { id },
+                data: { pushSubscription: subscriptions }
+            });
+        } catch (e) {
+            console.log(e)
+            await prisma.publisher.update({
                 where: { id },
                 data: { pushSubscription: null }
-        })
+            });
+        }
+
         console.log('Subscription for publisher', id, 'deleted')
+        res.send({ subs: subscriptions.length })
         res.statusCode = 200
         res.end()
     }

worker/index.js

@@ -31,7 +31,7 @@ self.addEventListener('push', function (event) {
         registration.showNotification(data.title, {
             body: data.message,
             icon: '/favicon.ico',
-            actions: [...data.actions, { action: 'close', title: 'Close', icon: 'fa fa-times' }],
+            actions: [{ action: 'close', title: 'Close', icon: 'fa fa-times' }],
             data: data.url,
         })
     )