feat: make notifications work

angular.json

@@ -35,7 +35,9 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [
+              "src/service-workers/notifications.js"
+            ]
           },
           "configurations": {
             "production": {
@@ -85,7 +87,9 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": [],
+            "scripts": [
+              "src/service-workers/notifications.js"
+            ],
             "assets": [
               "src/favicon.ico",
               "src/assets",

src/app/core/notify/notify.model.ts

@@ -1,3 +1,3 @@
 export interface NotifyModel extends Notification {
-  time?: number;
+  duration?: number;
 }

src/app/core/notify/notify.module.ts

@@ -1,14 +1,13 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SnackModule } from '../snack/snack.module';
-import { ServiceWorkerModule } from '@angular/service-worker';
 import { NotifyService, SERVICE_WORKER_URL } from './notify.service';
 
 @NgModule({
   imports: [
     CommonModule,
     SnackModule,
-    ServiceWorkerModule.register(SERVICE_WORKER_URL),
+    // ServiceWorkerModule.register(SERVICE_WORKER_URL),
   ],
   declarations: [],
   providers: [
@@ -16,13 +15,7 @@ import { NotifyService, SERVICE_WORKER_URL } from './notify.service';
   ]
 })
 export class NotifyModule {
-  constructor(
-    private _notifyService: NotifyService,
-  ) {
+  constructor() {
     Notification.requestPermission();
-
-    setTimeout(() => {
-      this._notifyService.notify({body: 'TEST'});
-    }, 2000);
   }
 }

src/app/core/notify/notify.service.ts

@@ -1,40 +1,37 @@
 import { Injectable } from '@angular/core';
 import { NotifyModel } from './notify.model';
 
-export const SERVICE_WORKER_URL = './service-workers/notifications.js';
-
 @Injectable({
   providedIn: 'root'
 })
 export class NotifyService {
-
-  constructor() {
-    console.log('I am here!');
-    Notification.requestPermission();
-
-
-  }
-
   async notify(notification: Partial<NotifyModel>) {
     if (this._isServiceWorkerNotificationSupport()) {
-      // await navigator.serviceWorker.ready;
-      const registration = navigator.serviceWorker.getRegistration(SERVICE_WORKER_URL).then(res => console.log(res));
-      console.log(registration);
-
-      // return await registration.showNotification(notification.title, {
-      //   body: notification.body,
-      //   icon: notification.icon || 'assets/icons/icon-128x128.png',
-      //   vibrate: [100, 50, 100],
-      //   data: {
-      //     dateOfArrival: Date.now(),
-      //     primaryKey: 1
-      //   },
-      // }
-      // );
+      const permission = await Notification.requestPermission();
+      if (permission === 'granted') {
+        const instance = new Notification(notification.title, {
+          body: notification.body,
+          icon: notification.icon || 'assets/icons/icon-128x128.png',
+          vibrate: [100, 50, 100],
+          data: {
+            dateOfArrival: Date.now(),
+            primaryKey: 1
+          },
+        });
+        instance.onclick = () => {
+          instance.close();
+        };
+        setTimeout(() => {
+          instance.close();
+        }, notification.duration || 10000);
+        return instance;
+      } else {
+        console.warn('No notifications supported');
+      }
     }
   }
 
   private _isServiceWorkerNotificationSupport() {
-    return 'serviceWorker' in navigator;
+    return 'Notification' in window;
   }
 }

src/service-workers/notifications.js

@@ -1,38 +0,0 @@
-'use strict';
-
-self.addEventListener('push', function(event) {
-  const title = 'Yay a message.';
-  const body = 'We have received a push message.';
-  const icon = '../img/' + (event.icon || 'icon_128x128-with-pad.png');
-  const tag = 'simple-push-demo-notification-tag';
-
-  event.waitUntil(
-    self.registration.showNotification(title, {
-      body: body,
-      icon: icon,
-      tag: tag
-    })
-  );
-});
-
-self.addEventListener('notificationclick', function(event) {
-  // See: http://crbug.com/463146
-  event.notification.close();
-
-  // This looks to see if the current is already open and
-  // focuses if it is
-  event.waitUntil(clients.matchAll({
-    type: 'window'
-  }).then((clientList) => {
-    for (let i = 0; i < clientList.length; i++) {
-      const client = clientList[i];
-      console.log(client);
-      if (client.url === '/' && 'focus' in client) {
-        return client.focus();
-      }
-    }
-    if (clients.openWindow) {
-      return clients.openWindow('/');
-    }
-  }));
-});