Notification通知在移动端为啥不弹出？

设计师小倩提问于 2026-03-14 17:15:19 阅读 73

交互

我在做移动端网页，调用 Notification API 时明明用户点了允许，但通知就是不弹出来，本地测试 Chrome 桌面版没问题，一到手机上就失效。

试过加了 secure context 判断，也确认是 HTTPS 环境，但还是不行。代码大概是这样：

if (Notification.permission === 'granted') {
  new Notification('提醒', { body: '你有新消息' });
}

我来解答赞 7 收藏

反馈

2 条解答

Prog.炳诺 Lv1

移动端通知的问题确实挺烦人。首先检查下设备设置，很多手机系统会对通知权限做二次限制，即使浏览器允许了也不行。

然后看看你的代码逻辑，虽然你判断了 permission 是 granted，但最好再加个 feature detection，像这样：

if ('Notification' in window && Notification.permission === 'granted') {

  new Notification('提醒', { body: '你有新消息' });

}

另外要注意，移动端的通知行为很依赖用户交互。试试把通知触发绑定到一个用户点击事件上，而不是直接在页面加载时就发。

还有个坑就是，有些安卓机对低电量模式会禁用通知。记得测试的时候关闭省电模式。

最后提醒一句，处理通知内容要小心格式和特殊字符，别让用户看到一堆乱码。我上次就是因为忘了转义特殊字符导致显示错误，白白调试了半天。

2026-03-26 23:07

欧阳小敏 Lv1

移动端浏览器和桌面版 Chrome 完全是两码事。移动端 Chrome 要求 Notification 必须走 Service Worker 通道，直接 new Notification() 在手机上根本不会弹。

你需要在页面上注册 Service Worker，然后用 Service Worker 来触发通知：

先注册：

if ('serviceWorker' in navigator && 'Notification' in window) {

  navigator.serviceWorker.register('/sw.js').then(registration => {

    console.log('Service Worker 注册成功');

    

    if (Notification.permission === 'granted') {

      // 通过 Service Worker 显示通知

      registration.showNotification('提醒', { 

        body: '你有新消息',

        icon: '/icon.png'

      });

    }

  });

}

Service Worker 文件（sw.js）里不需要写什么东西，只要注册上就行，但文件必须存在。

另外提醒一点，国内很多移动端浏览器对 Notification API 支持很差，比如微信内置浏览器、UC 浏览器基本不支持。如果你的用户群体主要在国内，建议直接用第三方推送服务或者短信/邮件替代。

还有一种情况是，如果你是想实现服务端主动推送，那光有 Notification API 不够，得用 Web Push（Push API + VAPID），需要后端配合。

2026-03-17 07:00