Update to use WebNotifications, actually work

src/app/app.component.html

@@ -1,4 +1 @@
 <router-outlet></router-outlet>
-<div *ngIf="userType === 'customer' && message.value" style="position: fixed; padding:1em; right: 2em; bottom: 2em; background-color: grey;">
-  {{ message | async | json }}
-</div>

src/app/app.component.ts

@@ -19,7 +19,10 @@ export class AppComponent {
       this.messagingService.requestPermission();
       this.messagingService.receiveMessage();
       this.message = this.messagingService.currentMessage;
+      console.log(this.message);
+      if (this.message.notification) {
+	console.log('Notification waiting');
+      }
     }
-    console.log(this.message);
   }
 }

src/app/dashboard/send-push-notification.component.ts

@@ -19,12 +19,16 @@ export class SendPushNotificationComponent implements OnInit {
   constructor(private api: ApiService) {
     this.api.getTopics().subscribe(
       result => {
-        this.topicList = result.topics;
+      	if (result.topics.length > 0) {
-        this.topicIdList = Object.keys(this.topicList);
+		      this.topicList = result.topics;
+		      this.topicIdList = Object.keys(this.topicList);
+		    } else {
+		    	console.warn("No topics returned from server");
+		    }
       },
       error => {
-        console.log("Couldn't get topics");
+        console.error("Couldn't get topics");
-        console.log(error._body);
+        console.error(error._body);
       }
     );
     this.sendMessageForm = new FormGroup({
@@ -49,7 +53,7 @@ export class SendPushNotificationComponent implements OnInit {
           this.api.setUserInfo( result.email, result.display_name || result.name );
         },
         error => {
-          console.log( error._body );
+          console.error( error._body );
           this.noEmail = true;
         }
       );
@@ -68,13 +72,13 @@ export class SendPushNotificationComponent implements OnInit {
               messagetext: '',
             });
           } else {
-            console.log('Upload Error');
+            console.error('Upload Error');
             this.sendMessageFormStatusError = JSON.stringify(result.status) + 'Error, ' + JSON.stringify(result.message);
             this.sendMessageFormStatus = 'send_failed';
           }
         },
         error => {
-          console.log('Upload Error');
+          console.error('Upload Error');
           try {
             this.sendMessageFormStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
           } catch (e) {

src/app/service/messaging.service.ts

@@ -15,17 +15,17 @@ export class MessagingService {
 
   requestPermission() {
     if (!('Notification' in window)) {
-      alert("This browser does not support notifications.");
+      alert('This browser does not support notifications.');
       return;
     } else if (Notification.permission === 'granted') {
-      console.log("Push 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");
+      console.log('Push notification permission not granted');
       Notification.requestPermission().then(function(permission) {
         if (permission === 'granted') {
-          console.log("Push notification permission granted");
+          console.log('Push notification permission granted');
           this.registerDeviceToken();
         }
       });
@@ -36,15 +36,15 @@ export class MessagingService {
     this.angularFireMessaging.requestToken.subscribe((token) => {
       this.api.checkDeviceToken({'token': token}).subscribe(
         result => {
-          if (result.exists) console.log("Device already registered!");
+          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!");
+                console.log('Device registered successfully!');
                 localStorage.setItem('devicetoken', token);
               },
               error => {
-                console.error("Device could not be registered!", error._body);
+                console.error('Device could not be registered!', error._body);
               }
             );
           }
@@ -60,7 +60,8 @@ export class MessagingService {
 
   receiveMessage() {
     this.angularFireMessaging.messages.subscribe((message) => {
-      console.log("show message!", message);
+      console.log('show message!', message);
+	    let notification = new Notification(message.notification.title, { body: message.notification.body });
       this.currentMessage.next(message);
     });
   }

src/firebase-messaging-sw.js

@@ -1,17 +1,15 @@
-import { environment } from "./environments/environment";
-
 importScripts('https://www.gstatic.com/firebasejs/8.0.0/firebase-app.js');
 importScripts('https://www.gstatic.com/firebasejs/8.0.0/firebase-messaging.js');
 
 firebase.initializeApp({
-  apiKey: environment.firebase.apiKey, 
+  apiKey: "AIzaSyB-iIcMH_eyfFT043_8pSGX3YYugpjm3Fg",
-  authDomain: environment.firebase.authDomain,
+	authDomain: "localspend-47012.firebaseapp.com",
-  databaseURL: environment.firebase.databaseURL,
+	databaseURL: "https://localspend-47012.firebaseio.com",
-  projectId: environment.firebase.projectId,
+	projectId: "localspend-47012",
-  storageBucket: environment.firebase.storageBucket,
+	storageBucket: "localspend-47012.appspot.com",
-  messagingSenderId: environment.firebase.messagingSenderId,
+	messagingSenderId: "469562689216",
-  appId: environment.firebase.appId,
+	appId: "1:469562689216:web:567a20c57c123f17354f25",
-  measurementId: environment.firebase.measurementId  
+	measurementId: "G-KL7BGT2EW0"
 });
 
 const messaging = firebase.messaging();