Update to use WebNotifications, actually work

This commit is contained in:
Ben Goldsworthy 2021-03-20 23:43:36 +00:00
parent 58d0265022
commit 9bbf6af75c
5 changed files with 32 additions and 29 deletions

View file

@ -1,4 +1 @@
<router-outlet></router-outlet> <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>

View file

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

View file

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

View file

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

View file

@ -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-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.0.0/firebase-messaging.js'); importScripts('https://www.gstatic.com/firebasejs/8.0.0/firebase-messaging.js');
firebase.initializeApp({ 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(); const messaging = firebase.messaging();