웹 푸시 알림 (WPN)

WPN 사용

서비스 작업자

알림 구독 및 구독 취소

• 알림 구독: 완전한 구현 노력이며 기본적으로 애플리케이션은 로그인 프로세스 중에 구독할 후크를 제공합니다. 로그인 직후에 애플리케이션은 src/app/core/services/PushNotificationAbstractService 내에 정의된 메소드를 구독하기 위해 호출을 작성합니다 (현재는 더미 메소드임). PushNotificationAbstractService 는 사용자가 알림에 등록할 수 있고 이 등록이 고객의 끝에 지속될 수 있도록 등록 메소드를 구현하기 위해 대체되어야 합니다. 애플리케이션의 모든 위치에서 동일한 사용자 정의 서비스를 호출하여 로그인 중 구독인 기본 동작을 변경할 수 있습니다.
• 알림 구독 해지: 다시 src/app/core/services/PushNotificationAbstractService 의 더미 구독 해지 메소드가 애플리케이션 제공 플로우에 대한 로그아웃 중에 호출되며 고객의 요구에 맞게 대체되어야 합니다. 매우 기본적으로 이는 대체된 서비스가 표시되는 방식입니다 (대체된 서비스는 store-extensions-src/app/core/services/ 내에 정의되어야 함).
  참고: 이는 매우 기본적인 구현이며 프로덕션 애플리케이션에는 적합하지 않습니다.

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

푸시 서비스 호출

푸시 서비스 호출은 완전한 사용자 정의 구현이며 고객이 주의해야 합니다. 일반적으로 스털링 Store Engagement 또는 IBM® Sterling Order Management 시스템에서 발생한 이벤트는 캡처되어야 하며, 푸시 서비스가 올바른 데이터로 호출되어야 관련 사용자에게 표시될 수 있습니다.

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

푸시 및 알림 클릭 이벤트 처리

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

제한사항