前端实战：手把手教你实现浏览器通知功能

Ne0inhk

— 12 min read
前端实战：手把手教你实现浏览器通知功能

前端入门：浏览器通知功能从0到1实现指南

作为前端学习者，你可能见过这样的场景：打开网页版聊天工具，就算把浏览器最小化，桌面也会弹出“新消息”提醒；或者某些网站的活动通知，会直接显示在电脑/手机桌面上。这种功能就是「浏览器桌面通知」，今天我们就从零开始，搞懂它、学会用它。

一、先搞懂3个基础问题

1. 什么是浏览器桌面通知？

简单说，就是网页能在浏览器窗口外面（比如电脑桌面、手机屏幕）给你发提醒。哪怕浏览器最小化、甚至页面切到后台，只要权限允许，都能收到通知，不用一直盯着网页。

2. 什么时候会用到它？

常见场景很贴近日常：

  • 网页版微信/QQ的新消息提醒；
  • 工作系统的审批提醒、任务到期通知；
  • 电商网站的订单状态更新（比如“你的快递已发货”）；
  • 新闻/小说网站的订阅内容更新提醒。

3. 用起来难吗？有什么限制？

不难！核心就2步：先让用户同意开启通知（申请权限），再发送通知。
关键限制要记好（避免踩坑）：

  • 必须在「安全环境」下用：网站要部署在HTTPS服务器上（本地开发用 localhost 可以正常测试，不用纠结HTTPS）；
  • 要用户主动同意：不能偷偷发通知，必须先让用户点击“允许”才行；
  • 大部分现代浏览器都支持：Chrome、Edge、Firefox、Safari（手机端也支持，部分需要特殊设置）。

二、核心概念：通知权限（最关键的一步）

浏览器为了保护用户，给通知加了“权限管理”——就像你家开门，必须经过主人同意，外人才能进。权限分3种状态，我们后续代码都要围绕这3种状态处理：

权限状态通俗理解我们能做什么
默认（default）用户还没选过“允许”或“拒绝”可以弹出弹窗，问用户要不要开启通知
允许（granted）用户同意开启通知了直接发通知，不用再问
拒绝（denied）用户之前点了“不允许”不能再弹请求弹窗了，只能引导用户手动去浏览器设置里改
提示：权限是“按网站保存”的，比如你允许了“网页版微信”的通知，不代表其他网站也能发，每个网站要单独申请。

三、从零实现：2个核心功能（附完整代码）

我们把功能拆成2部分：① 申请通知权限 ② 发送通知。下面的代码可以直接复制到你的HTML文件里运行，每一行都加了注释，初学者也能看懂。

第一步：准备HTML基础结构

先建一个简单的HTML文件，包含一个“开启通知”按钮和一个“发送测试通知”按钮，方便我们测试：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="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><buttonid="requestPermissionBtn">1. 开启通知权限</button><buttonid="sendNoticeBtn"disabled>2. 发送测试通知&lt;/button&gt;&#xA;<!-- 新增：拒绝后显示的引导按钮 --><buttonid="guideReEnableBtn">3. 重新开启通知权限（已拒绝用户点击）</button><script>// 这里放后续的JS代码</script></body></html>

第二步：编写JS核心逻辑（复制到script标签里）

// 1. 先获取页面上的所有按钮（新增引导按钮）const requestPermissionBtn = document.getElementById('requestPermissionBtn');const sendNoticeBtn = document.getElementById('sendNoticeBtn');const guideReEnableBtn = document.getElementById('guideReEnableBtn');// 新增：获取引导按钮// 2. 定义一个变量，记录通知是否可用（方便后续判断）let isNoticeEnabled =false;// 3. 检测浏览器是否支持通知功能（避免在不支持的浏览器上报错）functioncheckBrowserSupport(){// 浏览器有Notification这个功能，就说明支持if('Notification'in window){returntrue;}else{alert('你的浏览器不支持通知功能，请升级浏览器！');returnfalse;}}// 新增：判断浏览器类型，返回对应通知设置页URL（适配主流浏览器）functiongetBrowserNoticeSettingsUrl(){const userAgent = navigator.userAgent;if(userAgent.includes('Chrome')&&!userAgent.includes('Edg')){// Chrome浏览器return'chrome://settings/content/notifications';}elseif(userAgent.includes('Edg')){// Edge浏览器return'edge://settings/content/notifications';}elseif(userAgent.includes('Firefox')){// Firefox浏览器return'about:preferences#privacy';}else{// 其他浏览器（如Safari）暂不支持直接跳转，返回空return'';}}// 新增：引导用户手动开启权限的函数（点击新按钮时触发，新增跳转功能）functionguideReEnablePermission(){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）asyncfunctionrequestNoticePermission(){// 先检查浏览器是否支持if(!checkBrowserSupport())return;// 查看当前的权限状态const permission = Notification.permission;if(permission ==='granted'){// 情况1：用户已经允许过了 isNoticeEnabled =true;alert('通知权限已开启！可以发送通知啦～');// 启用“发送测试通知”按钮，隐藏引导按钮 sendNoticeBtn.disabled =false; guideReEnableBtn.style.display ='none';}elseif(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）functionsendTestNotice(){// 先检查是否有权限if(!isNoticeEnabled){alert('请先点击第一个按钮开启通知权限！');return;}// 创建并发送通知const notice =newNotification('测试通知来啦！',{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);

第三步：测试步骤（跟着做就能成功）

  1. 把上面的HTML代码复制到一个文本文件里，把文件后缀改成 .html（比如 notice-test.html）；
  2. 用Chrome、Edge等现代浏览器打开这个文件（注意：打开方式是“直接双击文件”，地址栏会显示 file:///...，但测试时可能弹不出权限弹窗？没关系，用VS Code的“Live Server”插件打开（地址栏显示http://localhost:5500/...），就能正常测试了）；
  3. 点击“1. 开启通知权限”按钮：
    第一次点击会弹出浏览器的权限弹窗，选择“允许”；
  4. 允许后，“发送测试通知”按钮会变亮（从灰色变成可点击）；
  5. 如果选择“拒绝”，页面会显示「重新开启通知权限」按钮，点击后可选择直接跳转到浏览器设置页，或查看手动开启步骤。
  6. 点击“2. 发送测试通知”按钮：桌面会弹出通知，有标题、正文和图标，3秒后自动关闭；点击通知会把浏览器调到前台。
  7. 点击“1. 开启通知权限”按钮：第一次点击会弹出浏览器的权限弹窗，选择“允许”；

四、常见问题排查（初学者必看）

  1. 如果选择“拒绝”，页面会显示「重新开启通知权限」按钮，点击可查看手动开启步骤。
  2. 允许后，“发送测试通知”按钮会变亮（从灰色变成可点击）；

1. 点击“开启权限”没反应？

原因：浏览器不支持，或者打开方式不是localhost/HTTPS。
解决：用Chrome/Edge浏览器，用VS Code的Live Server打开（地址栏是http://localhost开头）。

2. 弹不出权限弹窗？

原因：之前拒绝过权限，浏览器会持久化保存“拒绝”状态，后续无法通过代码再次弹出权限申请弹窗（这是浏览器的保护机制，避免网站反复骚扰用户）。
解决：我们可以在页面添加「重新开启通知权限」的专门按钮，点击后可选择直接跳转到浏览器设置页（适配Chrome/Edge/Firefox），操作更便捷（已更新上方代码）。具体操作流程：

  1. 点击页面上的「重新开启通知权限（已拒绝用户点击）」按钮；
  2. 点击「确定」直接跳转到通知设置页（跳转失败则按弹窗提示手动操作）；
  3. 在设置页找到当前网站，将通知权限从「阻止」改为「允许」；
  4. 刷新当前页面，或重新点击「开启通知权限」按钮，即可正常使用通知功能。

3. 发送通知后，桌面没显示？

原因：系统通知被关闭了（不是浏览器的问题）。
解决：

  • Windows：打开「设置→系统→通知和操作」，确保“通知”开启，并且浏览器（比如Chrome）的通知权限也开启；
  • Mac：打开「系统设置→通知」，找到对应的浏览器，开启“允许通知”。

4. 手机上测试没效果？

原因：手机浏览器要求“通知请求必须由用户主动点击触发”（不能自动弹），且部分手机需要在系统设置里开启浏览器通知。
解决：用手机浏览器打开文件（同样用Live Server，确保手机和电脑在同一个网络），手动点击“开启权限”按钮，再发送通知。

五、进阶小技巧（学会更实用）

  1. 自定义通知内容：发送通知时，把 new Notification('标题', {配置}) 里的标题、body换成变量，就能实现“动态通知”（比如显示不同的消息内容）；
  2. 避免通知堆积：用 tag 配置项，相同tag的通知会替换旧的（比如连续发两条“新消息”通知，只会显示最新的一条）；
  3. 离线也能发通知：如果需要“页面关闭后还能收到通知”，可以学习「Service Worker」（进阶知识点），搭配Notification API就能实现离线通知；
  4. 浏览器设置页快速跳转：通过判断浏览器类型，可实现点击按钮直接跳转到通知设置页，避免用户手动找路径（本文已实现该功能，适配主流浏览器）。

六、总结

浏览器通知功能的核心就是「先申请权限，再发送通知」，学习者只要记住这2步，再跟着上面的代码和步骤测试，就能快速上手。关键是要注意“安全环境（HTTPS/localhost）”和“用户主动授权”这两个点，避开常见坑就能顺利实现功能啦～

如果需要在实际项目中使用，只要把上面的测试代码稍作修改（比如替换图标、修改通知内容），就能直接用在自己的网页里！

Read more

【HarmonyOS Next之旅】DevEco Studio使用指南(三)

【HarmonyOS Next之旅】DevEco Studio使用指南(三)

目录 1 -> 一体化工程迁移 1.1 -> 自动迁移 1.2 -> 手动迁移 1.2.1 -> API 10及以上历史工程迁移 1.2.2 -> API 9历史工程迁移 1 -> 一体化工程迁移 DevEco Studio从 NEXT Developer Beta1版本开始，提供开箱即用的开发体验，将SDK、Node.js、Hvigor、OHPM等工具链进行合一打包，简化DevEco Studio安装配置流程；并提供一体化的历史工程迁移能力，帮助开发者快速完成工程转换。 注意 为了避免数据丢失，

By Ne0inhk
Flutter for OpenHarmony: Flutter 三方库 ulid 别再用杂乱的 UUID，为鸿蒙应用换上“可排序、更简洁”的唯一标识符（全局 ID 新标准）

Flutter for OpenHarmony: Flutter 三方库 ulid 别再用杂乱的 UUID，为鸿蒙应用换上“可排序、更简洁”的唯一标识符（全局 ID 新标准）

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.ZEEKLOG.net 前言 在进行 OpenHarmony 的分布式数据库设计、日志系统或任务追踪系统开发时，我们需要为每一条记录生成一个“全局唯一标识符”。 1. 传统 UUID 的痛点：UUID (v4) 是完全随机的，它破坏了数据库的 B-Tree 索引顺序，导致写入性能下降；且 36 位连字符字符串在数据库中显得过于臃肿。 2. ULID 的优势：它兼具了 128 位的全局唯一性，同时它的前 48 位是时间戳。这意味着 ULID 天然可按时间排序。 ulid 软件包为鸿蒙开发者提供了这种现代化的 ID 生成方案。它采用 Base32 编码（26 个字符），没有特殊符号，既美观又极具工程性能优势。 一、

By Ne0inhk
Flutter for OpenHarmony: Flutter 三方库 http_multi_server 在鸿蒙上同时开启多地址 HTTP 服务（局域网协作神器）

Flutter for OpenHarmony: Flutter 三方库 http_multi_server 在鸿蒙上同时开启多地址 HTTP 服务（局域网协作神器）

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.ZEEKLOG.net 前言 在进行 OpenHarmony 应用开发时，有时我们需要在 App 内部启动一个本地服务器，例如： * 为内嵌的 Webview 提供本地资源访问。 * 在局域网内进行设备间的数据同步（如投屏、文件传输）。 * 进行自动化集成测试。 通常的 HttpServer.bind 只能绑定一个地址（要么是 localhost，要么是具体的 IP）。而 http_multi_server 允许你一次性绑定多个地址，让你的鸿蒙 App 同时在本地回环和局域网 IP 上提供服务。 一、核心原理解析 它实际上是一个 HttpServer 的聚合器。它通过同时启动多个底层的 Dart HttpServer 实例，并将它们分发的请求流（Request Stream）

By Ne0inhk
Flutter for OpenHarmony：Flutter 三方库 bluez 玩转 Linux 风格的蓝牙操作（蓝牙底层互操作）

Flutter for OpenHarmony：Flutter 三方库 bluez 玩转 Linux 风格的蓝牙操作（蓝牙底层互操作）

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.ZEEKLOG.net。 前言 随着鸿蒙（OpenHarmony）在工业互联网、智能座舱和物联网（IoT）领域的深入应用，与蓝牙设备的底层通信成为了许多开发者的刚需。在一些基于鸿蒙内核的特定工业版或车机版系统中，底层可能由于适配历史原因或分层设计，保留了类似 Linux 的 D-Bus 通信机制。 bluez 是一个专门用于与 Linux BlueZ 蓝牙协议栈通过 D-Bus 进行交互的 Dart 库。虽然对于普通的 HarmonyOS NEXT 手机开发我们通常使用官方的蓝牙插件，但在深度定制的鸿蒙发行版中，bluez 库为我们提供了一扇通往蓝牙底层控制的大门。 一、原理解析 / 概念介绍 1.1 基础概念 bluez 库并不直接操作蓝牙硬件，而是通过 D-Bus (Desktop Bus) 系统总线与系统级的蓝牙守护进程进行会话。 D-Bus

By Ne0inhk