开发PWA时为何PWA与Chrome浏览器会收到重复推送通知？

问题出在你同时使用了Pusher Beams官方SDK的service worker处理逻辑和自定义的push事件监听器，两者都会触发通知展示，导致重复弹窗。

核心原因 #

你引入的https://js.pusher.com/beams/service-worker.js已经内置了push事件的处理逻辑，会自动解析推送 payload 并显示通知；而你又手动添加了一份push事件监听器，再次调用showNotification，相当于同一个推送被处理了两次。

解决方案 #

移除自定义的push事件监听器，让Pusher Beams的SDK负责通知的展示。如果需要自定义通知样式或点击行为，通过SDK提供的方式配置即可。

修改后的Service Worker代码

importScripts('https://js.pusher.com/beams/service-worker.js');

// 仅保留自定义的通知点击逻辑（如果需要），不需要可直接删除
self.addEventListener('notificationclick', function (event) {
    event.notification.close();
    event.waitUntil(
        clients.openWindow(event.notification.data?.url || '/')
    );
});

额外检查点 #

1. 打开Chrome DevTools的Application > Service Workers面板，确保只有一个激活状态的service worker，避免多个worker同时处理推送事件。
2. 推送payload中的tag参数可以确保相同tag的通知不会重复叠加，但这不是解决本次重复问题的核心，核心还是移除重复的事件监听器。

内容的提问来源于stack exchange，提问作者snb programmer03