Sử dụng API Thông báo

API chrome.notifications 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 thông báo cho người dùng trong khay hệ thống của người dùng:

Giao diện của quảng cáo

Thông báo đa dạng thức có 4 loại: cơ bản, hình ảnh, danh sách và tiến trình. Tất cả thông báo bao gồm tiêu đề, tin nhắn, biểu tượng nhỏ hiển thị ở bên trái thông báo tin nhắn 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.

Một thông báo cơ bản:

Thông báo danh sách hiển thị số lượng mục danh sách bất kỳ:

Thông báo về hình ảnh bao gồm một 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 xuất hiện trong khay hệ thống của người dùng và vẫn nằm trong khay hệ thống cho đến khi người dùng loại bỏ chúng. Khay hệ thống sẽ đếm 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ể chỉ định mức độ ưu tiên cho thông báo từ -2 đến 2. Các mức độ ưu tiên nhỏ hơn 0 sẽ xuất hiện trong ChromeOS trung tâm thông báo 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. Mức độ ưu tiên lớn hơn 0 sẽ hiển thị khi tăng khoảng thời gian và có thể tạo ra nhiều thông báo có mức độ ưu tiên cao được hiển thị trong khay hệ thống.

Chế độ cài đặt priority không ảnh hưởng đến thứ tự 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 có thể bao gồm tối đa 2 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 cách sử dụng tham số options:

await chrome.notifications.create(id, options);

notifications.NotificationOptions phải bao gồm notifications.TemplateType xác định các chi tiết thông báo có sẵn và cách hiển thị những chi tiết đó.

Tạo một thông báo cơ bản

Tất cả các loại mẫu (basic, image, list và progress) đều phải bao gồm một thông báo title và message, cũng như iconUrl, là một liên kết đến một biểu tượng nhỏ được 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 một hình ảnh được xem trước trong thông báo đó. Lưu ý: 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 chỉ người dùng đầu tiên mới nhìn thấy mục đầu tiên trên macOS.

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 notifications.onButtonClicked sự kiện.

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.
}

Cân nhắc đưa trình nghe và trình xử lý sự kiện vào trong trình chạy dịch vụ để các thông báo có thể bật lên ngay cả khi tiện ích không chạy.