ServiceWorkerGlobalScope: sự kiện notificationclick
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is only available in Service Workers.
Sự kiện notificationclick của giao diện ServiceWorkerGlobalScope được kích hoạt để cho biết rằng một thông báo hệ thống được tạo bởi ServiceWorkerRegistration.showNotification() đã được nhấp.
Các thông báo được tạo trên luồng chính hoặc trong các workers không phải service workers
bằng cách sử dụng phương thức khởi tạo Notification() sẽ
thay vào đó nhận sự kiện click trên đối tượng Notification
của chính nó.
Sự kiện này không thể hủy và không nổi bọt.
Cú pháp
Sử dụng tên sự kiện trong các phương thức như addEventListener(), hoặc thiết lập một thuộc tính trình xử lý sự kiện.
addEventListener("notificationclick", (event) => { })
onnotificationclick = (event) => { }
Loại sự kiện
Một NotificationEvent. Kế thừa từ ExtendableEvent và Event.
Thuộc tính sự kiện
Kế thừa các thuộc tính từ các giao diện tổ tiên, ExtendableEvent và Event.
NotificationEvent.notificationRead only-
Trả về một đối tượng
Notificationđại diện cho thông báo đã được nhấp để kích hoạt sự kiện. NotificationEvent.actionRead only-
Trả về ID chuỗi của nút thông báo mà người dùng đã nhấp. Giá trị này trả về một chuỗi rỗng nếu người dùng nhấp vào thông báo ở nơi khác chứ không phải nút hành động, hoặc thông báo không có nút.
Ví dụ
Bạn có thể sử dụng sự kiện notificationclick trong phương thức 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("/");
}),
);
});
Hoặc sử dụng thuộc tính trình xử lý sự kiện 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("/");
}),
);
};
Bạn có thể xử lý các hành động sự kiện bằng cách sử dụng event.action trong trình xử lý sự kiện notificationclick:
navigator.serviceWorker.register("sw.js");
Notification.requestPermission().then((result) => {
if (result === "granted") {
navigator.serviceWorker.ready.then((registration) => {
// Show a notification that includes an action titled Archive.
registration.showNotification("New mail from Alice", {
actions: [
{
action: "archive",
title: "Archive",
},
],
});
});
}
});
self.addEventListener("notificationclick", (event) => {
event.notification.close();
if (event.action === "archive") {
// User selected the Archive action.
archiveEmail();
} else {
// User selected (e.g., clicked in) the main body of notification.
clients.openWindow("/inbox");
}
});
Đặc tả kỹ thuật
| Specification |
|---|
| Notifications API # activating-a-notification |
| Notifications API # dom-serviceworkerglobalscope-onnotificationclick |