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

API browser.notifications cho phép bạn tạo thông báo bằng cách sử dụng các mẫu và cho người dùng thấy những thông báo này trong khay hệ thống của người dùng:

Hình thức của các chỉ số

Thông báo đa dạng 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 đều có tiêu đề, thông báo, biểu tượng nhỏ xuất hiện ở bên trái thông báo và trường contextMessage. Trường này xuất hiện dưới dạng trường văn bản thứ ba bằng phông chữ có màu sáng hơn.

Thông báo cơ bản:

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

Thông báo bằng hình ảnh có bản xem trước hình ảnh:

Thông báo về tiến trình có một thanh tiến trình:

Cách hoạt động

Trên ChromeOS, thông báo sẽ 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 đóng thông báo. Khay hệ thống sẽ lưu giữ 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 thành 0.

Bạn có thể chỉ định mức độ ưu tiên cho thông báo trong khoảng từ -2 đến 2. Các mức độ ưu tiên nhỏ hơn 0 sẽ xuất hiện 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 trong thời gian dài hơn và nhiều thông báo có mức độ ưu tiên cao hơn có thể xuất hiện 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 đều có thể có 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 các kỹ năng này

Để 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 browser.notifications.create(id, options);

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

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

Tất cả các loại mẫu (basic, image, list và progress) đều phải có một thông báo title và message, cũng như một iconUrl. Đây là đường liên kết đến một biểu tượng nhỏ xuất hiện ở bên trái 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 ảnh có sẵn

Loại mẫu image cũng bao gồm một imageUrl, là đường liên kết đến một hình ảnh được xem trước trong thông báo. Xin lưu ý rằng người dùng macOS sẽ không 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 dạng danh sách

Mẫu list hiển thị items ở định dạng danh sách. Xin lưu ý rằng chỉ mục đầu tiên được hiển thị cho người dùng 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
}

Lắng nghe và phản hồi các sự kiện

Tất cả thông báo đều có thể bao gồm trình nghe sự kiện và trình xử lý sự kiện để phản hồi các hành động của người dùng (xem browser.events). Ví dụ: bạn có thể viết một trình xử lý sự kiện để phản hồi sự kiện notifications.onButtonClicked.

Trình nghe sự kiện:

browser.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 sự kiện và trình xử lý vào trong trình chạy dịch vụ để thông báo có thể xuất hiện ngay cả khi tiện ích không chạy.