JavaScriptでブラウザから通知を出す

1. やりたいこと

PCブラウザから通知を出したい

2. やり方

Notification APIで通知を出すことができます
https://developer.mozilla.org/ja/docs/Web/API/Notification

2-1. 通知許可を取る

ブラウザはユーザーが通知を許可したページのみ通知を出しますので、最初にrequestPermission()を実行して許可を得る必要があります

javascript

if ("Notification" in window) {
  Notification.requestPermission().then(permission => {
    if (permission === "granted") {
      console.log("通知の許可が得られました");
    }
  })
}

既に許可済みのページの場合はブラウザが覚えていてtrueを返してくれるので、ユーザー自身が毎回許可を求められたりはしませんので、その点は心配要りません

2-2. 通知を出す

new Notificationで通知オブジェクトを新たに作ると通知を表示してくれます

許可が得られていないとエラーになるので、Notification.permissionが"granted"になっているときだけ通知を出すのが良さそうです

javascript

if (Notification.permission === "granted") {
  new Notification(title, {
    body: until,
    tag: String(tag) + until,
    //icon: "/logo192.png",  // 任意でアイコンを設定できます
    requireInteraction: true,
  });
}

2-3. 通知を消す

通知するときに作ったNotificationオブジェクトのclose()メソッドを呼ぶと通知を消すことができます

javascript

let notification;

// 通知を表示する関数
function showNotification(title, until, tag) {
  if (Notification.permission === "granted") {
    notification = new Notification(title, {
      body: until,
      tag: String(tag) + until,
      requireInteraction: true,  // ユーザーの操作まで通知が残る
    });

    // 任意のタイミングで自動的に通知を閉じる例
    setTimeout(() => {
      closeNotification();
    }, 10000); // 10秒後に通知を閉じる
  }
}

// 通知を閉じる関数
function closeNotification() {
  if (notification) {
    notification.close();
    notification = null; // メモリ管理のためにクリア
  }
}

// 使用例
showNotification("お知らせ", "これは通知の内容です", "通知ID");

まとめ

簡単です
レッツトライ