From 64934aa002d1886997f8f8d760943d9accecdfc3 Mon Sep 17 00:00:00 2001 From: Xeovalyte Date: Mon, 7 Nov 2022 15:29:15 +0100 Subject: [PATCH] added notification onclick and icons --- frontend/app.vue | 29 ++++++++++--- frontend/package-lock.json | 53 +++++++++++++++++++++--- frontend/package.json | 1 + frontend/public/firebase-messaging-sw.js | 34 ++++++++++++++- 4 files changed, 105 insertions(+), 12 deletions(-) diff --git a/frontend/app.vue b/frontend/app.vue index a6764d4..2dd7d6a 100644 --- a/frontend/app.vue +++ b/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() + }); } diff --git a/frontend/package-lock.json b/frontend/package-lock.json index f708c1b..bd270b9 100644 --- a/frontend/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.3.0.tgz", - "integrity": "sha512-caGUWLY0DpPC6l31KxeUy6vPVNA0yKxx81jFYLoMpyP6cF84FG5Dkf69DfSUqL57wX8JcUkJDMnQaQIZPWFEQQ==", + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.4.0.tgz", + "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", - "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.3.0.tgz", - "integrity": "sha512-caGUWLY0DpPC6l31KxeUy6vPVNA0yKxx81jFYLoMpyP6cF84FG5Dkf69DfSUqL57wX8JcUkJDMnQaQIZPWFEQQ==", + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.4.0.tgz", + "integrity": "sha512-fTuem51KwMCnqUKkI8B57qAIMcFovtGgsCtAeqxIzH3i6nE9VYge+gVfneNHAAy7lj8twbkNfqQSygOPJTm4tQ==", "requires": { "vue-demi": "*" }, diff --git a/frontend/package.json b/frontend/package.json index 8f4ca60..289a459 100644 --- a/frontend/package.json +++ b/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" } diff --git a/frontend/public/firebase-messaging-sw.js b/frontend/public/firebase-messaging-sw.js index ce89175..6d31d96 100644 --- a/frontend/public/firebase-messaging-sw.js +++ b/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(); \ No newline at end of file +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); + }); \ No newline at end of file