Notification APIサポートとパーミッション処理

Notification API検出

Notification APIは、ページにフォーカスがない場合やService Workerを介してバックグラウンドで実行されている場合でも、システムレベルの通知をユーザーに表示することをWebアプリケーションに許可します。

検出

const hasNotifications = 'Notification' in window;

パーミッションフロー

async function requestNotificationPermission() {
  if (!('Notification' in window)) {
    return 'unsupported';
  }

  if (Notification.permission === 'granted') {
    return 'granted';
  }

  if (Notification.permission === 'denied') {
    return 'denied';
  }

  // パーミッションが'default' - ユーザーに尋ねる
  const result = await Notification.requestPermission();
  return result;
}

通知の表示

function showNotification(title, options = {}) {
  if (Notification.permission !== 'granted') return;

  return new Notification(title, {
    body: options.body || '',
    icon: options.icon || '/icon-192.png',
    badge: options.badge || '/badge-72.png',
    tag: options.tag, // 同じタグの既存を置換
    silent: options.silent || false,
    requireInteraction: options.requireInteraction || false,
  });
}

パーミッション状態

状態	意味
default	ユーザーにまだ尋ねていない
granted	ユーザーが通知を許可
denied	ユーザーが通知をブロック

ベストプラクティス

1. コンテキスト内で尋ねる: ページ読み込み時ではなく、通知から恩恵を受けるアクションの後にパーミッションをリクエスト
2. 価値を説明: ブラウザのプロンプトをトリガーする前に通知が便利な理由を説明するカスタムUIを表示
3. 拒否を尊重: パーミッションが拒否された場合、繰り返し尋ねない
4. タグを使用: 同じタグで関連する通知をグループ化して通知スパムを防止
5. Service Worker: ページが閉じている場合の持続性のためにService Worker通知を使用