Web API見本市
OS連携権限プロンプトあり判定中...

Notification API

OSの通知センターにデスクトップ通知を表示できるAPI。許可状態は granted / denied / default の3値で管理される。

MDNのドキュメントを見る

1対応判定

ブラウザ対応バージョン
Chrome22+
Firefox22+
Safari7+（iOSは16.4+かつPWAインストール時のみ）

備考: iOS Safariの制約に注意

2権限フロー

  1. 権限不要

    API呼び出しだけで動く。プロンプトも操作起点の縛りもない

  2. ユーザージェスチャー必須

    ボタンクリック等のユーザー操作の中でしか呼べない。プロンプトは出ない

  3. 権限プロンプトありこのAPI

    呼び出すとブラウザが許可/ブロックのプロンプトを表示し、ユーザーが選ぶ

  4. iOS独自requestPermission

    iOSではrequestPermission()を操作起点で呼び、明示的に許可を得る

Notification.requestPermission() で許可プロンプトを表示。deniedの場合はサイト設定から手動で戻す必要がある。

現在の権限状態（navigator.permissions.query）: このブラウザでは取得できません

3ライブデモ: 許可リクエストと通知の発火

4コードスニペット

TypeScript（要約版）
// 現在の許可状態は3値
console.log(Notification.permission);
// "default"(未確認) | "granted"(許可) | "denied"(拒否)

// 許可のリクエスト（ボタンクリック起点で呼ぶのが行儀）
const result = await Notification.requestPermission();
if (result !== "granted") return;

// 通知の発火
const n = new Notification("Web API見本市", {
  body: "Notification APIのデモ通知です",
  icon: iconDataUrl, // 96x96程度のPNG推奨
  tag: "demo",       // 同じtagは上書きされ連投を防げる
});

// クリックでこのタブへフォーカスを戻す
n.onclick = () => {
  window.focus();
  n.close();
};

// deniedからの復帰はサイト設定の手動変更が必要
// （再度requestPermissionを呼んでもプロンプトは出ない）