Chrome中Web推送通知不显示求助：Service Worker收信号但无弹窗

看起来你遇到了个挺头疼的问题——Chrome里Service Worker能收到推送信号、打日志，就是不显示通知，但其他浏览器和别的设备上的Chrome都正常。结合你的描述和给出的代码片段，我整理了几个大概率的排查方向：

1. 最可能的原因：缺失通知显示的核心代码 #

你贴的代码只完成了监听推送事件并打印日志，但没有调用showNotification()来实际触发通知！这是推送通知流程里的关键一步，标准规范里必须手动调用这个方法才能显示通知。

补全后的代码大概是这样的：

'use strict';
self.addEventListener('push', function(event) {
  console.log('[Service Worker] Push Received.');
  // 解析推送携带的 payload，没有的话用默认值
  const payload = event.data ? event.data.json() : { title: '新通知' };
  // 通知配置项，按需调整
  const notificationOptions = {
    body: payload.content || '您有一条新消息',
    icon: '/path-to-your-icon/icon-192x192.png', // 替换成你的图标路径
    badge: '/path-to-your-badge/badge-72x72.png',
    data: payload // 可以携带额外数据，方便点击通知时处理
  };

  // 用 event.waitUntil 包裹，确保Service Worker保持活跃直到通知显示完成
  event.waitUntil(
    self.registration.showNotification(payload.title, notificationOptions)
  );
});

2. 检查Chrome的通知权限（网站+系统级） #

• 网站权限：打开Chrome设置 → 隐私和安全 → 网站设置 → 通知，确认你的网站处于「允许」状态，有时候可能误触禁用了。
• 系统级权限：别忽略系统层面的设置！比如Windows的「设置→系统→通知」里，要确保Chrome被允许发送通知；Mac则是「系统偏好设置→通知→Chrome」开启通知权限。

3. 清除Service Worker缓存并重新注册 #

有时候旧的Service Worker缓存会导致奇怪的问题，你可以：

1. 打开Chrome开发者工具 → Application → Service Workers
2. 找到你的项目对应的Service Worker，点击Unregister
3. 刷新页面，让页面重新注册Service Worker，再测试推送

4. 确认Service Worker作用域正确 #

如果你的Service Worker注册时指定了特殊的作用域，要确保推送事件的处理逻辑在这个作用域覆盖范围内，否则可能无法正常触发通知显示。

内容的提问来源于stack exchange，提问作者Žygimantas Žilevičius