Web notification improvements

public/sw.js

@@ -0,0 +1,22 @@
+// Notification click event listener
+self.addEventListener("notificationclick", (e) => {
+  // Close the notification popout
+  e.notification.close();
+  // Get all the Window clients
+  e.waitUntil(
+    clients.matchAll({ type: "window" }).then((clientsArr) => {
+      // If a Window tab matching the targeted URL already exists, focus that;
+      const hadWindowToFocus = clientsArr.some((windowClient) =>
+        windowClient.url === e.notification.data.url
+          ? (windowClient.focus(), true)
+          : false,
+      );
+
+      // Otherwise, open a new tab to the applicable URL and focus it.
+      if (!hadWindowToFocus)
+        clients
+          .openWindow(e.notification.data.url)
+          .then((windowClient) => (windowClient ? windowClient.focus() : null));
+    }),
+  );
+});

src/App.vue

@@ -31,10 +31,12 @@
 
 <script>
 import stickers from "./plugins/stickers";
-import { notificationCount } from "./plugins/notificationAndServiceWorker.js"
+import { registerServiceWorker, notificationCount, windowNotificationPermission } from "./plugins/notificationAndServiceWorker.js"
+import logoMixin from "./components/logoMixin";
 
 export default {
   name: "App",
+  mixins: [logoMixin],
   data() {
     return {
       loading: true,
@@ -46,6 +48,7 @@ export default {
     this.setDefaultLanguage();
   },
   mounted() {
+    registerServiceWorker();
     /**
     if (
       window.location.protocol == "http" &&
@@ -81,6 +84,7 @@ export default {
     this.$config.promise.then(this.onConfigLoaded);
   },
   methods: {
+    windowNotificationPermission,
     onConfigLoaded(config) {
       if (config.shortCodeStickers) {
         stickers.loadStickersFromConfig(config);
@@ -112,7 +116,20 @@ export default {
 
       // Set language
       this.$i18n.locale = this.$store.state.language || "en";
-    }
+    },
+    showNotification() {
+      if(document.visibilityState === "hidden") {
+        const title = this.$t('notification.title');
+        const self = this;
+
+        navigator.serviceWorker.ready.then(function(registration) {
+          registration.showNotification(title, {
+            icon: self.logotype,
+            data: { url: window.location.href }
+          });
+        });
+      }
+    },
   },
   computed: {
     notificationCount,
@@ -157,6 +174,15 @@ export default {
     },
   },
   watch: {
+    notificationCount: {
+      handler(nCount) {
+        // windowNotificationPermission
+        // return value: 'granted', 'default', 'denied'
+        if (nCount > 0 && this.windowNotificationPermission() === "granted") {
+          this.showNotification()
+        }
+      }
+    },
     "$i18n.locale": {
       handler(val) {
         // Locale changed, check file if RTL

src/components/Chat.vue

@@ -346,7 +346,7 @@
                 depressed
                 block
                 class="filled-button"
-                @click.stop="onRequestNotificationAndServiceWorker"
+                @click.stop="onNotifyRequest"
                 >{{ $t("notification.dialog.enable") }}</v-btn
               >
             </v-col>
@@ -379,8 +379,7 @@ import chatMixin from "./chatMixin";
 import sendAttachmentsMixin from "./sendAttachmentsMixin";
 import AudioLayout from "./AudioLayout.vue";
 import FileDropLayout from "./file_mode/FileDropLayout";
-import { requestNotificationAndServiceWorker, windowNotificationPermission, notificationCount } from "../plugins/notificationAndServiceWorker.js"
+import { requestNotificationPermission, windowNotificationPermission } from "../plugins/notificationAndServiceWorker.js"
-import logoMixin from "./logoMixin";
 import roomTypeMixin from "./roomTypeMixin";
 import roomMembersMixin from "./roomMembersMixin";
 
@@ -418,7 +417,7 @@ ScrollPosition.prototype.prepareFor = function (direction) {
 
 export default {
   name: "Chat",
-  mixins: [chatMixin, logoMixin, roomTypeMixin, sendAttachmentsMixin, roomMembersMixin],
+  mixins: [chatMixin, roomTypeMixin, sendAttachmentsMixin, roomMembersMixin],
   components: {
     ChatHeader,
     ChatHeaderPrivate,
@@ -554,7 +553,6 @@ export default {
   },
 
   computed: {
-    notificationCount,
     nonImageFiles() {
       return this.isCurrentFileInputsAnArray && this.currentFileInputs.filter(file => !file?.type.includes("image/"))
     },
@@ -742,13 +740,6 @@ export default {
   },
 
   watch: {
-    notificationCount: {
-      handler(nCount) {
-        if (nCount > 0 && this.windowNotificationPermission() === "granted") {
-          this.showNotification()
-        }
-      }
-    },
     initialLoadDone: {
       immediate: true,
       handler(value, oldValue) {
@@ -841,22 +832,6 @@ export default {
 
   methods: {
     windowNotificationPermission,
-    showNotification() {
-      if(document.visibilityState === "visible") {
-        return;
-      }
-
-      const title = this.$t('notification.title');
-      const self = this;
-
-      navigator.serviceWorker.ready.then(function(registration) {
-        registration.showNotification(title, {
-          icon: self.logotype,
-          tag: "new-message-notification",
-        });
-      });
-
-    },
     onNotificationDialog() {
       if(this.windowNotificationPermission() === 'denied') {
         alert(this.$t("notification.blocked_message"));
@@ -864,8 +839,8 @@ export default {
         this.notificationDialog = true;
       }
     },
-    onRequestNotificationAndServiceWorker() {
+    onNotifyRequest() {
-      requestNotificationAndServiceWorker()
+      requestNotificationPermission()
       this.notificationDialog = false;
     },
     onRoomJoined(initialEventId) {

src/plugins/notificationAndServiceWorker.js

@@ -1,23 +1,15 @@
-const registerServiceWorker = async () => {
+export function registerServiceWorker() {
-  const swRegistration = await navigator.serviceWorker.register("/sw.js");
-  return swRegistration;
-};
-
-const requestNotificationPermission = async () => {
-  // return value: 'granted', 'default', 'denied'
-  return await window.Notification.requestPermission();
-};
-
-export async function requestNotificationAndServiceWorker() {
   if (!("serviceWorker" in navigator)) {
     throw new Error("No Service Worker support!");
   }
+  navigator.serviceWorker.register("/sw.js");
+}
+
+export function requestNotificationPermission() {
   if (!("PushManager" in window)) {
     throw new Error("No Push API Support!");
   }
-  const permission = await requestNotificationPermission();
+  window.Notification.requestPermission();
-  if(permission==='granted') await registerServiceWorker();
-  return permission
 }
 
 export function windowNotificationPermission() {