0

0

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

紅蓮之龍

紅蓮之龍

发布时间:2026-01-22 14:42:08

|

289人浏览过

|

来源于php中文网

原创

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() 必须在用户手势(如 clicktouchend)中调用,否则现代浏览器会拒绝并返回 Promise 拒绝状态

创建一个基础通知

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

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

监听通知生命周期事件

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

情感家园企业站5.0 多语言多风格版
情感家园企业站5.0 多语言多风格版

一套面向小企业用户的企业网站程序!功能简单,操作简单。实现了小企业网站的很多实用的功能,如文章新闻模块、图片展示、产品列表以及小型的下载功能,还同时增加了邮件订阅等相应模块。公告,友情链接等这些通用功能本程序也同样都集成了!同时本程序引入了模块功能,只要在系统默认模板上创建模块,可以在任何一个语言环境(或任意风格)的适当位置进行使用!

下载

立即学习Java免费学习笔记(深入)”;

  • 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 而失败。别绕过用户交互去“自动”触发,也别假设通知一定能被看到。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

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

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

1051

2023.08.11

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

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

833

2023.11.06

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

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

739

2023.08.03

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

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

220

2023.09.04

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

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

1564

2023.10.24

字符串介绍
字符串介绍

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

649

2023.11.24

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

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

1208

2024.03.22

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

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

1184

2024.04.29

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

4

2026.03.10

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号