React PWA推送通知订阅后无法收到消息怎么办？

UI子轩提问于 2026-02-05 02:50:28 阅读 90

移动

我按照文档给React PWA添加推送通知功能，用户订阅成功后一直没收到测试消息。服务端说推送成功了，但手机和浏览器都没反应，这是哪里出问题了？

我的订阅代码是这样的：


async function subscribe() {
  const swReg = await navigator.serviceWorker.ready;
  const subscription = await swReg.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(process.env.VAPID_KEY)
  });
  // 发送到服务器的逻辑
}

已经检查过浏览器权限和service worker注册都没问题，控制台也没有报错。推送证书和端点地址看起来也正常，但发送测试消息后完全没动静，求大神指点！

PWA移动推送通知

我来解答赞 14 收藏

反馈

1 条解答

开发者福萍 Lv1

你这情况很可能是推送消息没有设置contentEncoding导致的。试试下面这个代码，发送消息的时候加上contentEncoding参数：

const payload = {

  title: '测试消息',

  body: '这是一条测试推送',

  icon: '/icon.png',

  badge: '/badge.png',

  vibrate: [100, 50, 100],

  data: { url: '/' },

};



const options = {

  contentEncoding: 'aes128', // 关键点在这里

  ttl: 60  60  24 * 7, // 一周内有效

};



webPush.sendNotification(subscription, JSON.stringify(payload), options)

  .then(() => console.log('推送成功'))

  .catch(err => console.error('推送失败', err));

另外检查下你的service worker里有没有正确监听push事件。应该加个监听器来显示通知：

self.addEventListener('push', event => {

  const data = event.data.json();

  self.registration.showNotification(data.title, {

    body: data.body,

    icon: data.icon,

    badge: data.badge,

    vibrate: data.vibrate,

    data: data.data

  });

});

2026-02-05 03:00