diff --git a/src/App.vue b/src/App.vue index a3fea3a..39c5f78 100644 --- a/src/App.vue +++ b/src/App.vue @@ -111,9 +111,45 @@ export default { // Set language this.$i18n.locale = this.$store.state.language || "en"; + }, + + // Request notification permission + showNotification() { + if(document.visibilityState === "visible") { + return; + } + const title = this.$t('notification.title'); + const notification = new Notification(title); + notification.onclick = () => { + notification.close(); + window.parent.focus(); + } + }, + requestAndShowPermission(notificationCount) { + Notification.requestPermission(function (permission) { + if(notificationCount > 0 && permission === "granted") { + this.showNotification(); + } + }); + }, + requestNotificationPermission(notificationCount) { + if ('Notification' in window) { + Notification.requestPermission().then((permission) => { + if(notificationCount > 0 && permission === 'granted') { + this.showNotification(); + } else if(permission === "default") { + this.requestAndShowPermission(notificationCount); + } else { + this.requestAndShowPermission(notificationCount); + } + }); + } } }, computed: { + notificationCount() { + return this.$matrix.notificationCount + }, currentUser() { return this.$store.state.auth.user; }, @@ -126,8 +162,8 @@ export default { }, title() { var title = this.appName; - if (this.$matrix.notificationCount > 0) { - title += " [" + this.$matrix.notificationCount + "]"; + if (this.notificationCount > 0) { + title += " [" + this.notificationCount + "]"; } if (this.$route.meta.title) { title += " - " + this.$route.meta.title; @@ -182,6 +218,11 @@ export default { }, immediate: true, }, + notificationCount: { + handler(nCount) { + this.requestNotificationPermission(nCount) + } + } }, }; diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json index cc8c121..33430a5 100644 --- a/src/assets/translations/en.json +++ b/src/assets/translations/en.json @@ -329,5 +329,8 @@ "fetched_n_of_total_events": "Fetched {count} of {total} events", "processed_n_of_total_events": "Processed media for {count} of {total} events", "export_filename": "Exported chat {date}" + }, + "notification": { + "title": "New messages in Convene" } }