谷歌浏览器html5推送收不到_开启谷歌html5推送法【启推】_技术教程

Chrome Web Push 失败主因是环境不满足硬性条件：必须 HTTPS（localhost 除外）+ 用户授权 + Service Worker 正确注册激活；常见问题包括协议非安全、SW 文件响应异常、scope 错误、隐私模式屏蔽、pushManager 未就绪、VAPID 格式错误及 FCM 链路中断。

Chrome 浏览器中 HTML5 推送（即基于 Push API 和 Service Worker 的 Web Push）收不到，绝大多数情况不是“没开启”，而是根本没通过 Chrome 的推送准入条件——必须是 HTTPS 环境 + 用户显式授权 + Service Worker 正确注册并激活。本地 http://localhost 可以调试，但任何非 localhost 的 HTTP 域名（比如 http://example.com）会被 Chrome 直接禁用 Notification 和 PushManager。

为什么 `navigator.serviceWorker.register()` 失败或不触发推送权限请求

常见现象：调用 register() 后无反应、Promise pending、控制台报 Failed to register a ServiceWorker 或 Only secure origins are allowed。

当前页面协议不是 HTTPS（或非 localhost），Chrome 拒绝注册 Service Worker —— 这是硬性限制，无法绕过
service-worker.js 文件返回了非 200 状态码（如 404、403、301），或响应头含 Content-Type: text/html（应为 application/javascript）
注册路径错误：例如在 /admin/ 路径下执行 navigator.serviceWorker.register('/sw.js')，但未指定 scope，导致 SW 只能控制 /admin/sw.js 同级路径，无法拦截根路径推送事件
浏览器隐私模式、第三方 Cookie 阻止策略或某些插件（如 uBlock Origin、Ghostery）会主动屏蔽 registration.pushManager 初始化

为什么 `pushManager.subscribe()` 报错或返回空对象

典型错误：DOMException: Registration failed - permission denied、TypeError: Cannot read property 'subscribe' of undefined、或返回的 PushSubscription 对象里 endpoint 为空。

pushManager 是异步初始化的，必须等 serviceWorker.ready 后再调用，不能在 register() 的 then 回调里直接链式调用
用户从未点击过通知授权弹窗（Notification.requestPermission() 返回 "default"），或之前点过
“阻止”，此时 pushManager.subscribe() 会静默失败
Chrome 80+ 默认禁用第三方站点的推送订阅（尤其跨域 iframe 场景），需确保调用发生在主帧且由用户手势（如 click）触发
后端生成的 VAPID 公钥格式错误（例如没去掉换行、没转 Base64URL）、或私钥签名时未使用 sha256 + pem 格式，会导致 Chrome 拒绝订阅

如何验证 Chrome 是否真正收到推送消息

即使前端订阅成功，消息也可能卡在 Google 的 FCM（Firebase Cloud Messaging）中，或被 Chrome 主动丢弃。不要只看后端返回 201，要查真实送达链路。

打开 chrome://serviceworker-internals/，找到对应 SW，点击「Unregister」再刷新页面重试，排除旧缓存干扰
在 SW 文件中添加 self.addEventListener('push', e => { console.log('PUSH RECEIVED:', e); })，然后用 cURL 或 Postman 模拟发送推送（注意 endpoint 必须带 Authorization 和 Encryption 头）
检查 Chrome 地址栏左侧的锁图标 → “网站设置” → 查看“通知”是否为“允许”，且“推送”权限已启用（Chrome 111+ 将推送权限和通知分离，需单独确认）
若用 Firebase SDK（firebase-messaging），确保初始化时传入了正确的 firebaseConfig 和 vapidKey，且 messaging.getToken() 返回的是有效 endpoint（以 https://fcm.googleapis.com/fcm/send/... 开头）

curl -X POST \
  https://fcm.googleapis.com/fcm/send \
  -H "Authorization: key=YOUR_SERVER_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "to": "YOUR_ENDPOINT",
    "notification": {
      "title": "Test",
      "body": "From cURL"
    }
  }'

真正卡点往往不在代码写法，而在环境信任链：HTTPS 证书是否被 Chrome 认可（自签证书不行）、VAPID 密钥对是否由同一套工具生成、推送 endpoint 是否过期（Chrome 会定期轮换）。每次改完配置，务必清空 chrome://settings/content/notifications 中的站点权限并重启浏览器。