记录一下 Notification Web API 的使用，以及踩的坑。

龙端刘

已于 2024-04-28 17:49:22 修改

阅读量1.7k

点赞数 9

分类专栏： JS 笔记文章标签：前端 javascript

于 2024-04-16 15:49:44 首次发布

本文链接：https://blog.csdn.net/wssy_day/article/details/137786337

版权

文章讲述了如何在JavaScript中使用NotificationAPI获取用户发送通知的权限，包括状态判断、权限请求以及处理不同浏览器的行为。特别提到在微信等平台可能不支持，需进行浏览器兼容性检查。

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

这里建议大家可以参考一下 Notification - Web API 接口参考 | MDN (mozilla.org) 这个网站，比较的全面。

Notification 的状态：

granted 同意——可以发通知；

denied 拒绝——不可以发通知，请求获取权限也不行；

default 默认状态——看浏览器，一般都是询问；可以请求获取发送通知的权限。

#这里是新建了一个js，存放获取用户权限和发送消息的功能，可以在需要发送的页面引入该js，也可以登入系统时就引入该js，然后调用 获取用户是否同意的方法。

#此方法用于获取用户是否同意发送通知
export function visitNotification() {

  const NotificationInstance = Notification || window.Notification;
  //!!通常用来做类型判断，就是双重否定等于肯定的意思
  if (!!NotificationInstance) {
    const permissionNow = NotificationInstance.permission;
    if (permissionNow === 'granted') {//允许通知
      console.log('用户同意了你!!!'); // 同意之后不会弹出请求获取
    } else if (permiss