Web Notifications API

ブラウザで通知を受け取ろう。

表示オプションも自由にカスタマイズしながらブラウザで通知を送受信してみましょう

通知許可

現在の通知許可ステータス

取得中...

default: ユーザーがまだ許可またはブロックの選択をしていない状態です。
granted: 通知の送信が許可されている状態です。
denied: 通知がブロックされている状態です。ブラウザの設定から許可を変更してください。

iOS環境でのWeb Pushご利用について

お使いのiOS / iPadOS環境では、ブラウザから直接Push通知を利用するためにはホーム画面に追加する必要があります。 Safariの下部メニューにある共有ボタン（四角から矢印が出ているアイコン）をタップし、メニューから「ホーム画面に追加」を選択してホーム画面からアプリを開いてください。

通知option設定

パターンA・パターンBで使用する通知内容と表示オプション

タイトル

本文

通知画像 URL

通知内に大きく表示されるリッチな画像を指定できます。

アイコン URL

アイコン画像を指定できます。

バッジ URL

バッジ画像を指定できます。

タグ

同じタグを持つ既存の通知を新しい通知で置き換えます。

文字方向

テキストの表示方向（自動・左から右・右から左）

言語

通知のBCP 47言語タグ（例: ja, en）

タイムスタンプ（Unix ms）

通知が生成された時刻をミリ秒で指定

振動パターン（ms）

デバイスが振動するミリ秒の配列パターン

クリック時に開く URL

通知をクリックした際にバックグラウンド等で開かれるURL（同一オリジンのみ）

renotifyタグ置換時も再通知（音やバイブ） requireInteractionユーザーが操作するまで自動消去しない silent対応環境で通知音や振動を無音にする

アクションボタン（JSON 配列）

通知の下部にインタラクティブなアクションボタンを最大2つまで配置できます。

プロパティ / 型 / 必須 / 説明
action / string / 必須 / アクションを識別する文字列
title / string / 必須 / ボタンに表示する文字列
icon / string / 任意 / ボタンのアイコン画像URL

Service Workerでの処理例

self.addEventListener("notificationclick", (event) => {
   event.notification.close();
   switch (event.action) {
      case "open":
         event.waitUntil(clients.openWindow("/home"));
         break;
      case "reply":
         event.waitUntil(clients.openWindow("/reply"));
         break;
      default:
         event.waitUntil(clients.openWindow("/"));
   }
});

パターンA：offline通知

Notification APIを利用したページ内通知

Pattern A / Notification API

即時通知・時間指定・各種オプションを試せます。スマホなどモバイル端末はブラウザとこのタブがメインのタブにいないと実行されません。

X秒後に通知

指定時刻に通知

通知する日時（端末のローカル時刻）

予約一覧

登録済みのローカル通知予約

現在時刻：--

予約はありません。

このデモはNotification APIとページ内タイマーだけを使用します。ページを閉じたり、ブラウザがバックグラウンドで停止したりすると、予約通知の実行は保証されません。

パターンB：Push API通知

Service WorkerとPush APIを利用した通知送信

Pattern B / Web Push API

自分のデバイスコード

この端末の登録状態と有効期限

保存されたコードはありません

コード生成は、このブラウザを通知先として登録します。

送信先

通知を届けたい端末を指定します。

デバイスコード（6桁）

上記の「通知option設定」で指定した内容をPush通知として送信します。

詳細log

通知・予約・Push APIの実行履歴

ログはまだありません。

待機中

コードを生成するか、登録済みのデバイスコードを入力してください。