Notificaciones push web (WPN)

Habilitación de WPN

Trabajador de servicio

Suscripción y anulación de suscripción a notificaciones

• Suscripción a notificaciones: es un esfuerzo de implementación completo y, de forma predeterminada, la aplicación proporciona un gancho para suscribirse durante el proceso de inicio de sesión. Justo después del inicio de sesión, la aplicación hace una llamada para suscribir el método definido dentro de src/app/core/services/PushNotificationAbstractService (a partir de hoy es sólo un método ficticio). PushNotificationAbstractService debe alterarse temporalmente para implementar el método de suscripción para que los usuarios puedan suscribirse a las notificaciones y esta suscripción pueda persistir en algún lugar del extremo del cliente. Se puede invocar el mismo servicio personalizado desde cualquier lugar de la aplicación para cambiar el comportamiento predeterminado, que es la suscripción durante el inicio de sesión.
• Anulación de suscripción a notificaciones: de nuevo, se llama al método de anulación de suscripción ficticio de src/app/core/services/PushNotificationAbstractService durante el cierre de sesión para el flujo proporcionado por la aplicación y debe alterarse temporalmente para satisfacer las necesidades del cliente. De forma muy básica, este es el aspecto que tendrá un servicio alterado temporalmente (el servicio alterado temporalmente debe definirse dentro de store-extensions-src/app/core/services/
  Nota: Esta es una implementación muy básica y no es deseable para la aplicación de producción.

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

Invocación del servicio push

La invocación del servicio push es una implementación personalizada completa y debe ser atendida por el cliente. Normalmente, los eventos que se plantean en Sterling Store Engagement o IBM® Sterling Order Management System deben capturarse, y el servicio push debe invocarse con los datos correctos para que se muestren al usuario asociado.

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

Manejo de sucesos de pulsación de envío y notificación

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

Limitaciones