From 55e490094e7a32704e47ba6ba83b64321474c6e0 Mon Sep 17 00:00:00 2001
From: nioc <dev@nioc.eu>
Date: Sun, 5 Feb 2023 01:32:35 +0100
Subject: [PATCH] feat(notification): Notify user for new message through
 browser API

Check if notifications API is  supported
Add a switch allowing the user to received notifications when new message is received
Close #59
---
 package-lock.json                      | 150 +++++++++++++++++++++++--
 package.json                           |   3 +-
 src/components/NotificationsSwitch.vue |  48 ++++++++
 src/components/PresenceController.vue  |   3 +
 src/store/index.js                     |  27 +++++
 5 files changed, 222 insertions(+), 9 deletions(-)
 create mode 100644 src/components/NotificationsSwitch.vue

diff --git a/package-lock.json b/package-lock.json
index 868a268..9a218ce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,17 +1,18 @@
 {
   "name": "xmpp-web",
-  "version": "0.9.8",
+  "version": "0.9.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "xmpp-web",
-      "version": "0.9.8",
+      "version": "0.9.9",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "@creativebulma/bulma-divider": "^1.1.0",
         "@oruga-ui/oruga-next": "^0.5.4",
         "@oruga-ui/theme-bulma": "^0.2.6",
+        "@vueuse/core": "^9.12.0",
         "@xmpp/client": "^0.13.1",
         "@xmpp/debug": "^0.13.0",
         "@xmpp/error": "^0.13.1",
@@ -2350,9 +2351,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "18.11.18",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
-      "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
+      "version": "18.11.19",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.19.tgz",
+      "integrity": "sha512-YUgMWAQBWLObABqrvx8qKO1enAvBUdjZOAWQ5grBAkp5LQv45jBvYKZ3oFS9iKRCQyFjqw6iuEa1vmFqtxYLZw==",
       "dev": true
     },
     "node_modules/@types/resolve": {
@@ -2379,6 +2380,11 @@
       "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==",
       "dev": true
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.0.0.tgz",
@@ -2515,6 +2521,89 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
       "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
     },
+    "node_modules/@vueuse/core": {
+      "version": "9.12.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.12.0.tgz",
+      "integrity": "sha512-h/Di8Bvf6xRcvS/PvUVheiMYYz3U0tH3X25YxONSaAUBa841ayMwxkuzx/DGUMCW/wHWzD8tRy2zYmOC36r4sg==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "9.12.0",
+        "@vueuse/shared": "9.12.0",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "9.12.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.12.0.tgz",
+      "integrity": "sha512-9oJ9MM9lFLlmvxXUqsR1wLt1uF7EVbP5iYaHJYqk+G2PbMjY6EXvZeTjbdO89HgoF5cI6z49o2zT/jD9SVoNpQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "9.12.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.12.0.tgz",
+      "integrity": "sha512-TWuJLACQ0BVithVTRbex4Wf1a1VaRuSpVeyEd4vMUWl54PzlE0ciFUshKCXnlLuD0lxIaLK4Ypj3NXYzZh4+SQ==",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@xmpp/base64": {
       "version": "0.13.1",
       "resolved": "https://registry.npmjs.org/@xmpp/base64/-/base64-0.13.1.tgz",
@@ -8898,9 +8987,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "18.11.18",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
-      "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
+      "version": "18.11.19",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.19.tgz",
+      "integrity": "sha512-YUgMWAQBWLObABqrvx8qKO1enAvBUdjZOAWQ5grBAkp5LQv45jBvYKZ3oFS9iKRCQyFjqw6iuEa1vmFqtxYLZw==",
       "dev": true
     },
     "@types/resolve": {
@@ -8927,6 +9016,11 @@
       "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==",
       "dev": true
     },
+    "@types/web-bluetooth": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+    },
     "@vitejs/plugin-vue": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.0.0.tgz",
@@ -9058,6 +9152,46 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
       "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
     },
+    "@vueuse/core": {
+      "version": "9.12.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.12.0.tgz",
+      "integrity": "sha512-h/Di8Bvf6xRcvS/PvUVheiMYYz3U0tH3X25YxONSaAUBa841ayMwxkuzx/DGUMCW/wHWzD8tRy2zYmOC36r4sg==",
+      "requires": {
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "9.12.0",
+        "@vueuse/shared": "9.12.0",
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+          "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+          "requires": {}
+        }
+      }
+    },
+    "@vueuse/metadata": {
+      "version": "9.12.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.12.0.tgz",
+      "integrity": "sha512-9oJ9MM9lFLlmvxXUqsR1wLt1uF7EVbP5iYaHJYqk+G2PbMjY6EXvZeTjbdO89HgoF5cI6z49o2zT/jD9SVoNpQ=="
+    },
+    "@vueuse/shared": {
+      "version": "9.12.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.12.0.tgz",
+      "integrity": "sha512-TWuJLACQ0BVithVTRbex4Wf1a1VaRuSpVeyEd4vMUWl54PzlE0ciFUshKCXnlLuD0lxIaLK4Ypj3NXYzZh4+SQ==",
+      "requires": {
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+          "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+          "requires": {}
+        }
+      }
+    },
     "@xmpp/base64": {
       "version": "0.13.1",
       "resolved": "https://registry.npmjs.org/@xmpp/base64/-/base64-0.13.1.tgz",
diff --git a/package.json b/package.json
index f71c7ae..5470dc8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "xmpp-web",
-  "version": "0.9.8",
+  "version": "0.9.9",
   "private": true,
   "description": "Lightweight web chat client for XMPP server",
   "homepage": "https://github.com/nioc/xmpp-web",
@@ -28,6 +28,7 @@
     "@creativebulma/bulma-divider": "^1.1.0",
     "@oruga-ui/oruga-next": "^0.5.4",
     "@oruga-ui/theme-bulma": "^0.2.6",
+    "@vueuse/core": "^9.12.0",
     "@xmpp/client": "^0.13.1",
     "@xmpp/debug": "^0.13.0",
     "@xmpp/error": "^0.13.1",
diff --git a/src/components/NotificationsSwitch.vue b/src/components/NotificationsSwitch.vue
new file mode 100644
index 0000000..afd4581
--- /dev/null
+++ b/src/components/NotificationsSwitch.vue
@@ -0,0 +1,48 @@
+<template>
+  <div v-if="isNotificationsSupported">
+    <o-switch v-model="hasNotificationsEnabledSwitch" title="Allow the browser to send you notifications when you miss messages">Notifications</o-switch>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'pinia'
+import { useStore } from '@/store'
+import { useWebNotification } from '@vueuse/core'
+
+const lsNotificationKey = 'hasNotificationsEnabled'
+
+export default {
+  name: 'NotificationsSwitch',
+  setup() {
+    const { isSupported } = useWebNotification()
+    return { isNotificationsSupported: isSupported }
+  },
+  computed: {
+    ...mapState(useStore, [
+      'hasNotificationsEnabled',
+    ]),
+    hasNotificationsEnabledSwitch: {
+      get() {
+        return this.hasNotificationsEnabled
+      },
+      set(hasNotificationsEnabled) {
+        if (hasNotificationsEnabled) {
+          localStorage.setItem(lsNotificationKey, hasNotificationsEnabled)
+        } else {
+          localStorage.removeItem(lsNotificationKey)
+        }
+        this.setNotificationStatus(hasNotificationsEnabled)
+      },
+    },
+  },
+  mounted () {
+    const hasNotificationsEnabled = localStorage.getItem(lsNotificationKey)
+    if (hasNotificationsEnabled) {
+      this.setNotificationStatus(hasNotificationsEnabled)
+    }
+  },
+  methods: {
+    ...mapActions(useStore, ['setNotificationStatus']),
+  },
+}
+</script>
diff --git a/src/components/PresenceController.vue b/src/components/PresenceController.vue
index a98f164..496113f 100644
--- a/src/components/PresenceController.vue
+++ b/src/components/PresenceController.vue
@@ -11,6 +11,7 @@
         <div :class="[isNavbarItem ? 'navbar-item' : 'dropdown-item']">
           <o-switch v-model="isAutoPresence" title="You will be seen away when the browser is not active" @change="setAutoPresence">Set away when inactive</o-switch>
         </div>
+        <notifications-switch :class="[isNavbarItem ? 'navbar-item' : 'dropdown-item']" />
       </div>
     </div>
   </div>
@@ -18,6 +19,7 @@
 
 <script>
 import presence from '../components/Presence.vue'
+import NotificationsSwitch from '../components/NotificationsSwitch.vue'
 import { mapState } from 'pinia'
 import { useStore } from '@/store'
 
@@ -25,6 +27,7 @@ export default {
   name: 'PresenceController',
   components: {
     presence,
+    NotificationsSwitch,
   },
   props: {
     isNavbarItem: {
diff --git a/src/store/index.js b/src/store/index.js
index 746b143..8ea823c 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,4 +1,7 @@
 import { defineStore } from 'pinia'
+import { useWebNotification, useDocumentVisibility } from '@vueuse/core'
+
+let showNotification = null
 
 const getDefaultState = () => {
   return {
@@ -11,6 +14,7 @@ const getDefaultState = () => {
     httpFileUploadMaxSize: null,
     isOnline: false,
     presence: 'chat',
+    hasNotificationsEnabled: false,
   }
 }
 
@@ -227,6 +231,16 @@ export const useStore = defineStore('main', {
         }
         return copy
       }
+      if (this.hasNotificationsEnabled) {
+        const visibility = useDocumentVisibility()
+        if (visibility.value === 'hidden' && showNotification !== null) {
+          showNotification({
+            body: 'You have received new message',
+            renotify: false,
+            tag: 'unread',
+          })
+        }
+      }
       if (payload.message.from.bare === this.activeChat) {
         // message is in the displayed chat, do not increment counter
         return
@@ -301,6 +315,19 @@ export const useStore = defineStore('main', {
       }
     },
 
+    setNotificationStatus (hasNotificationsEnabled) {
+      this.hasNotificationsEnabled = hasNotificationsEnabled
+      if (hasNotificationsEnabled && showNotification === null) {
+        // trigger Notifications API for requesting user permission (only one time) and intialize showNotification function
+        ({ show: showNotification } = useWebNotification({
+          title: window.config.name,
+          icon: '/img/icons/android-chrome-192x192.png',
+          dir: 'auto',
+          lang: 'en',
+        }))
+      }
+    },
+
     // clear state
     clear () {
       const defaultState = getDefaultState()