Web-Push-Benachrichtigungen (WPN)

Web-Push-Benachrichtigungen sind per Mausklick steuerbare Rich-Content-Nachrichten, die es Benutzern ermöglichen, rechtzeitige Aktualisierungen von Websites zuzulassen. Die Anwendung unterstützt die Empfangsbereitschaft für Push-Benachrichtigungs-APIs und das Broadcasting der Benachrichtigungen, die von verschiedenen Features innerhalb der Anwendung verarbeitet werden können.

WPN aktivieren

Hinweis: Für alle Funktionen im Zusammenhang mit Web-Push-Benachrichtigungen wird das Angular-Service-Worker-Modul genutzt.

Service-Worker

Da der Service-Worker erforderlich ist, damit die Push-Benachrichtigung funktioniert, wird ein von der Anwendung bereitgestellter Standard-Service-Worker registriert, der für Push-und Benachrichtigungsklickereignisse empfangsbereit ist und diese Ereignisse sendet, für die verschiedene Funktionen empfangsbereit sein können.

Push-Ereignis: Der Service-Worker überwacht das Push-Ereignis, zeigt die Benachrichtigung an und sendet eine Nachricht mit Push-Daten, die von verschiedenen Funktionen überwacht werden können.
Benachrichtigungsklickereignis: Der Servicebearbeiter überwacht das Benachrichtigungsklickereignis, schließt die Benachrichtigung und sendet eine Nachricht mit den Benachrichtigungsdaten (einschließlich Aktionsdetails), für die verschiedene Funktionen empfangsbereit sein können.

Benachrichtigungen abonnieren und abbestellen

Benachrichtigungen abonnieren: Ist ein vollständiger Implementierungsaufwand und die Anwendung stellt standardmäßig einen Hook für die Subskription während des Anmeldeprozesses bereit. Unmittelbar nach der Anmeldung führt die Anwendung einen Aufruf aus, um die in src/app/core/services/PushNotificationAbstractService definierte Methode zu abonnieren (ab heute ist es nur eine Dummy-Methode). PushNotificationAbstractService sollte überschrieben werden, um die Methode "subscribe" zu implementieren, damit Benutzer Benachrichtigungen abonnieren können und diese Subskription am Ende des Kunden bestehen bleibt. Derselbe angepasste Service kann von einer beliebigen Stelle in der Anwendung aufgerufen werden, um das Standardverhalten, d. h. die Subskription während der Anmeldung, zu ändern.
Abonnement von Benachrichtigungen beenden: Erneut wird die Dummy-Methode zum Abmelden von src/app/core/services/PushNotificationAbstractService während der Abmeldung für den von der Anwendung bereitgestellten Ablauf aufgerufen und sollte entsprechend den Anforderungen des Kunden überschrieben werden. Im Grunde genommen sieht ein überschriebener Service so aus (der überschriebene Service muss in store-extensions-src/app/core/services/ definiert werden).
Hinweis: Dies ist eine sehr einfache Implementierung und für Produktionsanwendungen nicht wünschenswert.


import { Injectable, Injector } from '@angular/core';
import { PushNotificationAbstractService } from '@simcore/
services/push-notification-abstract.service';
import { SwPush } from '@angular/service-worker';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { map, take } from 'rxjs/operators';
import { UIUtilsService } from '@sim-core/services/uiutils.
service';
@Injectable({
providedIn: 'root'
})
export class PushNotificationService extends
PushNotificationAbstractService {
readonly VAPID_PUBLIC_KEY = '<vapid key>';
isWPNSubscribed = false;
subsObj = null;
constructor(
protected injector: Injector,
public swPush: SwPush,
private http: HttpClient
) {
super(injector);
if (this.swPush.isEnabled) {
this.swPush.subscription
.pipe(take(1))
.subscribe(pushSubscription => {
if (pushSubscription) {
this.isWPNSubscribed = true;
}
});
}
}
public subscribe({}) {
this.subscribeToNotifications(null);
}
subscribeToNotifications(event) {
if (event) {
event.preventDefault();
}
this.swPush.requestSubscription({
serverPublicKey: this.VAPID_PUBLIC_KEY
})
.then(pushSubscription => {
this.http.post('https://<host-port>/<susbcribe-end-point>',
{'subscription': pushSubscription.toJSON(), 'any-other-data':''});
this.isWPNSubscribed = true;
})
.catch(err => console.error('Could not subscribe to
notifications', err));
}
public unsubscribe({}) {
this.unsubscribeToNotifications(null);
}
unsubscribeToNotifications(event) {
event.preventDefault();
this.swPush.subscription
.pipe(take(1))
.subscribe(pushSubscription => {
pushSubscription.unsubscribe().then(result => {
if (result) {
this.isWPNSubscribed = false;
this.http.post('https://<host-port>/<unsusbcribe-endpoint>',
{'data': 'data'})
} else {
console.log('Could not unsubscribe to notifications');
}
})
.catch(err => console.error('unsubcribe subscription failed',
err));
});
}
}

Push-Service aufrufen

Der Aufruf des Push-Service ist eine vollständige angepasste Implementierung und muss vom Kunden ausgeführt werden. Normalerweise müssen Ereignisse, die in Sterling Store Engagement oder IBM® Sterling Order Management System ausgelöst werden, erfasst werden, und der Push-Dienst muss mit den richtigen Daten aufgerufen werden, damit sie dem entsprechenden Benutzer angezeigt werden.

Typische Benachrichtigungsnutzdaten sehen wie folgt aus:


{
"notification": {
"title": "Notification Title", //mandatory
"body": "Notification Message!",
"data": {
"dateOfArrival": Date.now(),
"primaryKey": 1
}
}
}

Push-und Benachrichtigungsklickereignisse verarbeiten

Wie im Abschnitt "Servicebenutzer" erwähnt, kümmert sich der von der Anwendung bereitgestellte Servicebenutzer bereits um das Anzeigen und Schließen der Benachrichtigung. Darüber hinaus sendet er die Push-und Benachrichtigungsklickereignisse, die die Anwendung zur weiteren Verarbeitung überwachen kann. Das von der Anwendung bereitgestellte Winkelserviceworkermodul bietet eine Möglichkeit, diese Ereignisse zu abonnieren, die wie folgt verwendet werden können:


this.swPush.messages.subscribe(message => {
console.log('Push message: ', message);
});
this.swPush.notificationClicks.subscribe(notificationMsg => {
console.log('Notification Click: ', notificationMsg);
});

Hinweis: swPush ist ein Verweis auf

@angular/service-worker
module

Dieser Code kann im PushNotificationService -Service beibehalten werden.

Einschränkungen

Wird nur in Chrome für Desktop und Android unterstützt
https unterstützt nur gültige SSL-Zertifikate und funktioniert nur mit ihnen.
Wenn sich ein Benutzer zum ersten Mal nach dem^3. Mai-Upgrade bei der Anwendung anmeldet, muss er die Benutzerschnittstelle erneut laden, um den Service-Worker und damit Push-Benachrichtigungen zu verwenden.