我的网站需要进行网络推送通知,并且我在我的create-react-app中设置了自定义服务工作者
self.addEventListener('activate', () => {
console.log('Activate!!!!!');
});
self.addEventListener('push', (event) => {
console.log('[Push] : ', event.data.json());
event.stopImmediatePropagation();
const data = event.data.json();
event.waitUntil(
self.registration.showNotification(data.title, {
body: data.body,
tag: data.tag,
data: data.params,
requireInteraction: true,
icon: './punch.png',
}),
);
});
self.addEventListener('notificationclick', (event) => {
const data = event.notification.data;
console.log('get Data : ', data);
event.notification.close();
event.waitUntil(clients.openWindow(data.url === '/' ? '' : data.url));
});
self.addEventListener('notificationclose', (event) => {
console.log('notification close!!!');
// log send to server
});
此外,我需要多次通知,因此在推送事件监听器中插入requireInteraction = true
。
它可以推动乘法。 sample picture
但是,只有工作notificationclick事件在第一个或新通知中起作用,而其他人则不起作用。
我在Google中搜索了解决方案,找不到适合我的答案。
我的环境: