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

优质文章学习记录

— 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

Coze（扣子）全解析：100个落地用途+发布使用指南，小白也能玩转低代码AI智能体

Coze（扣子）全解析：100个落地用途+发布使用指南，小白也能玩转低代码AI智能体

摘要：Coze（扣子）作为字节跳动推出的低代码AI智能体平台，凭借零代码/低代码拖拽式操作、丰富的插件生态和多平台发布能力，成为小白和职场人高效落地AI应用的首选工具。本文全面汇总Coze可实现的100个实用场景，覆盖个人、学习、办公、运营等7大领域，同时详细拆解其生成形态、发布流程和使用方法，帮你快速上手，把AI能力转化为实际生产力，无需专业开发经验也能轻松搭建专属AI应用。 前言 在AI普及的当下，很多人想借助AI提升效率、解决实际问题，但苦于没有编程基础，无法开发专属AI工具。而Coze（扣子）的出现，彻底打破了这一壁垒——它是字节跳动自主研发的低代码AI智能体平台，无需复杂编码，通过拖拽组件、配置插件、编写简单提示词，就能快速搭建聊天Bot、工作流、知识库等AI应用，并且支持多渠道发布，让你的AI工具随时随地可用。 本文将分为两大核心部分：第一部分汇总Coze可落地的100个实用场景，帮你打开思路，找到适配自己需求的用法；第二部分详细讲解Coze生成的应用形态、发布流程和使用技巧，让你搭建完成后快速落地使用，真正实现“零代码上手，高效用AI”。 第一部分：Coze
OpenClaw上身机器人，AI不仅能帮订外卖，还能替你跑腿了！

OpenClaw上身机器人，AI不仅能帮订外卖，还能替你跑腿了！

手把手教你一键部署OpenClaw（Clawdbot），2分钟搞定！ 过去这些年，AI大多时候还只是待在屏幕里，帮人写写字、画画图或者跑个自动脚本。但最近 OpenClaw 生态彻底爆火，两个基于它的开源项目直接打破了虚拟与现实的界限。这消息一传出来，全球搞机器人和AI的极客们都坐不住了。 就在2月23号旧金山举行的 SF OpenClaw 黑客松上，ROSClaw 项目拿下了冠军。Irvin 团队搞出了一个中间连接层，把现在最火的开源 AI Agent 平台 OpenClaw 直接插到了真实的机器人硬件上。刚拿完奖，团队就大方地宣布把项目开源了。 手把手教你一键部署OpenClaw（Clawdbot），2分钟搞定！ 手把手教你一键部署OpenClaw（Clawdbot），2分钟搞定！ 具体是怎么做到的呢？他们通过智能插件把 OpenClaw 接到了机器人操作系统（ROS 2）上，还利用 WebRTC 技术实现了超低延迟的安全连接。这意味着你在地球任何一个角落，都能远程操控那些兼容 ROS 的机器人。AI

801-203_各无人机厂家对RemoteID支持情况汇总

1. 大疆DJI 参考链接：大疆无人机RemoteID支持情况 DJI航拍无人机的RID广播信息包含以下信息： 1. ID等身份认证 2. 无人机的纬度、经度、几何高度和速度 3. 控制站的纬度、经度和几何高度的指示 4. 时间信息、紧急状态信息 支持RID的航拍无人机型号 大疆无人机支持RID型号列表 序号无人机机型支持情况备注1DJI Mavic 4 Pro支持2DJI Flip支持3DJI Air 3S支持4DJI Neo支持WIFI直连模式下和脱控模式下不支持5DJI Mini 4K支持V01.07.0400 及以后6DJI Avata 2V01.00.0300 及以后7DJI Mini 4 Pro支持V01.00.0400 及以后8DJI Air 3支持V01.00.1200 及以后9DJI Mini 3支持V01.

FPGA实现任意角度图像旋转_(图像旋转原理部分)

1.摘要         书接上回，介绍完Cordic原理部分FPGA实现任意角度图像旋转_（Cordic算法原理部分），和代码FPGA实现任意角度图像旋转_（Cordic算法代码部分），得到了至关重要的正余弦数值就可以进行旋转公式的计算了。        旋转没什么太多原理，看了很多资料感觉是描述的非常复杂， 其实本质就是实现两个公式，非整那么多花里胡哨的。所以我就按照我当时的编写思路记录一下。 2.图像旋转代码设计思路         2.1 旋转后的图像尺寸                 在一副图像经过旋转后，原本像素的位置肯定会发生变化，图像总的面积虽然保持不变但是各别位置的尺寸会改变，这个应该很好理解。比如一副100x100像素的图像进行旋转，我们只需要获得它的最长距离也就是对角线的尺寸作为旋转后的图像的显示范围。这样无论怎样旋转都能完整显示图像。                 如下代码，Pixel_X和Pixel_Y为旋转后图像的尺寸。ROW和COL为原始图像尺寸，利用勾股定理求出对角线的值即可。 reg [12:0] row_size ; reg [