added notification onclick and icons

frontend/app.vue

@@ -112,28 +112,42 @@ const setupNotifications = () => {
     // On success, we should be able to receive notifications
     PushNotifications.addListener('registration',
       (token) => {
-        alert('Push registration success, token: ' + token.value);
+        // alert('Push registration success, token: ' + token.value);
       }
     );
 
     // Some issue with our setup and push will not work
     PushNotifications.addListener('registrationError',
       (error) => {
-        alert('Error on registration: ' + JSON.stringify(error));
+        // alert('Error on registration: ' + JSON.stringify(error));
       }
     );
 
     // Show us the notification payload if the app is open on our device
     PushNotifications.addListener('pushNotificationReceived',
       (notification) => {
-        alert('Push received: ' + JSON.stringify(notification));
+        const { show, onClick } = useWebNotification({
+          title: notification.title,
+          body: notification.body,
+          icon: '/ios/256.png',
+          dir: 'auto',
+          lang: 'en',
+          renotify: true,
+          tag: 'wrbapp',
+        })
+
+        show()
+
+        onClick.on((event) => {
+          navigateTo('/news')
+        })
       }
     );
 
     // Method called when tapping on a notification
     PushNotifications.addListener('pushNotificationActionPerformed',
       (notification) => {
-        alert('Push action performed: ' + JSON.stringify(notification));
+        navigateTo('/news')
       }
     );
 }
@@ -160,7 +174,7 @@ const registerSW = () => {
   onMessage(messaging.value, (payload) => {
     console.log('Message received. ', payload);
 
-    const { show } = useWebNotification({
+    const { show, onClick } = useWebNotification({
       title: payload.notification.title,
       body: payload.notification.body,
       icon: '/ios/256.png',
@@ -170,7 +184,12 @@ const registerSW = () => {
       tag: 'wrbapp',
     })
 
+    onClick.on((event) => {
+      navigateTo('/news')
+    })
+
     show()
+
   });
 }
 

frontend/package-lock.json

@@ -13,6 +13,7 @@
         "@formkit/nuxt": "^1.0.0-beta.11-c95e605",
         "@nuxtjs/robots": "^2.5.0",
         "@vueuse/firebase": "^9.2.0",
+        "@vueuse/shared": "^9.4.0",
         "firebase": "^9.10.0",
         "vue-toastification": "^2.0.0-rc.5"
       },
@@ -2560,6 +2561,18 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/@vueuse/core/node_modules/@vueuse/shared": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.3.0.tgz",
+      "integrity": "sha512-caGUWLY0DpPC6l31KxeUy6vPVNA0yKxx81jFYLoMpyP6cF84FG5Dkf69DfSUqL57wX8JcUkJDMnQaQIZPWFEQQ==",
+      "dev": true,
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@vueuse/core/node_modules/vue-demi": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
@@ -2601,6 +2614,17 @@
         "firebase": ">=9.0.0"
       }
     },
+    "node_modules/@vueuse/firebase/node_modules/@vueuse/shared": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.3.0.tgz",
+      "integrity": "sha512-caGUWLY0DpPC6l31KxeUy6vPVNA0yKxx81jFYLoMpyP6cF84FG5Dkf69DfSUqL57wX8JcUkJDMnQaQIZPWFEQQ==",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@vueuse/firebase/node_modules/vue-demi": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
@@ -2693,9 +2717,9 @@
       }
     },
     "node_modules/@vueuse/shared": {
-      "version": "9.3.0",
+      "version": "9.4.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.4.0.tgz",
-      "integrity": "sha512-caGUWLY0DpPC6l31KxeUy6vPVNA0yKxx81jFYLoMpyP6cF84FG5Dkf69DfSUqL57wX8JcUkJDMnQaQIZPWFEQQ==",
+      "integrity": "sha512-fTuem51KwMCnqUKkI8B57qAIMcFovtGgsCtAeqxIzH3i6nE9VYge+gVfneNHAAy7lj8twbkNfqQSygOPJTm4tQ==",
       "dependencies": {
         "vue-demi": "*"
       },
@@ -12968,6 +12992,15 @@
         "vue-demi": "*"
       },
       "dependencies": {
+        "@vueuse/shared": {
+          "version": "9.3.0",
+          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.3.0.tgz",
+          "integrity": "sha512-caGUWLY0DpPC6l31KxeUy6vPVNA0yKxx81jFYLoMpyP6cF84FG5Dkf69DfSUqL57wX8JcUkJDMnQaQIZPWFEQQ==",
+          "dev": true,
+          "requires": {
+            "vue-demi": "*"
+          }
+        },
         "vue-demi": {
           "version": "0.13.11",
           "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
@@ -12986,6 +13019,14 @@
         "vue-demi": "*"
       },
       "dependencies": {
+        "@vueuse/shared": {
+          "version": "9.3.0",
+          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.3.0.tgz",
+          "integrity": "sha512-caGUWLY0DpPC6l31KxeUy6vPVNA0yKxx81jFYLoMpyP6cF84FG5Dkf69DfSUqL57wX8JcUkJDMnQaQIZPWFEQQ==",
+          "requires": {
+            "vue-demi": "*"
+          }
+        },
         "vue-demi": {
           "version": "0.13.11",
           "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
@@ -13032,9 +13073,9 @@
       }
     },
     "@vueuse/shared": {
-      "version": "9.3.0",
+      "version": "9.4.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.4.0.tgz",
-      "integrity": "sha512-caGUWLY0DpPC6l31KxeUy6vPVNA0yKxx81jFYLoMpyP6cF84FG5Dkf69DfSUqL57wX8JcUkJDMnQaQIZPWFEQQ==",
+      "integrity": "sha512-fTuem51KwMCnqUKkI8B57qAIMcFovtGgsCtAeqxIzH3i6nE9VYge+gVfneNHAAy7lj8twbkNfqQSygOPJTm4tQ==",
       "requires": {
         "vue-demi": "*"
       },

frontend/package.json

@@ -24,6 +24,7 @@
     "@formkit/nuxt": "^1.0.0-beta.11-c95e605",
     "@nuxtjs/robots": "^2.5.0",
     "@vueuse/firebase": "^9.2.0",
+    "@vueuse/shared": "^9.4.0",
     "firebase": "^9.10.0",
     "vue-toastification": "^2.0.0-rc.5"
   }

frontend/public/firebase-messaging-sw.js

@@ -1,3 +1,21 @@
+self.addEventListener('notificationclick', (event) => {
+    console.log('On notification click: ', event.notification.tag);
+    event.notification.close();
+  
+    // This looks to see if the current is already open and
+    // focuses if it is
+    event.waitUntil(clients.matchAll({
+      type: "window"
+    }).then((clientList) => {
+      for (const client of clientList) {
+        if (client.url === '/news' && 'focus' in client)
+          return client.focus();
+      }
+      if (clients.openWindow)
+        return clients.openWindow('/news');
+    }));
+});
+
 importScripts('https://www.gstatic.com/firebasejs/9.2.0/firebase-app-compat.js');
 importScripts('https://www.gstatic.com/firebasejs/9.2.0/firebase-messaging-compat.js');
 
@@ -12,4 +30,18 @@ const firebaseConfig = {
 };
   
 const app = firebase.initializeApp(firebaseConfig);
-const messaging = firebase.messaging();
+const messaging = firebase.messaging();
+
+
+messaging.onBackgroundMessage((payload) => {
+    console.log('[firebase-messaging-sw.js] Received background message ', payload);
+    // Customize notification here
+    const notificationTitle = payload.notification.title;
+    const notificationOptions = {
+      body: payload.notification.body,
+      icon: '/ios/256.png'
+    };
+  
+    self.registration.showNotification(notificationTitle,
+      notificationOptions);
+  });