浏览器通知功能允许网页在后台向用户发送桌面提醒。实现核心在于权限管理与通知发送。需确保网站运行于 HTTPS 或 localhost 环境，并获取用户授权。了 Notification API 的三种权限状态处理，包括默认、允许及拒绝后的引导方案。提供完整 HTML 与 JavaScript 代码示例，涵盖权限检测、弹窗请求、拒绝后跳转浏览器设置页及通知内容定制。支持 Chrome、Edge、Firefox 等主流浏览器，适用于消息提醒、任务通知等场景。
作为前端学习者，你可能见过这样的场景：打开网页版聊天工具，就算把浏览器最小化，桌面也会弹出'新消息'提醒；或者某些网站的活动通知，会直接显示在电脑/手机桌面上。这种功能就是「浏览器桌面通知」，今天我们就从零开始，搞懂它、学会用它。
简单说，就是网页能在浏览器窗口外面（比如电脑桌面、手机屏幕）给你发提醒。哪怕浏览器最小化、甚至页面切到后台，只要权限允许，都能收到通知，不用一直盯着网页。
常见场景很贴近日常：
不难！核心就 2 步：先让用户同意开启通知（申请权限），再发送通知。 关键限制要记好（避免踩坑）：
浏览器为了保护用户，给通知加了'权限管理'——就像你家开门，必须经过主人同意，外人才能进。权限分 3 种状态，我们后续代码都要围绕这 3 种状态处理：
| 权限状态 | 通俗理解 | 我们能做什么 |
|---|---|---|
| 默认（default） | 用户还没选过'允许'或'拒绝' | 可以弹出弹窗，问用户要不要开启通知 |
| 允许（granted） | 用户同意开启通知了 | 直接发通知，不用再问 |
| 拒绝（denied） | 用户之前点了'不允许' | 不能再弹请求弹窗了，只能引导用户手动去浏览器设置里改 |
提示：权限是'按网站保存'的，比如你允许了'网页版微信'的通知，不代表其他网站也能发，每个网站要单独申请。
我们把功能拆成 2 部分：① 申请通知权限 ② 发送通知。下面的代码可以直接复制到你的 HTML 文件里运行，每一行都加了注释，初学者也能看懂。
先建一个简单的 HTML 文件，包含一个'开启通知'按钮和一个'发送测试通知'按钮，方便我们测试：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>小白的浏览器通知测试</title>
<style>
/* 新增：给引导按钮加简单样式，默认隐藏 */
#guideReEnableBtn {
margin-top: 10px;
display: none;
color: #fff;
background-color: #ff7d00;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
#guideReEnableBtn:hover {
background-color: #e67100;
}
</style>
</head>
<body>
<h1>浏览器通知测试</h1>
<button id="requestPermissionBtn">1. 开启通知权限</button>
<button id="sendNoticeBtn" disabled>2. 发送测试通知</button>
<!-- 新增：拒绝后显示的引导按钮 -->
<button id="guideReEnableBtn">3. 重新开启通知权限（已拒绝用户点击）</button>
<script>
// 这里放后续的 JS 代码
</script>
</body>
</html>
// 1. 先获取页面上的所有按钮（新增引导按钮）
const requestPermissionBtn = document.getElementById('requestPermissionBtn');
const sendNoticeBtn = document.getElementById('sendNoticeBtn');
const guideReEnableBtn = document.getElementById('guideReEnableBtn');
// 2. 定义一个变量，记录通知是否可用（方便后续判断）
let isNoticeEnabled = false;
// 3. 检测浏览器是否支持通知功能（避免在不支持的浏览器上报错）
function checkBrowserSupport() {
// 浏览器有 Notification 这个功能，就说明支持
if ('Notification' in window) {
return true;
} else {
alert('你的浏览器不支持通知功能，请升级浏览器！');
return false;
}
}
// 新增：判断浏览器类型，返回对应通知设置页 URL（适配主流浏览器）
function getBrowserNoticeSettingsUrl() {
const userAgent = navigator.userAgent;
if (userAgent.includes('Chrome') && !userAgent.includes('Edg')) {
// Chrome 浏览器
return 'chrome://settings/content/notifications';
} else if (userAgent.includes()) {
;
} (userAgent.()) {
;
} {
;
}
}
() {
settingsUrl = ();
(settingsUrl) {
choice = ();
(choice) {
{
.(settingsUrl, );
} (error) {
();
}
}
} {
();
}
}
() {
(!()) ;
permission = .;
(permission === ) {
isNoticeEnabled = ;
();
sendNoticeBtn. = ;
guideReEnableBtn.. = ;
} (permission === ) {
guideReEnableBtn.. = ;
sendNoticeBtn. = ;
();
} {
{
userChoice = .();
(userChoice === ) {
isNoticeEnabled = ;
();
sendNoticeBtn. = ;
guideReEnableBtn.. = ;
} {
();
guideReEnableBtn.. = ;
}
} (error) {
.(, error);
();
}
}
}
() {
(!isNoticeEnabled) {
();
;
}
notice = (, {
: ,
: ,
: ,
:
});
notice. = () {
.();
notice.();
};
( {
notice.();
}, );
}
guideReEnableBtn.(, guideReEnablePermission);
requestPermissionBtn.(, requestNoticePermission);
sendNoticeBtn.(, sendTestNotice);
.html（比如 notice-test.html）；file:///...，但测试时可能弹不出权限弹窗？没关系，用 VS Code 的'Live Server'插件打开（地址栏显示 http://localhost:5500/...），就能正常测试了）；原因：浏览器不支持，或者打开方式不是 localhost/HTTPS。 解决：用 Chrome/Edge 浏览器，用 VS Code 的 Live Server 打开（地址栏是 http://localhost 开头）。
原因：之前拒绝过权限，浏览器会持久化保存'拒绝'状态，后续无法通过代码再次弹出权限申请弹窗（这是浏览器的保护机制，避免网站反复骚扰用户）。 解决：我们可以在页面添加「重新开启通知权限」的专门按钮，点击后可选择直接跳转到浏览器设置页（适配 Chrome/Edge/Firefox），操作更便捷（已更新上方代码）。具体操作流程：
原因：系统通知被关闭了（不是浏览器的问题）。 解决：
原因：手机浏览器要求'通知请求必须由用户主动点击触发'（不能自动弹），且部分手机需要在系统设置里开启浏览器通知。 解决：用手机浏览器打开文件（同样用 Live Server，确保手机和电脑在同一个网络），手动点击'开启权限'按钮，再发送通知。
new Notification('标题', {配置}) 里的标题、body 换成变量，就能实现'动态通知'（比如显示不同的消息内容）；tag 配置项，相同 tag 的通知会替换旧的（比如连续发两条'新消息'通知，只会显示最新的一条）；浏览器通知功能的核心就是「先申请权限，再发送通知」，学习者只要记住这 2 步，再跟着上面的代码和步骤测试，就能快速上手。关键是要注意'安全环境（HTTPS/localhost）'和'用户主动授权'这两个点，避开常见坑就能顺利实现功能啦～
如果需要在实际项目中使用，只要把上面的测试代码稍作修改（比如替换图标、修改通知内容），就能直接用在自己的网页里！
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online