Pear-Trading/FoodLoop-Web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Update to use WebNotifications, actually work

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/app/app.component.html
View file

@ -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>

5
src/app/app.component.ts
View file

@ -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);
}
}

18
src/app/dashboard/send-push-notification.component.ts
View file

@ -19,12 +19,16 @@ export class SendPushNotificationComponent implements OnInit {
constructor(private api: ApiService) {
this.api.getTopics().subscribe(
result => {
this.topicList = result.topics;
this.topicIdList = Object.keys(this.topicList);
if (result.topics.length > 0) {
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.log(error._body);
console.error("Couldn't get topics");
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) {

17
src/app/service/messaging.service.ts
View file

@ -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);
});
}

18
src/firebase-messaging-sw.js
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-messaging.js');
firebase.initializeApp({
apiKey: environment.firebase.apiKey,
authDomain: environment.firebase.authDomain,
databaseURL: environment.firebase.databaseURL,
projectId: environment.firebase.projectId,
storageBucket: environment.firebase.storageBucket,
messagingSenderId: environment.firebase.messagingSenderId,
appId: environment.firebase.appId,
measurementId: environment.firebase.measurementId
apiKey: "AIzaSyB-iIcMH_eyfFT043_8pSGX3YYugpjm3Fg",
authDomain: "localspend-47012.firebaseapp.com",
databaseURL: "https://localspend-47012.firebaseio.com",
projectId: "localspend-47012",
storageBucket: "localspend-47012.appspot.com",
messagingSenderId: "469562689216",
appId: "1:469562689216:web:567a20c57c123f17354f25",
measurementId: "G-KL7BGT2EW0"
});
const messaging = firebase.messaging();