点击@angular/service-worker推送通知的action部分 [英] Clicking the action part of @angular/service-worker push notifications
问题描述
我一直在尝试将用户重定向到操作"来自后端 (PHP) 的 Web 推送的一部分.
I've been trying to redirect users to the "action" part of Web push coming from the backend (PHP).
return (new WebPushMessage)
->title('Title')
->icon('icon.png')
->body('Body Msg')
->action('Open Notification', 'open_notification')
->data(['id' => $notification->id,'url'=>'http://somewhere']);
默认服务工作者使用:
self.addEventListener('notificationclick', function(event) {
console.log('On notification click: ', event.notification.tag);
event.notification.close();
// This looks to see if the current is already open and
// focuses if it is
event.waitUntil(clients.matchAll({
type: "window"
}).then(function(clientList) {
for (var i = 0; i < clientList.length; i++) {
var client = clientList[i];
if (client.url == '/' && 'focus' in client)
return client.focus();
}
if (clients.openWindow)
return clients.openWindow('/');
}));
});
来自 https://developer.mozilla.org/en-US/docs/Web/Events/notificationclick
Angular 5 使用
Angular 5 uses
import {SwPush, SwUpdate} from '@angular/service-worker';
我的问题是如何使用@angular/service-worker 在前端(Angular 5)中解释这一点
My question then is how to interpret this in the front end (Angular 5) using @angular/service-worker
推荐答案
得到了来自 u-ryo 在 Github 上
Got a response from u-ryo on Github
有一个解决方法.将下面的代码添加到 ngsw-worker.js 周围this.scope.addEventListener('push', (event) => this.onPush(event));(第 1775 行).
There is a workaround. Add the codes below to ngsw-worker.js around the line this.scope.addEventListener('push', (event) => this.onPush(event));(Line 1775).
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));
}
});
然后您可以在notification.data.url"中指定网址.
Then you can specify the URL in the "notification.data.url".
https://github.com/angular/angular/issues/20956#issuecomment-374133852
这篇关于点击@angular/service-worker推送通知的action部分的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!