Notifications 展示桌面消息通知

注：暂做记录（暂不考虑代码认知复杂度的问题）

欢迎评论指教 ！！！

属性
Notification.permission，用来表明用户是否允许当前域显示通知：

• granted: 用户已经明确的授予了显示通知的权限；.
• denied: 用户已经明确的拒绝了显示通知的权限；
• default: 用户还未被询问是否授权; 这种情况下权限将视为 denied；

事件处理
Notification API 提供了 4 个处理程序：

• Notification.onclick：用户点击通知时都会触发
• Notification.onclose：用户关闭通知时触发
• Notification.onerror：每次通知遇到错误时都会触发
• Notification.onshow：在显示通知时触发

大概使用（待完善）：
想要的效果：进入A网站的A页面调用消息数据接口（定时调用），有数据则弹出消息通知，

• 点击通知可以携带id跳去详情页；
• 点击关闭的，再次调用数据则不再弹被关闭的这条消息；
• 未被点击操作的消息展示一定的时间（5ms）然后再次调用数据则再弹消息通知

目前的效果（问题）：

• 点击通知可正常跳转详情；
• 被点击关闭的暂未处理；
• 未被点击操作的则一直展示；
• 停留在A网站的A页面，最小化浏览器，消息通知依旧定时调用弹出
• 切换到B网站页面（同一个浏览器)，消息通知依旧定时调用弹出

目前的测试代码：

// 点击按钮
    <el-button class="btn" size="large" type="primary" @click="login">
      提醒我！
    </el-button>

//  使用数据
     pushList: [
        {
          id: 1,
          alarmTypeName: "1次消息",
          code: "001",
        },
        {
          id: 2,
          alarmTypeName: "2次消息",
          code: "002",
        },
      ],
      timerId: null,

//  定时调用
  mounted() {
    this.timerId = setInterval(() => {
      this.login();
    }, 30000); // 1*60*1000=60 000
  },

// 方法
    login() {
      this.pushList.forEach((ele) => {
        this.pushAlert(ele);
      });
    },
    pushAlert(ele) {
      if (!("Notification" in window)) {
        // 检查浏览器是否支持通知
        alert("当前浏览器不支持桌面通知");
      } else if (Notification.permission === "granted") {
        // 检查是否已授予通知权限；如果是的话，创建一个通知
        const notification = new Notification("提示111", {
          body: ele.alarmTypeName,
          // 是否一直保持有效 （默认为false）
          requireInteraction: true, //为true时通知会显示关闭按钮
        });
        // 通知点击事件
        notification.onclick = () => {
          console.log("通知被点击111");
        };
        // 关闭点击事件
        notification.onclose = () => {
          console.log("通知被关闭111");
          clearInterval(this.timerId);
        };
        // 预计效果：未点击关闭，5ms后关闭 （这一步好像没生效）
        setTimeout(() => notification.close(), 5000);
      } else if (Notification.permission !== "denied") {
        // 征求用户的许可
        Notification.requestPermission().then((permission) => {
          // 用户接受，创建一个通知
          if (permission === "granted") {
            const notification = new Notification("提示222", {
              //内容
              body: ele.alarmTypeName,
              // 是否一直保持有效
              requireInteraction: true,
            });
            notification.onclick = () => {
              console.log("通知被点击222");
            };
            // 关闭
            notification.onclose = () => {
              console.log("关闭222");
              clearInterval(this.timerId);
            };
          } else if (permission === "default") {
            console.log("未知选择");
          }
        });
      } else {
        alert("通知未开启");
      }
    },