xeovalyte/wrbapp
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

added notification onclick and icons
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source
This commit is contained in:
Xeovalyte 2022-11-07 15:29:15 +01:00
parent 8303762073
commit 64934aa002
4 changed files with 105 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/app.vue
View File

@ -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()
});
}

53
frontend/package-lock.json generated
View File

@ -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": "*"
},

1
frontend/package.json
View File

@ -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"
}

34
frontend/public/firebase-messaging-sw.js
View File

@ -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);
});