ServiceWorkerRegistration.showNotification()

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

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

構文

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

パラメーター

title
通知内に表示する必要があるタイトル
options Optional
通知の設定を可能にするオブジェクト。 次のプロパティを持つことができます。
  • 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() の定義
現行の標準 初期定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
showNotification
実験的
Chrome 完全対応 40Edge 完全対応 17
完全対応 17
完全対応 16
無効
無効 From version 16: this feature is behind the Enable service workers preference.
Firefox 完全対応 46
補足
完全対応 46
補足
補足 Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR).
IE 未対応 なしOpera 完全対応 27Safari 未対応 なしWebView Android 完全対応 40Chrome Android 完全対応 40Firefox Android 完全対応 46Opera Android 完全対応 27Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
actions
実験的
Chrome 完全対応 45Edge 完全対応 ≤79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 32Safari 未対応 なしWebView Android 完全対応 45Chrome Android 完全対応 45Firefox Android 未対応 なしOpera Android 完全対応 32Safari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
badge
実験的
Chrome 完全対応 53Edge 完全対応 ≤79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 39Safari 未対応 なしWebView Android 完全対応 53Chrome Android 完全対応 53Firefox Android 未対応 なしOpera Android 完全対応 41Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0
data
実験的
Chrome 完全対応 44Edge 完全対応 ≤79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 31Safari 未対応 なしWebView Android 完全対応 44Chrome Android 完全対応 44Firefox Android 未対応 なしOpera Android 完全対応 32Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
image
実験的
Chrome 完全対応 56Edge 完全対応 ≤79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 43Safari 未対応 なしWebView Android 完全対応 56Chrome Android 完全対応 56Firefox Android 未対応 なしOpera Android 完全対応 43Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0
renotify
実験的
Chrome 完全対応 50Edge 完全対応 ≤79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 37Safari 未対応 なしWebView Android 完全対応 50Chrome Android 完全対応 50Firefox Android 未対応 なしOpera Android 完全対応 37Safari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
requireInteraction
実験的
Chrome 完全対応 47Edge 完全対応 ≤79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 34Safari 未対応 なしWebView Android 完全対応 47Chrome Android 完全対応 47Firefox Android 未対応 なしOpera Android 完全対応 34Safari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
vibrate
実験的
Chrome 完全対応 45Edge 完全対応 ≤79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 32Safari 未対応 なしWebView Android 完全対応 45Chrome Android 完全対応 45Firefox Android 未対応 なしOpera Android 完全対応 32Safari iOS 未対応 なしSamsung Internet Android 完全対応 5.0

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。