Service Worker中Push Event数据为null，如何在Fetch Event传数据？

阿华AIGC实验室

2026-5-26

兄弟，我之前也踩过这个一模一样的坑！问题根源出在你混淆了Service Worker里不同事件的作用和属性，咱们一步步理清楚：

核心问题：找错了事件类型

你现在是在fetch事件里尝试获取event.data，但Service Worker的fetch事件对应的是拦截网络请求的场景，它的事件对象（FetchEvent）根本没有data属性，所以打印出来自然是null。

而你用FCM/GCM发送的推送消息，会触发Service Worker的push事件——只有PushEvent才携带data属性，用来获取推送里的内容。

正确获取推送数据的方式

如果你想拿到发送的{title: "Foo", body: "Bar"}，应该监听push事件而不是fetch事件：

self.addEventListener('push', (event) => {
  // 解析推送携带的数据
  const payload = event.data ? event.data.json() : {};
  console.log('推送数据:', payload); // 这里就能拿到你发送的title和body了

  // 要是想展示通知，还可以加上这段代码
  event.waitUntil(
    self.registration.showNotification(payload.title || '默认标题', {
      body: payload.body || '默认内容',
      icon: '/path/to/your-icon.png'
    })
  );
});

额外的小提示

你现在用的是GCM的旧端点https://android.googleapis.com/gcm/send，官方现在推荐使用FCM的新端点https://fcm.googleapis.com/fcm/send，记得同步更新请求地址。
确保你的Service Worker已经正确注册，且用户的推送订阅ID（token.subscriptionId）是有效的，不然推送根本发不到客户端。

如果真的要在Fetch事件中传递数据

如果你本意是想通过某个fetch请求传递数据，让Service Worker的fetch事件捕获，那得把数据放在请求的body、URL参数或者自定义请求头里，再通过event.request来获取：
比如前端发起请求：

fetch('/your-custom-api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({title: "Foo", body: "Bar"})
});

然后在Service Worker的fetch事件里解析：

self.addEventListener('fetch', async (event) => {
  if (event.request.url.includes('/your-custom-api')) {
    const requestData = await event.request.json();
    console.log('请求携带的数据:', requestData); // 这里就能拿到内容了
  }
});

内容的提问来源于stack exchange，提问作者s-leg3ndz