Improve notification

src/app/home/home.page.ts

@@ -182,7 +182,7 @@ export class HomePage implements OnInit {
 
     synchro.registerCallback('Notification', (DataArray)=> {
 
-      this.webNotificationPopupService.sendNotification(DataArray.Object)
+      this.webNotificationPopupService.sendNotification(DataArray)
       
       this.storageService.get('Notifications').then((data:any)=>{
         data.push(DataArray)

src/app/services/notification/sw.js

@@ -0,0 +1,17 @@
+  
+self.addEventListener('install', function() {
+  self.skipWaiting();
+});
+  
+self.addEventListener('activate', function(event) {
+  event.waitUntil(clients.claim());
+});
+  
+self.addEventListener('notificationclick', function(event) {
+  // Close the notification when it is clicked
+  event.notification.close();
+  console.log(event)
+});
+
+
+  

src/app/services/notification/web-notification-popup.service.ts

@@ -1,11 +1,20 @@
 import { Injectable } from '@angular/core';
 import { AlertController, Platform } from '@ionic/angular';
+import { v4 as uuidv4 } from 'uuid'
 @Injectable({
   providedIn: 'root'
 })
 export class WebNotificationPopupService {
 
-  constructor( private platform: Platform) { }
+  constructor( private platform: Platform) {
+
+    var myWorker = new Worker( new URL('./sw.js', import.meta.url));
+
+    myWorker.onmessage = function(oEvent) {
+      console.log('Worker said : ' + oEvent.data);
+    }
+
+  }
 
 
   askNotificationPermission() {
@@ -44,10 +53,37 @@ export class WebNotificationPopupService {
     return true;
   }
 
-  sendNotification(message) {
+  cc = 0;
+
+  sendNotification(e) {
     if (this.platform.is('desktop') || this.platform.is('mobileweb')) {}
     else {return false} 
 
-    var n = new Notification(message);
+    Notification.requestPermission((result) => {
+      if (result === 'granted') {
+        navigator.serviceWorker.ready.then((registration)=> {
+
+          registration.showNotification(e.Object+ this.cc,  {
+            body: e.Service,
+            icon: 'assets/icon/favicon.png',
+            requireInteraction: true,
+            tag: 'require-interaction'+uuidv4(),
+            // actions: [
+            //   {action: 'like', title: 'Like', icon: 'https://example/like.png'},
+            //   {action: 'reply', title: 'Reply', icon: 'https://example/reply.png'}
+            // ]
+          }).then(e =>{
+            console.log(e)
+          })
+  
+        });
+
+
+   
+      }
+    });
+
+
+    
   }
 }