Blazor WASM PWA：谷歌Chrome浏览器不显示推送通知

我之前调试Blazor PWA推送功能时也碰到过一模一样的情况——Edge里通知正常弹出，Chrome明明已经授权通知，却死活不展示，但Service Worker里的断点确实触发了，说明消息已经到浏览器了。结合你的情况，给你几个针对性的排查方向：

• 检查VAPID密钥的编码格式
  Chrome对VAPID公私钥的Base64编码要求比Edge更严格，必须是URL安全的Base64格式：把普通Base64里的+替换成-，/替换成_，同时去掉末尾的=后缀。Blazing Pizza示例里用的就是这种格式，如果你替换的密钥没做这个转换，Chrome会直接静默丢弃通知请求。你可以重新生成符合要求的密钥，或者手动转换现有密钥再测试。

• 确认Chrome的PWA后台权限配置
  光开启通知权限还不够，Chrome可能限制了PWA的后台活动：

  1. 点击地址栏右侧的PWA站点图标（就是那个小披萨图标）
  2. 选择「站点设置」
  3. 在「权限」板块里，确保「后台同步」和「通知」都设为「允许」
     另外，进入Chrome的「设置 > 隐私和安全 > 网站设置 > 通知」，检查是否开启了「允许使用通知的网站在后台发送通知」这个选项（部分版本藏在「高级」设置里）。

• 验证通知创建的代码参数
  虽然断点触发了，但self.registration.showNotification()的参数可能不符合Chrome的要求。比如Chrome强制要求通知必须包含title字段，icon的路径要相对于Service Worker的作用域（不是页面的相对路径）。你可以在Service Worker代码里加个日志输出：

  console.log('Received notification payload:', payload);
  await self.registration.showNotification(payload.title, payload.options);
  

  然后打开Chrome DevTools的「Application > Service Workers > Console」查看输出，确认title是否存在，icon路径是否正确。

• 清除旧的Service Worker和缓存数据
  Chrome的缓存机制有时候会坑人——旧的Service Worker、订阅信息可能和新配置冲突。你可以：

  1. 打开Chrome DevTools的「Application」标签页
  2. 在「Service Workers」里点击「Unregister」注销旧的Worker
  3. 切换到「Clear storage」，点击「Clear site data」清除所有缓存
     之后重新注册PWA、重新订阅推送，再测试通知是否正常弹出。

• 查看Chrome推送服务的内部日志
  要是以上方法都没用，你可以访问chrome://gcm-internals/查看Chrome推送服务的详细日志。这里会记录推送注册、消息接收的全流程，看看有没有「Push message received but not displayed」之类的错误提示，或者注册失败的记录，这些日志能帮你定位到更底层的问题。

如果还是解决不了，建议把Service Worker里处理通知的代码片段，以及Chrome DevTools里的相关日志贴出来，这样能更精准地排查问题。

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