跳到主要内容

Notification API 通知

2025年02月27日
柏拉文
越努力，越幸运

一、认识​

使用原生的 Notification API 可以非常方便地实现桌面通知。

二、语法​

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="notify">通知</button>
    <script src="./index.js"></script>
  </body>
</html>
index.js
function notify(title, body, clickCallback) {
  const notification = new Notification(title, {
    body,
    icon: "",
  });

  notification.onclick = () => {
    clickCallback?.();
  };
}

async function initNotification() {
  if (!"Notification" in window) {
    console.log("不支持桌面通知!!!");
    return;
  }

  const permission = await Notification.requestPermission();

  if (permission !== "granted") {
    console.log("用户已拒绝通知权限！！！");
    return;
  }
}

function run(){
    initNotification();

    const notifyEl = document.getElementById("notify");
    notifyEl.addEventListener("click", ()=>{
        notify("测试通知标题", "测试通知内容");
    });
}

run();