Electron+React集成web-push推送时出现push service not available报错如何解决

报错核心原因 #

DOMException: Registration failed - push service not available 本质是你调用的Web Push API依赖浏览器内置的官方推送服务（Chrome依赖FCM、火狐依赖Mozilla Push Service），而Electron内置的Chromium默认裁剪了这部分能力，没有预装对应的推送服务组件和配置，所以完全照搬Web端的web-push教程必然会触发该报错。

其他可能的触发原因：

• Service Worker注册异常，未完成注册就调用push订阅接口
• 开发环境站点未使用HTTPS（localhost除外），不符合Web Push API的安全上下文要求
• 系统未给当前Electron应用开放通知权限

可行解决思路 #

• （最推荐）放弃Web Push方案，改用Electron原生生态实现推送：
  • 后端侧替换Web Push协议，用普通WebSocket、MQTT或者商用第三方推送服务做消息下发通道
  • Electron侧收到下发消息后，直接调用官方Notification模块弹出系统通知，示例代码：

    // 主进程代码
    const { Notification } = require('electron')
    function showPushNotice(title, body) {
      new Notification({
        title,
        body,
        icon: '/path/to/app-icon.png'
      }).show()
    }
    

  • 该方案无需适配浏览器推送服务，兼容性高，踩坑少，完全适配Electron桌面端场景。
• 如果你一定要坚持使用Web Push方案，需要手动给Electron补全推送服务依赖：
  • 去Google Cloud控制台申请FCM服务，拿到Sender ID、API密钥等配置参数
  • 在Electron主进程初始化阶段注入FCM配置，打包时对应适配Windows端WNS、macOS端APNs的系统推送服务配置
  • 该方案配置复杂度高，不同系统需要单独适配，不推荐桌面端场景使用。
• 前置问题排查：
  • 先在Electron开发者工具的Application面板确认Service Worker状态正常，无注册报错
  • 开发环境用localhost域名，或者给站点配置HTTPS证书
  • 检查系统通知设置，确认当前Electron应用有弹出通知的权限。

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