ServiceWorkerRegistration.showNotification()
showNotification() は ServiceWorkerRegistration インターフェイスのメソッドで、アクティブなサービスワーカー上で通知を作成します。
メモ: この機能はウェブワーカーで利用できます。
構文
js
showNotification(title)
showNotification(title, options)
引数
title-
通知内に表示する必要があるタイトル
options省略可-
通知の設定を可能にするオブジェクト。 次のプロパティを持つことができます。
actionsExperimental-
通知に表示するアクションの配列。 配列のメンバーはオブジェクトリテラルである必要があります。 次の値が含まれる場合があります。
action-
通知に表示されるユーザーアクションを識別する文字列。
title-
ユーザーに表示されるアクションテキストを含む文字列。
icon-
アクションで表示するアイコンの URL を含む文字列。
適切なレスポンスは、
event.actionをnotificationclickイベントで使用することで作成されます。 badgeExperimental-
文字列で、Android の通知バーなど、通知自体を表示するのに十分なスペースがない場合に通知を表す画像の URL が入ります。Android 端末では、バッジは最大 4 倍の解像度、約 96 x 96 ピクセルの端末に対応する必要があり、画像は自動的にマスクされます。
body-
通知内に表示する追加のコンテンツを表す文字列。
dataExperimental-
通知に関連付ける任意のデータ。 これは任意のデータ型にすることができます。
dir-
通知の方向。
auto、ltr、rtlのいずれかです。 icon-
通知でアイコンとして使用される画像の URL を含む文字列。
imageExperimental-
通知に表示される画像の URL を含む文字列。
lang-
通知内で使用される言語を指定します。 この文字列は、RFC 5646: 言語識別子のタグ (BCP 47 とも呼ばれる)に基づく有効なものである必要があります。
renotifyExperimental-
論理値で、
tag値を再利用するときにバイブレーションと可聴アラートを抑制するかどうかを示します。 オプションのrenotifyがtrueで、オプションのtagが空の文字列の場合、TypeError が発生します。既定値はfalseです。 requireInteractionExperimental-
画面が十分に大きい端末では、ユーザーがクリックするか閉じるまで通知をアクティブにしておく必要があることを示します。 この値がないか
falseの場合、デスクトップ版の Chrome は約 20 秒後に通知を自動的に最小化します。既定値はfalseです。 silent-
設定されている場合、音やバイブレーションは発生しないことを示します。オプションの
silentがtrueで、オプションのvibrateが存在する場合、TypeError 例外が発生します。既定値はfalseです。 tag-
必要に応じてスクリプトを使用して通知を検索、置換、または削除できるようにする所与の通知の ID です。
timestamp-
この通知に関連付けられた時刻で、ミリ秒単位のUnix 時刻で表されるタイムスタンプです。これは過去に、端末がオフラインだったためにすぐに配信できなかったメッセージに通知が使用された場合や、これから始まる会議に向けて通知が使用された場合などです。
vibrateExperimental-
通知の表示で実行するバイブレーションパターン。 バイブレーションパターンは、メンバーが 1 つしかない配列にすることができます。 値はミリ秒単位の時間で、偶数のインデックス(0、2、4 など)は振動する時間を示し、奇数のインデックスは一時停止する時間を示します。例えば、
[300, 100, 400]は、 300 ミリ秒振動し、 100 ミリ秒休止してから、 400 ミリ秒振動します。
返値
undefined に解決するプロミス (Promise) です。
例
js
navigator.serviceWorker.register("sw.js");
function showNotification() {
Notification.requestPermission((result) => {
if (result === "granted") {
navigator.serviceWorker.ready.then((registration) => {
registration.showNotification("バイブレーションの例", {
body: "ブンブン! ブンブン!",
icon: "../images/touch/chrome-touch-icon-192x192.png",
vibrate: [200, 100, 200, 100, 200, 100, 200],
tag: "vibration-sample",
});
});
}
});
}
上記の関数を適切なタイミングで呼び出すには、onnotificationclick イベントハンドラーが使用できます。
現在のサービスワーカーから発生した Notification の詳細は、 ServiceWorkerRegistration.getNotifications() を使用して取得することもできます。
仕様書
| Specification |
|---|
| Notifications API Standard # dom-serviceworkerregistration-shownotification |
ブラウザーの互換性
BCD tables only load in the browser