HTML5 桌面通知：Notification API的基础用法

最新推荐文章于 2021-07-31 14:26:42 发布

原创

最新推荐文章于 2021-07-31 14:26:42 发布 · 422 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了HTML5的Notification API，用于创建桌面通知。用户权限是关键，需通过requestPermission()请求用户授权。获得权限后，可以设置标题、内容等参数推送通知，并利用onclick事件响应用户操作。尽管存在兼容性问题，但Notification API在新闻等实时更新场景中有应用潜力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Notification API 是 HTML5 新增的桌面通知 API，用于向用户显示通知信息。该通知是脱离浏览器的，即使用户没有停留在当前标签页，甚至最小化了浏览器，该通知信息也一样会置顶显示出来。

用户权限

想要向用户显示通知消息，需要获取用户权限，而相同的域名只需要获取一次权限。只有用户允许的权限下，Notification 才能起到作用，避免某些网站的广告滥用 Notification 或其它给用户造成影响。那么如何知道用户到底是允不允许的？

Notification.permission 该属性用于表明当前通知显示的授权状态，可能的值包括：

default ：不知道用户的选择，默认。
granted ：用户允许。
denied ：用户拒绝。

f(Notification.permission === 'granted'){

console.log('用户允许通知');

}else if(Notification.permission === 'denied'){

console.log('用户拒绝通知');

}else{

console.log('用户还没选择，去向用户申请权限吧');

}

当用户还没选择的时候，我们需要向用户去请求权限。Notification 对象提供了 requestPermission() 方法请求用户当前来源的权限以显示通知。请求权限

以前基于回调的语法已经弃用（当然在现在的浏览器中还是能用的），最新的规范已将此方法更新为基于 promise 的语法：

Notification.requestPermission().then(function(permission) {

if(permission ===

最低0.47元/天解锁文章

200万优质内容无限畅学