From 7bed14e2382d5586937affbeeeda003f3f7f6811 Mon Sep 17 00:00:00 2001 From: Ben Goldsworthy Date: Mon, 30 Nov 2020 17:32:56 +0000 Subject: [PATCH] Add push notification and device token management. --- src/app/app.component.html | 5 +- src/app/app.component.ts | 8 ++- .../send-push-notification.component.html | 6 +-- .../send-push-notification.component.ts | 16 +++--- src/app/providers/api-service.ts | 17 +++++- src/app/service/messaging.service.ts | 52 ++++++++++++++----- 6 files changed, 74 insertions(+), 30 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 5095a9a..9f9f3cf 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1,4 @@ -{{ message | async | json }} + +
+ {{ message | async | json }} +
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 76d9e17..937e805 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,21 +1,25 @@ import { Component } from '@angular/core'; import { MessagingService } from './service/messaging.service'; +import { Observable } from 'rxjs'; @Component({ selector: 'app-root', - template: '' + templateUrl: './app.component.html', }) export class AppComponent { title = 'push-notification'; message; + userType; constructor(private messagingService: MessagingService) { } ngOnInit() { - if (localStorage.getItem('usertype') === 'customer') { + this.userType = localStorage.getItem('usertype'); + if (this.userType === 'customer') { this.messagingService.requestPermission(); this.messagingService.receiveMessage(); this.message = this.messagingService.currentMessage; } + console.log(this.message); } } diff --git a/src/app/dashboard/send-push-notification.component.html b/src/app/dashboard/send-push-notification.component.html index 14f70dd..fbb558f 100644 --- a/src/app/dashboard/send-push-notification.component.html +++ b/src/app/dashboard/send-push-notification.component.html @@ -10,9 +10,9 @@
- +
diff --git a/src/app/dashboard/send-push-notification.component.ts b/src/app/dashboard/send-push-notification.component.ts index 868b966..3f687f4 100644 --- a/src/app/dashboard/send-push-notification.component.ts +++ b/src/app/dashboard/send-push-notification.component.ts @@ -13,24 +13,23 @@ export class SendPushNotificationComponent implements OnInit { noEmail = false; sendMessageFormStatus: any; sendMessageFormStatusError = 'Error received, please try again.'; - deviceTokenList: any; - deviceTokenIdList: any; + topicList: any; + topicIdList: any; constructor(private api: ApiService) { - this.api.getDeviceTokens().subscribe( + this.api.getTopics().subscribe( result => { - console.log(result); - this.deviceTokenList = result.tokens; - this.deviceTokenIdList = Object.keys(this.deviceTokenList); + this.topicList = result.topics; + this.topicIdList = Object.keys(this.topicList); }, error => { - console.log("Couldn't get device token"); + console.log("Couldn't get topics"); console.log(error._body); } ); this.sendMessageForm = new FormGroup({ messagetext: new FormControl('', Validators.required), - devicetokens: new FormControl('', Validators.required), + topic: new FormControl('', Validators.required), }); } @@ -58,7 +57,6 @@ export class SendPushNotificationComponent implements OnInit { } onSubmit(): void { - console.log(this.sendMessageForm.value); this.api .sendMessage(this.sendMessageForm.value) .subscribe( diff --git a/src/app/providers/api-service.ts b/src/app/providers/api-service.ts index b0ec487..781d78e 100644 --- a/src/app/providers/api-service.ts +++ b/src/app/providers/api-service.ts @@ -108,6 +108,14 @@ export class ApiService { // Push notifications + public checkDeviceToken(data) { + data.session_key = this.sessionKey; + return this.http.post( + this.apiUrl + '/check-device-token', + data + ); + } + public addDeviceToken(data) { data.session_key = this.sessionKey; return this.http.post( @@ -124,8 +132,15 @@ export class ApiService { ); } + public getTopics() { + const key = this.sessionKey; + return this.http.post( + this.apiUrl + '/get-topics', + { session_key : key } + ); + } + public sendMessage(data) { - data.devicetoken = localStorage.getItem('devicetoken'); data.sender = localStorage.getItem('displayname'); return this.http.post( this.apiUrl + '/send-message', diff --git a/src/app/service/messaging.service.ts b/src/app/service/messaging.service.ts index 08486f4..9f622af 100644 --- a/src/app/service/messaging.service.ts +++ b/src/app/service/messaging.service.ts @@ -9,24 +9,48 @@ export class MessagingService { currentMessage = new BehaviorSubject(null); constructor( - private angularFireMessaging: AngularFireMessaging, + private readonly angularFireMessaging: AngularFireMessaging, private api: ApiService - ) { - this.angularFireMessaging.messages.subscribe((_messaging: AngularFireMessaging) => { - _messaging.onMessage = _messaging.onMessage.bind(_messaging); - _messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging); - }) - } + ) { } requestPermission() { + if (!('Notification' in window)) { + alert("This browser does not support notifications."); + return; + } else if (Notification.permission === 'granted') { + console.log("Push notification permission granted"); + this.registerDeviceToken(); + } else if (Notification.permission === 'denied' || + Notification.permission === 'default') { + console.log("Push notification permission not granted"); + Notification.requestPermission().then(function(permission) { + if (permission === 'granted') { + console.log("Push notification permission granted"); + this.registerDeviceToken(); + } + }); + } + } + + registerDeviceToken() { this.angularFireMessaging.requestToken.subscribe((token) => { - this.api.addDeviceToken({'token': token, 'email': localStorage.getItem('email')}).subscribe( + this.api.checkDeviceToken({'token': token}).subscribe( result => { - console.log("Device registered successfully!"); - localStorage.setItem('devicetoken', token); + if (result.exists) console.log("Device already registered!"); + else { + this.api.addDeviceToken({'token': token, 'email': localStorage.getItem('email')}).subscribe( + result => { + console.log("Device registered successfully!"); + localStorage.setItem('devicetoken', token); + }, + error => { + console.error("Device could not be registered!", error._body); + } + ); + } }, error => { - console.error("Device could not be registered!", error._body); + console.error(error._body); } ); }, (err) => { @@ -35,9 +59,9 @@ export class MessagingService { } receiveMessage() { - this.angularFireMessaging.messages.subscribe((payload) => { - console.log("new message received. ", payload); - this.currentMessage.next(payload); + this.angularFireMessaging.messages.subscribe((message) => { + console.log("show message!", message); + this.currentMessage.next(message); }); } }