chrome.notifications API cho phép bạn tạo thông báo bằng các mẫu và hiện những thông báo này cho người dùng trong khay hệ thống của người dùng:
Giao diện không đẹp mắt
Thông báo phong phú có 4 phiên bản: cơ bản, hình ảnh, danh sách và tiến trình. Tất cả thông báo đều có tiêu đề, tin nhắn, biểu tượng nhỏ hiển thị ở bên trái thông báo và trường contextMessage được hiển thị dưới dạng trường văn bản thứ ba với phông chữ màu sáng hơn.
Thông báo cơ bản:
Thông báo danh sách hiển thị số lượng mục trong danh sách bất kỳ:
Thông báo hình ảnh bao gồm bản xem trước hình ảnh:
Thông báo tiến trình hiển thị một thanh tiến trình:
Hành vi của họ
Trên ChromeOS, thông báo sẽ xuất hiện trong khay hệ thống của người dùng và ở trong khay hệ thống cho đến khi người dùng đóng thông báo. Khay hệ thống lưu trữ số lượng tất cả thông báo mới. Sau khi người dùng thấy thông báo trong khay hệ thống, số lượng sẽ được đặt lại về 0.
Bạn có thể gán mức độ ưu tiên của thông báo trong khoảng từ -2 đến 2. Các mức độ ưu tiên nhỏ hơn 0 sẽ hiển thị trong trung tâm thông báo của ChromeOS và gây ra lỗi trên các nền tảng khác. Mức độ ưu tiên mặc định là 0. Các mức độ ưu tiên lớn hơn 0 sẽ xuất hiện để tăng thời lượng và các thông báo có mức độ ưu tiên cao khác có thể xuất hiện trong khay hệ thống.
Chế độ cài đặt priority không ảnh hưởng đến thứ tự các thông báo trên macOS.
Ngoài việc hiển thị thông tin, tất cả các loại thông báo đều có thể bao gồm tối đa hai mục hành động. Khi người dùng nhấp vào một mục hành động, tiện ích của bạn có thể phản hồi bằng hành động thích hợp đó. Ví dụ: khi người dùng nhấp vào Trả lời, ứng dụng email sẽ mở ra và người dùng có thể hoàn tất việc trả lời:
Cách phát triển
Để sử dụng API này, hãy gọi phương thức notifications.create(), truyền thông tin chi tiết về thông báo bằng tham số options:
await chrome.notifications.create(id, options);
notifications.NotificationOptions phải bao gồm notifications.TemplateType. Lớp này xác định thông tin chi tiết về thông báo có sẵn và cách hiển thị những thông tin đó.
Tạo thông báo cơ bản
Tất cả loại mẫu (basic, image, list và progress) phải bao gồm title và message thông báo, cũng như iconUrl. Đây là đường liên kết đến một biểu tượng nhỏ hiển thị ở bên trái nội dung thông báo.
Dưới đây là ví dụ về mẫu basic:
var opt = {
type: "basic",
title: "Primary Title",
message: "Primary message to display",
iconUrl: "url_to_small_icon"
}
Sử dụng hình ảnh
Loại mẫu image cũng bao gồm imageUrl, là đường liên kết đến hình ảnh được xem trước trong thông báo. Xin lưu ý rằng người dùng trên macOS sẽ không nhìn thấy hình ảnh.
var opt = {
type: "image",
title: "Primary Title",
message: "Primary message to display",
iconUrl: "url_to_small_icon",
imageUrl: "url_to_preview_image"
}
Tạo thông báo danh sách
Mẫu list hiển thị items ở định dạng danh sách. Xin lưu ý rằng người dùng trên macOS chỉ nhìn thấy mục đầu tiên.
var opt = {
type: "list",
title: "Primary Title",
message: "Primary message to display",
iconUrl: "url_to_small_icon",
items: [{ title: "Item1", message: "This is item 1."},
{ title: "Item2", message: "This is item 2."},
{ title: "Item3", message: "This is item 3."}]
}```
### Create progress notification {: #progress }
The `progress` template displays a progress bar where current progress ranges from 0 to 100. On macOS the progress bar displays as a percentage value in the notification title instead of in the progress bar.
```js
var opt = {
type: "progress",
title: "Primary Title",
message: "Primary message to display",
iconUrl: "url_to_small_icon",
progress: 42
}
Nghe và phản hồi sự kiện
Tất cả thông báo có thể bao gồm trình nghe sự kiện và trình xử lý sự kiện phản hồi hành động của người dùng (xem chrome.events). Ví dụ: bạn có thể viết một trình xử lý sự kiện để phản hồi một sự kiện notifications.onButtonClicked.
Trình nghe sự kiện:
chrome.notifications.onButtonClicked.addListener(replyBtnClick);
Trình xử lý sự kiện:
function replyBtnClick {
//Write function to respond to user action.
}
Hãy cân nhắc việc đưa trình nghe và trình xử lý sự kiện vào trình chạy dịch vụ để thông báo có thể bật lên ngay cả khi tiện ích không chạy.