Merge branch '419-push-notifications' into 'dev'

Show new message browser notification when chat message tab is not active.

See merge request keanuapp/keanuapp-weblite!203

src/App.vue

@@ -31,6 +31,7 @@
 
 <script>
 import stickers from "./plugins/stickers";
+import logoMixin from "./components/logoMixin";
 
 export default {
   name: "App",
@@ -41,6 +42,7 @@ export default {
       availableJsonTranslation: null
     }
   },
+  mixins: [logoMixin],
   beforeMount() {
     this.setDefaultLanguage();
   },
@@ -111,9 +113,43 @@ export default {
 
       // Set language
       this.$i18n.locale = this.$store.state.language || "en";
+    },
+    showNotification() {
+      if(document.visibilityState === "visible") {
+        return;
+      }
+      const title = this.$t('notification.title');
+      const notification = new Notification(title, {icon: this.logotype});
+      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

@@ -344,6 +344,9 @@
     "processed_n_of_total_events": "Processed media for {count} of {total} events",
     "export_filename": "Exported chat {date}"
   },
+  "notification": {
+    "title": "New message received"
+  },
   "emoji": {
     "search": "Search...",
     "categories": {