← カテゴリ一覧に戻る

通知（Notification API）

Notification requestPermission ServiceWorker通知

ブラウザのシステム通知（デスクトップ通知）を表示します。ユーザーの許可が必要です。

デモ：ブラウザ通知

現在の通知許可:⚠️ 未決定

コード例

js
// 許可リクエスト（ユーザーの操作に対して呼ぶ）
const permission = await Notification.requestPermission();
// "granted" | "denied" | "default"

if (permission === 'granted') {
  // シンプルな通知
  const n = new Notification('タイトル', {
    body: '通知の本文',
    icon: '/icon.png',       // 通知アイコン
    badge: '/badge.png',     // バッジアイコン（モバイル）
    image: '/image.png',     // 大きい画像
    tag: 'unique-tag',       // 同じタグは置き換え
    requireInteraction: true, // 自動で消えない
    silent: false,           // 音を鳴らすか
    data: { url: '/page' },  // カスタムデータ
  });

  // イベント
  n.onclick = (e) => {
    window.focus();
    e.target.close();
  };
  n.onclose = () => console.log('通知が閉じられた');
  n.onerror = (e) => console.error('通知エラー:', e);

  // 手動で閉じる
  setTimeout(() => n.close(), 5000);
}

// Service Worker 経由の通知（バックグラウンドでも動く）
const reg = await navigator.serviceWorker.ready;
await reg.showNotification('プッシュ通知', {
  body: 'バックグラウンドからの通知',
  actions: [
    { action: 'open', title: '開く' },
    { action: 'dismiss', title: '閉じる' },
  ],
});

比較：Notification API vs Service Worker通知

観点Notification APIService Worker通知
バックグラウンド動作❌ ページが開いている時のみ✅ ページが閉じていても可
アクションボタン❌ なし✅ 複数のアクション
用途インページ通知プッシュ通知（PWA）

🤖 AIプロンプトテンプレート

実装内容: ブラウザ通知（Notification API）を使った通知機能
技術: React hooks（useState, useEffect）
要件:
- Notification.requestPermission() でユーザーに通知許可をリクエストする
- 許可状態（granted / denied / default）を表示する
- ボタンクリックで new Notification() を使ってデスクトップ通知を表示する
- 通知のタイトル・本文・アイコンを設定できるようにする
- 通知クリック時にコールバックを実行する
ユースケース: ニュースサイトの新着記事通知、タスク管理アプリのリマインダー通知

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo