路线当用户点击在PWA通知,角6和网络推在Node.js的链接
我的工作在Angular6使用SwPush推入PWA的通知。为此,我正在使用@角/服务工作者。我能够从节点服务器发送通知。但是,当我点击收到的通知,这是不能够路由所需的URL。我使用web-push module in node.js
,这也是有效载荷:
"payload": {
"title": "Sample Notification",
"actions": [
{
"action": "opentweet",
"url":"",
"title": "Open tweet"
}
],
"body": "A sample data to check the notification availability!",
"dir": "auto",
"icon": ".png",
"badge": ".png",
"lang": "en",
"url": "",
"renotify": true,
"requireInteraction": true,
"tag": 926796012340920300,
"vibrate": [
100,
50,
100
],
"data": {
"url": "",
"favorite_count": 0,
"retweet_count": 0
}
}
我在用
var webPush=require('web-push');
//sub is userSubscriptionObject to send the notifications to subscribed user browser.
webPush.sendNotification(sub, JSON.stringify(payload))))
在角,
export class IndexComponent implements OnInit {
users: any = [];
constructor(
private http: HttpClient,
private router: Router,
private swPush: SwPush) {
console.log('this is index');
}
ngOnInit() {
this.getCoins();
}
subscribeNotifications(){
this.swPush.requestSubscription({
serverPublicKey: "BMW3STH0ODuNdhFVAZIy8FUDEwt2f8LLpWBiBnz8WE0_558rZc4aLbZUD9y-HxMlfCtyE5OD0mk3xa2oFJZu5n0"
}).then(sub => {
console.log("Notification Subscription: ", sub);
this
.http
.post('', sub);.subscribe(
() => {
console.log('Sent push subscription object to server.');
},
err => console.log('Could not send subscription object to server, reason: ', err)
);
})
.catch(err => console.error("Could not subscribe to notifications", err));
}
unsubscribeNotifications(){
this.swPush.subscription.pipe(take(1)).subscribe(subscriptionValue=>{
console.log('this is un subscription', subscriptionValue);
this
.http
.post('', subscriptionValue);
.subscribe(
res => {
console.log('[App] Delete subscriber request answer', res)
// Unsubscribe current client (browser)
subscriptionValue.unsubscribe()
.then(success => {
console.log('[App] Unsubscription successful', success)
})
.catch(err => {
console.log('[App] Unsubscription failed', err)
})
},
err => {
console.log('[App] Delete subscription request failed', err)
}
);
});
}
sendNotifications(){
console.log('subscribeNotifications')
this
.http
.post('', null).subscribe(res=>{
console.log('subscribed successfully');
});
}
}
回答如下:
有没有错,你的有效载荷,据我所看到的。有效载荷仅仅是其传送到您的浏览器,在浏览器方面,你需要实现以处理有效载荷数据,即notificationClick
处理程序,浏览到所需的URL数据。一个简单的notifictionClick
处理程序可以在服务人员如下实施:
this.scope.addEventListener('notificationclick', (event) => {
console.log('[Service Worker] Notification click Received. event', event);
event.notification.close();
if (clients.openWindow && event.notification.data.url) {
event.waitUntil(clients.openWindow(event.notification.data.url));
}
});
仅供参考看看下面的链接:https://github/angular/angular/issues/20956#issuecomment-374133852 https://medium/google-developer-experts/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-2-practice-3221471269a1
路线当用户点击在PWA通知,角6和网络推在Node.js的链接
我的工作在Angular6使用SwPush推入PWA的通知。为此,我正在使用@角/服务工作者。我能够从节点服务器发送通知。但是,当我点击收到的通知,这是不能够路由所需的URL。我使用web-push module in node.js
,这也是有效载荷:
"payload": {
"title": "Sample Notification",
"actions": [
{
"action": "opentweet",
"url":"",
"title": "Open tweet"
}
],
"body": "A sample data to check the notification availability!",
"dir": "auto",
"icon": ".png",
"badge": ".png",
"lang": "en",
"url": "",
"renotify": true,
"requireInteraction": true,
"tag": 926796012340920300,
"vibrate": [
100,
50,
100
],
"data": {
"url": "",
"favorite_count": 0,
"retweet_count": 0
}
}
我在用
var webPush=require('web-push');
//sub is userSubscriptionObject to send the notifications to subscribed user browser.
webPush.sendNotification(sub, JSON.stringify(payload))))
在角,
export class IndexComponent implements OnInit {
users: any = [];
constructor(
private http: HttpClient,
private router: Router,
private swPush: SwPush) {
console.log('this is index');
}
ngOnInit() {
this.getCoins();
}
subscribeNotifications(){
this.swPush.requestSubscription({
serverPublicKey: "BMW3STH0ODuNdhFVAZIy8FUDEwt2f8LLpWBiBnz8WE0_558rZc4aLbZUD9y-HxMlfCtyE5OD0mk3xa2oFJZu5n0"
}).then(sub => {
console.log("Notification Subscription: ", sub);
this
.http
.post('', sub);.subscribe(
() => {
console.log('Sent push subscription object to server.');
},
err => console.log('Could not send subscription object to server, reason: ', err)
);
})
.catch(err => console.error("Could not subscribe to notifications", err));
}
unsubscribeNotifications(){
this.swPush.subscription.pipe(take(1)).subscribe(subscriptionValue=>{
console.log('this is un subscription', subscriptionValue);
this
.http
.post('', subscriptionValue);
.subscribe(
res => {
console.log('[App] Delete subscriber request answer', res)
// Unsubscribe current client (browser)
subscriptionValue.unsubscribe()
.then(success => {
console.log('[App] Unsubscription successful', success)
})
.catch(err => {
console.log('[App] Unsubscription failed', err)
})
},
err => {
console.log('[App] Delete subscription request failed', err)
}
);
});
}
sendNotifications(){
console.log('subscribeNotifications')
this
.http
.post('', null).subscribe(res=>{
console.log('subscribed successfully');
});
}
}
回答如下:
有没有错,你的有效载荷,据我所看到的。有效载荷仅仅是其传送到您的浏览器,在浏览器方面,你需要实现以处理有效载荷数据,即notificationClick
处理程序,浏览到所需的URL数据。一个简单的notifictionClick
处理程序可以在服务人员如下实施:
this.scope.addEventListener('notificationclick', (event) => {
console.log('[Service Worker] Notification click Received. event', event);
event.notification.close();
if (clients.openWindow && event.notification.data.url) {
event.waitUntil(clients.openWindow(event.notification.data.url));
}
});
仅供参考看看下面的链接:https://github/angular/angular/issues/20956#issuecomment-374133852 https://medium/google-developer-experts/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-2-practice-3221471269a1
与本文相关的文章
评论列表 (0)
- 暂无评论