ServiceWorkerRegistration.showNotification()

ServiceWorkerRegistration インターフェイスの showNotification() メソッドは、アクティブなサービスワーカー上で通知を作成します。

: この機能は Web Worker で使用できます。

構文

​serviceWorkerRegistration.showNotification(title, [options]);

パラメーター

title
通知内に表示する必要があるタイトル
options 省略可
通知の設定を可能にするオブジェクト。 次のプロパティを持つことができます。
  • actions: 通知に表示するアクションの配列。 配列のメンバーはオブジェクトリテラルである必要があります。 次の値が含まれる場合があります。
    • action: 通知に表示されるユーザーアクションを識別する DOMString
    • title: ユーザーに表示されるアクションテキストを含む DOMString
    • icon: アクションで表示するアイコンの URL を含む USVString
    適切な応答は、notificationclick イベント内の event.action を使用して作成されます。
  • badge: Android 通知バーなど、通知自体を表示するのに十分なスペースがない場合に通知を表す画像の URL を含むUSVString。 Android デバイスでは、バッジは最大 4x 解像度、約96 x 96 ピクセルのデバイスに対応する必要があり、画像は自動的にマスクされます。
  • body: 通知内に表示する追加のコンテンツを表す文字列。
  • data: 通知に関連付ける任意のデータ。 これは任意のデータ型にすることができます。
  • dir : 通知の方向。 autoltrrtl のいずれかです。
  • icon: 通知でアイコンとして使用される画像の URL を含む USVString
  • image: 通知に表示される画像の URL を含む USVString
  • lang: 通知内で使用される言語を指定します。 この文字列は、有効な BCP 47 言語タグである必要があります。
  • renotify: tag 値を再利用するときにバイブレーションと可聴アラートを抑制するかどうかを示すブール値。 オプションrenotifytrue で、オプションtag が空の文字列の場合、TypeError がスローされます。 デフォルトは false です。
  • requireInteraction: 画面が十分に大きいデバイスでは、ユーザーがクリックするか閉じるまで通知をアクティブにしておく必要があることを示します。 この値がないか false の場合、デスクトップバージョンの Chrome は約20秒後に通知を自動的に最小化します。 デフォルト値は false です。
  • silent: 設定されている場合、音やバイブレーションは発生しないことを示します。 オプションsilenttrue で、オプションvibrate が存在する場合、TypeError 例外がスローされます。 デフォルト値は false です。
  • tag: 必要に応じてスクリプトを使用して通知を検索、置換、または削除できるようにする所与の通知の ID。
  • timestamp: 通知が作成された時刻を表す DOMTimeStamp。 通知が実際に行われた時刻を示すために使用できます。 例えば、これは過去に、デバイスがオフラインだったためにすぐに配信できなかったメッセージに通知が使用された場合や、これから始まる会議に向けて通知が使用された場合などです。
  • vibrate: 通知の表示で実行するバイブレーションパターン。 バイブレーションパターンは、メンバーが1つしかない配列にすることができます。 値はミリ秒単位の時間で、偶数のインデックス(0、2、4 など)は振動する時間を示し、奇数のインデックスは一時停止する時間を示します。例えば、[300、100、400] は、300ミリ秒振動し、100ミリ秒休止してから、400ミリ秒振動します。

戻り値

undefined に解決する Promise

navigator.serviceWorker.register('sw.js');

function showNotification() {
  Notification.requestPermission(function(result) {
    if (result === 'granted') {
      navigator.serviceWorker.ready.then(function(registration) {
        registration.showNotification('バイブレーションの例', {
          body: 'ブンブン! ブンブン!',
          icon: '../images/touch/chrome-touch-icon-192x192.png',
          vibrate: [200, 100, 200, 100, 200, 100, 200],
          tag: 'vibration-sample'
        });
      });
    }
  });
}

上記の関数を適切なタイミングで呼び出すには、ServiceWorkerGlobalScope.onnotificationclick イベントハンドラーを使用できます。

ServiceWorkerRegistration.getNotifications() を使用して、現在のサービスワーカーから発生した Notification の詳細を取得することもできます。

仕様

仕様 状態 コメント
Notifications API
showNotification() の定義
現行の標準 初期定義

ブラウザーの互換性

BCD tables only load in the browser