ServiceWorkerRegistration: phương thức showNotification()
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.
* Some parts of this feature may have varying levels of support.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
showNotification() là phương thức của giao diện ServiceWorkerRegistration tạo một thông báo trên một service worker đang hoạt động.
Cú pháp
showNotification(title)
showNotification(title, options)
Tham số
title-
Xác định tiêu đề cho thông báo, tiêu đề này được hiển thị ở đầu cửa sổ thông báo.
optionsOptional-
Một đối tượng tùy chọn chứa bất kỳ thiết lập tùy chỉnh nào bạn muốn áp dụng cho thông báo. Các tùy chọn khả dụng là:
actionsOptional Experimental-
Một mảng các hành động để hiển thị trong thông báo, mặc định là một mảng rỗng. Mỗi phần tử trong mảng có thể là một đối tượng với các thành viên sau:
action-
Một chuỗi xác định hành động của người dùng sẽ được hiển thị trên thông báo.
title-
Một chuỗi chứa văn bản hành động sẽ hiển thị cho người dùng.
iconOptional-
Một chuỗi chứa URL của biểu tượng sẽ hiển thị cùng hành động.
-
Một chuỗi chứa URL để điều hướng tới khi người dùng kích hoạt hành động này. Khi được đặt, user agent sẽ điều hướng đến URL này thay vì kích hoạt sự kiện
notificationclick. XemNotification.navigateđể biết thêm thông tin.
Các phản hồi phù hợp được tạo bằng cách dùng
event.actiontrong sự kiệnnotificationclick. badgeOptional Experimental-
Một chuỗi chứa URL của ảnh được dùng để biểu diễn thông báo khi không đủ chỗ để hiển thị chính thông báo; ví dụ như thanh thông báo của Android. Trên thiết bị Android, huy hiệu nên hỗ trợ độ phân giải tới 4x, khoảng 96x96px, và ảnh sẽ tự động được che mặt nạ.
bodyOptional-
Một chuỗi biểu thị phần nội dung của thông báo, được hiển thị bên dưới tiêu đề. Mặc định là chuỗi rỗng.
dataOptional Experimental-
Dữ liệu tùy ý mà bạn muốn gắn với thông báo. Đây có thể là bất kỳ kiểu dữ liệu structured-clonable nào. Mặc định là
null. dirOptional-
Hướng hiển thị của thông báo. Mặc định là
auto, tức là kế thừa hành vi cài đặt ngôn ngữ của trình duyệt, nhưng bạn có thể ghi đè bằng cách đặtltrvàrtl(mặc dù hầu hết trình duyệt dường như bỏ qua các cài đặt này). iconOptional-
Một chuỗi chứa URL của biểu tượng sẽ được hiển thị trong thông báo.
imageOptional Experimental-
Một chuỗi chứa URL của hình ảnh sẽ được hiển thị trong thông báo.
langOptional-
Ngôn ngữ của thông báo, được chỉ định bằng một chuỗi đại diện cho BCP 47 language tag. Mặc định là chuỗi rỗng.
-
Một chuỗi chứa URL để điều hướng tới khi người dùng kích hoạt thông báo. Khi được đặt, user agent sẽ điều hướng đến URL này thay vì kích hoạt sự kiện
notificationclick. Giá trị được phân tích tương đối với URL cơ sở của service worker. XemNotification.navigateđể biết thêm thông tin. renotifyOptional Experimental-
Một giá trị boolean xác định liệu người dùng có nên được thông báo lại sau khi một thông báo mới thay thế thông báo cũ hay không. Mặc định là
false, nghĩa là họ sẽ không được thông báo. Nếu làtrue, thìtagcũng phải được đặt. requireInteractionOptional Experimental-
Cho biết thông báo nên duy trì hoạt động cho đến khi người dùng nhấp hoặc đóng nó, thay vì tự động đóng. Giá trị mặc định là
false. silentOptional-
Một giá trị boolean xác định liệu thông báo có im lặng hay không (không phát âm thanh hoặc rung), bất kể cài đặt thiết bị. Mặc định,
null, nghĩa là tôn trọng cài đặt mặc định của thiết bị. Nếu làtrue, thìvibratekhông được xuất hiện. tagOptional-
Một chuỗi đại diện cho thẻ định danh của thông báo. Mặc định là chuỗi rỗng.
timestampOptional-
Dấu thời gian, được đưa ra dưới dạng Unix time tính bằng mili giây, biểu thị thời điểm liên quan đến thông báo. Giá trị này có thể ở quá khứ khi thông báo được dùng cho một tin nhắn không thể gửi ngay vì thiết bị ngoại tuyến, hoặc ở tương lai đối với một cuộc họp sắp bắt đầu.
vibrateOptional Experimental-
Một mẫu rung cho phần cứng rung của thiết bị để phát cùng thông báo. Nếu được chỉ định,
silentkhông được làtrue.
Giá trị trả về
Một Promise được phân giải thành undefined.
Ngoại lệ
TypeError-
Được ném nếu:
- Trạng thái của service worker hiện tại không phải là
activatinghoặcactivated. - Người dùng đã từ chối rõ ràng yêu cầu cấp quyền của trình duyệt để dùng API này.
- Tùy chọn
silentlàtruevà tùy chọnvibrateđược chỉ định. - Tùy chọn
renotifylàtruenhưng tùy chọntagrỗng.
- Trạng thái của service worker hiện tại không phải là
DataCloneErrorDOMException-
Được ném nếu việc tuần tự hóa tùy chọn
datathất bại vì một lý do nào đó.
Ví dụ
navigator.serviceWorker.register("sw.js");
function showNotification() {
Notification.requestPermission().then((result) => {
if (result === "granted") {
navigator.serviceWorker.ready.then((registration) => {
registration.showNotification("Vibration Sample", {
body: "Buzz! Buzz!",
icon: "../images/touch/chrome-touch-icon-192x192.png",
vibrate: [200, 100, 200, 100, 200, 100, 200],
tag: "vibration-sample",
});
});
}
});
}
Để gọi hàm trên vào thời điểm thích hợp, bạn có thể lắng nghe sự kiện notificationclick.
Bạn cũng có thể truy xuất chi tiết của các Notification đã được phát từ service worker hiện tại bằng cách dùng ServiceWorkerRegistration.getNotifications().
Đặc tả kỹ thuật
| Specification |
|---|
| Notifications API> # dom-serviceworkerregistration-shownotification> |