ServiceWorkerGlobalScope: notificationclick イベント
notificationclick
イベントは、 ServiceWorkerRegistration.showNotification()
によって生み出されたシステム通知がクリックされたことを示すために発生します。
このイベントはキャンセル不可で、バブリングしません。
構文
このイベント名を addEventListener()
等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener('notificationclick', (event) => { });
onnotificationclick = (event) => { };
イベント型
NotificationEvent
です。 Event
を継承しています。
イベントプロパティ
親である Event
からプロパティを継承しています。
NotificationEvent.notification
読取専用-
クリックされイベントが発行された通知を表す
Notification
オブジェクトを返します。 NotificationEvent.action
読取専用-
ユーザーがクリックした通知ボタンの文字列 ID を返します。この値は、ユーザーがアクションボタン以外のどこかで通知をクリックした場合、またはその通知にボタンがなかった場合、空文字列を返します。
例
notificationclick
イベントは addEventListener
メソッド内で使用することができます。
self.addEventListener('notificationclick', (event) => {
console.log('On notification click: ', event.notification.tag);
event.notification.close();
// This looks to see if the current is already open and
// focuses if it is
event.waitUntil(clients.matchAll({
type: "window"
}).then((clientList) => {
for (const client of clientList) {
if (client.url === '/' && 'focus' in client)
return client.focus();
}
if (clients.openWindow)
return clients.openWindow('/');
}));
});
または、 onnotificationclick
イベントハンドラープロパティを使用してください。
self.onnotificationclick = (event) => {
console.log('On notification click: ', event.notification.tag);
event.notification.close();
// This looks to see if the current is already open and
// focuses if it is
event.waitUntil(clients.matchAll({
type: "window"
}).then((clientList) => {
for (const client of clientList) {
if (client.url === '/' && 'focus' in client)
return client.focus();
}
if (clients.openWindow)
return clients.openWindow('/');
}));
};
イベントのアクションは event.action
を使って notificationclick
イベントハンドラーの中で処理することができます。
navigator.serviceWorker.register('sw.js');
Notification.requestPermission((result) => {
if (result === 'granted') {
navigator.serviceWorker.ready.then((registration) => {
// Archive というタイトルのアクションを含んだ通知を表示します。
registration.showNotification('New mail from Alice',
{
actions: [
{
action: 'archive',
title: 'Archive'
}
]
}
)
});
}
});
self.addEventListener('notificationclick', (event) => {
event.notification.close();
if (event.action === 'archive') {
// ユーザーが [Archive] アクションを選択しました。
archiveEmail();
} else {
// ユーザーが通知本文を選択(例:クリック)した。
clients.openWindow('/inbox');
}
}, false);
仕様書
Specification |
---|
Notifications API Standard # activating-a-notification |
Notifications API Standard # dom-serviceworkerglobalscope-onnotificationclick |
ブラウザーの互換性
BCD tables only load in the browser