前端实战:浏览器通知功能从零实现指南
介绍浏览器桌面通知功能的原理与实现。涵盖权限状态(默认、允许、拒绝)、核心步骤(申请权限、发送通知)及完整代码示例。包含常见问题的排查方法,如权限被拒后的引导跳转、系统设置检查等。适合前端初学者快速掌握 Web Notification API 的使用。

介绍浏览器桌面通知功能的原理与实现。涵盖权限状态(默认、允许、拒绝)、核心步骤(申请权限、发送通知)及完整代码示例。包含常见问题的排查方法,如权限被拒后的引导跳转、系统设置检查等。适合前端初学者快速掌握 Web Notification API 的使用。

作为前端学习者,你可能见过这样的场景:打开网页版聊天工具,就算把浏览器最小化,桌面也会弹出'新消息'提醒;或者某些网站的活动通知,会直接显示在电脑/手机桌面上。这种功能就是「浏览器桌面通知」,今天我们就从零开始,搞懂它、学会用它。
简单说,就是网页能在浏览器窗口外面(比如电脑桌面、手机屏幕)给你发提醒。哪怕浏览器最小化、甚至页面切到后台,只要权限允许,都能收到通知,不用一直盯着网页。
常见场景很贴近日常:
不难!核心就 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('Edg')) {
// Edge 浏览器
return 'edge://settings/content/notifications';
} else if (userAgent.includes('Firefox')) {
// Firefox 浏览器
return 'about:preferences#privacy';
} else {
// 其他浏览器(如 Safari)暂不支持直接跳转,返回空
return '';
}
}
// 新增:引导用户手动开启权限的函数(点击新按钮时触发,新增跳转功能)
function guideReEnablePermission() {
const settingsUrl = getBrowserNoticeSettingsUrl();
// 有对应浏览器的设置页 URL,提供'直接跳转'选项
if (settingsUrl) {
const choice = confirm('请按以下步骤开启通知权限:\n\n1. 点击「确定」直接跳转到浏览器通知设置页\n2. 在设置页找到当前网站,将通知权限改为「允许」\n3. 刷新当前页面即可生效\n\n如果跳转失败,请手动操作:点击地址栏左侧小锁图标→找到「通知」→改为「允许』');
if (choice) {
try {
// 打开浏览器设置页(新标签页)
window.open(settingsUrl, '_blank');
} catch (error) {
alert('跳转失败,请手动操作:点击地址栏左侧小锁图标→找到「通知」→改为「允许』');
}
}
} else {
// 不支持直接跳转的浏览器,显示纯手动步骤
alert('请按以下步骤手动开启通知权限:\n\n1. 点击浏览器地址栏左侧的「小锁图标」🔒\n2. 在弹出的菜单中找到「通知」选项\n3. 把「通知」状态从「阻止」改成「允许』\n4. 刷新页面后重新尝试');
}
}
// 4. 申请通知权限(核心函数 1)
async function requestNoticePermission() {
// 先检查浏览器是否支持
if (!checkBrowserSupport()) return;
// 查看当前的权限状态
const permission = Notification.permission;
if (permission === 'granted') {
// 情况 1:用户已经允许过了
isNoticeEnabled = true;
alert('通知权限已开启!可以发送通知啦~');
// 启用'发送测试通知'按钮,隐藏引导按钮
sendNoticeBtn.disabled = false;
guideReEnableBtn.style.display = 'none';
} else if (permission === 'denied') {
// 情况 2:用户之前拒绝过,显示引导按钮,隐藏其他无关按钮
guideReEnableBtn.style.display = 'block';
sendNoticeBtn.disabled = true;
// 提示用户点击新按钮查看步骤(新增跳转说明)
alert('你之前拒绝了通知权限!请点击页面上的「重新开启通知权限」按钮,可选择直接跳转到设置页操作。');
} else {
// 情况 3:用户还没选过,弹出请求弹窗
try {
// 弹出弹窗,等待用户选择(await 表示'等用户选完再继续')
const userChoice = await Notification.requestPermission();
if (userChoice === 'granted') {
isNoticeEnabled = true;
alert('你同意了通知权限!');
sendNoticeBtn.disabled = false;
guideReEnableBtn.style.display = 'none';
} else {
// 用户首次拒绝,显示引导按钮
alert('你拒绝了通知权限,无法收到通知哦~\n如果后续想开启,可点击页面上的「重新开启通知权限」按钮,支持直接跳转到设置页。');
guideReEnableBtn.style.display = 'block';
}
} catch (error) {
// 万一请求过程中出错(比如浏览器崩溃),给出提示
console.error('申请权限失败:', error);
alert('申请通知权限失败,请刷新页面重试');
}
}
}
// 5. 发送通知(核心函数 2)
function sendTestNotice() {
// 先检查是否有权限
if (!isNoticeEnabled) {
alert('请先点击第一个按钮开启通知权限!');
return;
}
// 创建并发送通知
const notice = new Notification('测试通知来啦!', {
body: '恭喜你!成功发送了第一条浏览器通知~', // 通知正文
icon: 'https://img.icons8.com/fluency/96/000000/notification.png', // 通知图标(网上找的免费图标,可替换)
tag: 'test-notice', // 相同 tag 的通知会替换旧的,避免重复堆积
silent: false // 是否静音(false=有提示音,true=没声音)
});
// 点击通知时的操作:打开浏览器窗口,并关闭通知
notice.onclick = function () {
window.focus(); // 把浏览器调到前台
notice.close(); // 关闭通知
};
// 3 秒后自动关闭通知(避免一直留在桌面)
setTimeout(() => {
notice.close();
}, 3000);
}
// 新增:绑定引导按钮的点击事件
guideReEnableBtn.addEventListener('click', guideReEnablePermission);
// 6. 给原有按钮绑定点击事件(点击按钮触发对应的函数)
requestPermissionBtn.addEventListener('click', requestNoticePermission);
sendNoticeBtn.addEventListener('click', 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