Browser notification

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)
+      }
+    }
   },
 };
 </script>

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