Notification with Service Workers now is working!

When a Notification arrives, it save into the IndexDb,
then in Vue.js call a polling to check in the db if there is a different record count.
If is different then call a get to update the notification.

src/store/NotifStore.ts

@@ -14,6 +14,7 @@ export const useNotifStore = defineStore('NotifStore', {
     last_notifs: [],
     show_all: true,
     updateNotification: false,
+    countNotif: 0,
   }),
 
   getters: {
@@ -32,11 +33,17 @@ export const useNotifStore = defineStore('NotifStore', {
   },
   actions: {
 
+    updateArrNotif() {
+      this.setBadgeIconApp()
+    },
+
     setNotif(notif: INotif) {
       console.log('setNotif', notif)
       if (notif) {
         this.last_notifs = [notif, ...this.last_notifs]
       }
+      this.updateArrNotif()
+
     },
 
     setAsRead(idnotif: string) {
@@ -44,6 +51,18 @@ export const useNotifStore = defineStore('NotifStore', {
       if (rec) {
         rec.read = true
       }
+
+      this.updateArrNotif()
+    },
+
+    async setBadgeIconApp(){
+      // Get our dummy count and update it,
+      // just to give more context for this demo.
+      const countNow = this.getnumNotifUnread()
+
+      // @ts-ignore
+      await navigator.setAppBadge(countNow)
+        .catch((error: any) => { /* ... */ });
     },
 
     setAllRead(username: string) {
@@ -55,6 +74,7 @@ export const useNotifStore = defineStore('NotifStore', {
               rec.read = true
             }
           }
+          this.updateArrNotif()
 
         })
         .catch((error) => {
@@ -71,6 +91,7 @@ export const useNotifStore = defineStore('NotifStore', {
             this.last_notifs = this.last_notifs.filter((rec) => rec._id !== id)
           }
 
+          this.updateArrNotif()
         })
         .catch((error) => {
           console.error(error)
@@ -85,6 +106,7 @@ export const useNotifStore = defineStore('NotifStore', {
           // console.log('res', res)
           if (res) {
             this.last_notifs = []
+            this.updateArrNotif()
           }
 
         })
@@ -110,6 +132,7 @@ export const useNotifStore = defineStore('NotifStore', {
           } else {
             this.last_notifs = []
           }
+          this.updateArrNotif()
           return true
         })
         .catch((error) => {
@@ -157,5 +180,10 @@ export const useNotifStore = defineStore('NotifStore', {
           return false
         })
     },
+
+    setCountNotifs(num: number) {
+      this.countNotif = num
+    },
   },
+
 })