React项目中如何修改Service Worker监听Push Event问题咨询

针对你使用的react": "^16.8.2"和react-scripts": "2.1.5"版本，默认的Service Worker是由Workbox自动生成的，要添加Push事件监听器，我们需要自定义Service Worker并调整注册逻辑，具体步骤如下：

1. 创建自定义Service Worker文件 #

在项目的public目录下新建一个custom-service-worker.js文件，在里面添加Push事件的处理逻辑：

// public/custom-service-worker.js
self.addEventListener('push', (event) => {
  // 解析推送消息的 payload，没有则使用默认值
  const payload = event.data ? event.data.json() : { title: '新通知' };
  const notificationOptions = {
    body: payload.body || '您收到一条新消息',
    icon: '/logo192.png', // 替换成你的项目通知图标路径
    badge: '/logo512.png',
    data: { targetUrl: payload.url || '/' } // 点击通知后跳转的页面链接
  };

  // 等待通知显示完成
  event.waitUntil(
    self.registration.showNotification(payload.title, notificationOptions)
  );
});

// 可选：添加通知点击事件处理
self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  // 打开指定页面
  event.waitUntil(
    clients.openWindow(event.notification.data.targetUrl)
  );
});

2. 修改Service Worker的注册逻辑 #

原来的src/index.js里默认调用serviceWorker.register()，我们需要替换成注册自定义Service Worker的逻辑：
打开src/index.js，找到原Service Worker注册代码，替换为以下内容：

// src/index.js
// 仅在支持Service Worker和PushManager的浏览器中执行
if ('serviceWorker' in navigator && 'PushManager' in window) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/custom-service-worker.js')
      .then(registration => {
        console.log('自定义Service Worker注册成功:', registration.scope);
        // 这里可以保留你之前已实现的订阅逻辑
        // 比如 registration.pushManager.subscribe(...)
      })
      .catch(err => {
        console.error('自定义Service Worker注册失败:', err);
      });
  });
}

3. 关键注意事项 #

• 权限验证：确保你已经通过Notification.requestPermission()获取了用户的通知权限，这是推送功能正常工作的前提。
• 环境测试：Service Worker仅支持HTTPS环境或localhost，开发时需运行npm run build后用静态服务器启动生产环境包进行测试（react-scripts 2.x默认开发环境不启用Service Worker）。
• Payload格式：服务器发送推送消息时，要确保payload是JSON格式，这样才能在Service Worker中正确解析。

完成以上修改后，当服务器发送Push消息时，你的Service Worker就能捕获push事件并显示通知了。

内容的提问来源于stack exchange，提问作者Mattia M.