javascript如何实现网页通知_Notification API如何使用【教程】

秋辰姑娘_6434

秋辰姑娘_6434

2026-01-22

349人浏览

原创

Notification API 需用户手势触发权限请求,仅 permission 为 "granted" 时可创建通知;需监听 onclick 等事件并手动 close() 管理实例,移动端 Safari 支持极弱。

javascript如何实现网页通知_notification api如何使用【教程】

网页通知功能不是所有浏览器都默认允许的,Notification API 必须由用户主动触发(比如点击按钮),且需要用户明确授权,否则调用会静默失败或抛出 DOMException: Permission denied。

如何检查并请求通知权限

不能直接调用 new Notification() 就弹窗,必须先确认权限状态。用户首次访问时权限默认是 default,此时需调用 Notification.requestPermission() 触发浏览器权限提示。

  • Notification.permission 返回 "granted"、"denied" 或 "default"
  • 只有在 "granted" 时才能创建通知;"default" 表示尚未请求,可调用 requestPermission();"denied" 则无法恢复,需引导用户手动开启(地址栏锁图标 → 网站设置)
  • 注意:requestPermission() 必须在用户手势(如 click、touchend)中调用,否则现代浏览器会拒绝并返回 Promise 拒绝状态

创建一个基础通知

权限就绪后,用 new Notification(title, options) 创建通知。title 是必填字符串,options 是可选对象,常见字段包括 body、icon、badge、data 等。

  • icon 推荐使用绝对路径或 base64,相对路径可能因页面路由变化而 404
  • badge 在桌面通知栏小图标旁显示徽章(如未读数),仅部分系统支持
  • data 可传任意 JS 值,用于事件回调中识别上下文(比如通知对应哪条消息 ID)
  • 通知一旦创建即异步显示,不阻塞主线程,也不保证立即渲染(尤其在后台标签页中)
if (Notification.permission === "granted") {
  new Notification("新消息", {
    body: "你有一条未读通知",
    icon: "/img/icon-192.png",
    data: { id: 123 }
  });
}

监听通知生命周期事件

通知实例提供 onclick、onshow、onerror、onclose 四个事件钩子,但要注意:这些事件只在通知可见期间有效,页面关闭后无法响应。

JavaScript 测试模式
JavaScript 测试模式

使用 Jest、Vitest 和 Testing Library 实施全面的测试策略,包括单元测试、集成测试和端到端测试,涵盖模拟、测试夹具和测试驱动开发。在编

下载
  • onclick:用户点击通知时触发,常用于跳转页面或聚焦窗口 —— 记得加 window.focus() 和 self.focus() 防止被忽略
  • onshow:通知成功显示后触发(非 100% 可靠,某些浏览器不支持)
  • onerror:资源加载失败(如 icon 404)或系统限制导致通知无法显示时触发
  • onclose:用户手动关闭或超时自动关闭后触发;但**不会**在用户点击后自动触发,必须显式调用 notification.close()

关闭通知与内存管理

通知对象不会自动释放,尤其在用户长时间不操作时可能堆积。虽然浏览器通常会在一定时间后自动回收,但主动管理更稳妥。

  • 每个 Notification 实例都有 .close() 方法,可用于手动关闭
  • 若需批量控制,建议用 Map 或数组缓存通知实例,并在页面卸载前遍历调用 .close()(注意:beforeunload 中调用可能被忽略)
  • 避免在 setInterval 或轮询中无节制创建通知 —— 多个通知叠加可能被系统折叠或拦截,Chrome 对同一来源短时间内的通知有频率限制
  • 移动端 Safari 对 Notification 支持极弱(iOS 16.4+ 才开始有限支持),不要依赖它做关键链路

权限模型和事件时机是最大陷阱:你以为调用了就一定弹出来,其实可能卡在权限流程里;你以为点了通知就能跳转,结果因为页面没 focus 而失败。别绕过用户交互去“自动”触发,也别假设通知一定能被看到。

大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2986

5

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

2023.11.06

6239

7

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

2026.03.24

4487

22

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.03

1938

5

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

3184

5

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

2023.10.24

6404

49

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

2023.11.24

6569

6

java读取文件转成字符串的方法
java读取文件转成字符串的方法

Java8引入了新的文件I/O API,使用java.nio.file.Files类读取文件内容更加方便。对于较旧版本的Java,可以使用java.io.FileReader和java.io.BufferedReader来读取文件。在这些方法中,你需要将文件路径替换为你的实际文件路径,并且可能需要处理可能的IOException异常。想了解更多java的相关内容,可以阅读本专题下面的文章。

2024.03.22

8094

16

php中定义字符串的方式
php中定义字符串的方式

php中定义字符串的方式:单引号;双引号;heredoc语法等等。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

2024.04.29

12594

11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习