export async function showNotification(title: string, body: string, url?: string) { if (!('Notification' in window)) return; if (Notification.permission !== 'granted') { const r = await Notification.requestPermission(); if (r !== 'granted') return; } const n = new Notification(title, { body, icon: '/icon.png', tag: 'task' }); n.onclick = () => { if (url) window.open(url); n.close(); }; }

ブラウザ通知（Notification API）

:LiTarget: 用途

OS通知をブラウザから出す。タスク期限・チャット着信に。

:LiSparkle: 特徴

権限プロンプト
アイコン/タグ
クリックで遷移
バッジ更新

:LiCode: コード（コピペ用）

export async function showNotification(title: string, body: string, url?: string) {
  if (!('Notification' in window)) return;
  if (Notification.permission !== 'granted') {
    const r = await Notification.requestPermission();
    if (r !== 'granted') return;
  }
  const n = new Notification(title, { body, icon: '/icon.png', tag: 'task' });
  n.onclick = () => {
    if (url) window.open(url);
    n.close();
  };
}

:LiHandPointer: 使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

:LiAlertCircle: 注意事項

依存パッケージを忘れず追加