From a7ade53ca643d511ed1fdb6441b077fa4c2e378d Mon Sep 17 00:00:00 2001 From: Johannes Millan Date: Mon, 12 Nov 2018 20:26:05 +0100 Subject: [PATCH] feat: make notifications work --- angular.json | 8 +++-- src/app/core/notify/notify.model.ts | 2 +- src/app/core/notify/notify.module.ts | 11 ++----- src/app/core/notify/notify.service.ts | 47 +++++++++++++-------------- src/service-workers/notifications.js | 38 ---------------------- 5 files changed, 31 insertions(+), 75 deletions(-) delete mode 100644 src/service-workers/notifications.js diff --git a/angular.json b/angular.json index 6a7770367..e87624948 100644 --- a/angular.json +++ b/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", diff --git a/src/app/core/notify/notify.model.ts b/src/app/core/notify/notify.model.ts index f1b9f2142..574b10378 100644 --- a/src/app/core/notify/notify.model.ts +++ b/src/app/core/notify/notify.model.ts @@ -1,3 +1,3 @@ export interface NotifyModel extends Notification { - time?: number; + duration?: number; } diff --git a/src/app/core/notify/notify.module.ts b/src/app/core/notify/notify.module.ts index ea09877cb..3fbe239a5 100644 --- a/src/app/core/notify/notify.module.ts +++ b/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); } } diff --git a/src/app/core/notify/notify.service.ts b/src/app/core/notify/notify.service.ts index 7721a1e7a..02a42fba2 100644 --- a/src/app/core/notify/notify.service.ts +++ b/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) { 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; } } diff --git a/src/service-workers/notifications.js b/src/service-workers/notifications.js deleted file mode 100644 index 6918fa0d0..000000000 --- a/src/service-workers/notifications.js +++ /dev/null @@ -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('/'); - } - })); -}); \ No newline at end of file