Web notification improvements

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