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.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",

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>

src/components/PresenceController.vue

@@ -11,20 +11,23 @@
         <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>
 </template>
 
 <script>
 import presence from '../components/Presence.vue'
+import NotificationsSwitch from '../components/NotificationsSwitch.vue'
 import { mapState } from 'pinia'
 import { useStore } from '@/store'
 
 export default {
   name: 'PresenceController',
   components: {
     presence,
+    NotificationsSwitch,
   },
   props: {
     isNavbarItem: {

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()