API thông báo chi tiết

Sự khác biệt về nền tảng: Trong Chrome phiên bản 59, các thông báo sẽ xuất hiện theo cách khác đối với người dùng Mac OS X. Thay vì thông báo của Chrome, người dùng sẽ thấy thông báo gốc của Mac OS X. Tìm hiểu thêm trong bài viết này.

API thông báo đa dạng thức 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:

Thông báo trong khay người dùng hệ thống

Quảng cáo tìm kiếm động trông như thế nào

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 bao gồm tiêu đề, thông báo, biểu tượng nhỏ hiển thị ở bên trái thông báo và trường contextMessage hiển thị dưới dạng trường văn bản thứ 3 với phông chữ màu sáng hơn.

Hình ảnh cơ bản:

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ề danh sách

Thông báo hình ảnh bao gồm bản xem trước hình ảnh:

Thông báo bằng hình ảnh

Thông báo tiến trình hiển thị một thanh tiến trình:

Thông báo 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à ở trong khay hệ thống cho đến khi người dùng đóng các thông báo này. 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 thông báo sẽ được đặt lại về 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 < 0 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 0 là mức độ ưu tiên mặc định. Mức độ ưu tiên > 0 hiển thị để tăng thời lượng và nhiều thông báo có mức độ ưu tiên cao hơn có thể hiển thị trong khay hệ thống.

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, ứng dụng 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 thư trả lời:

Thao tác trong thông báo

Cách phát triển

Để sử dụng API này, hãy gọi phương thức notifications.create, truyền vào thông tin chi tiết về thông báo thông qua tham số options:

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

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

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

Tất cả các loại mẫu (basic, image, listprogress) phải bao gồm titlemessage thông báo cũng như iconUrl (đường liên kết đến một biểu tượng nhỏ hiển thị ở bên trái của nội dung thông báo).

Dưới đây là ví dụ về một mẫu basic:

var opt = {
  type: "basic",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon"
}

Tạo thông báo bằ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:

Sự khác biệt về nền tảng: Hình ảnh sẽ không hiển thị với người dùng sử dụng Chrome phiên bản 59 trở lên trên Mac OS X.
var opt = {
  type: "basic",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  imageUrl: "url_to_preview_image"
}

Trong Ứng dụng Chrome, theo Chính sách bảo mật nội dung nghiêm ngặt, các URL này phải trỏ đến một tài nguyên cục bộ hoặc sử dụng URL dữ liệu hoặc blob. Sử dụng tỷ lệ 3:2 cho hình ảnh; nếu không, hãy dùng một đường viền màu đen để tạo khung hình ảnh.

Thông báo về việc tạo danh sách

Mẫu list hiển thị items ở định dạng danh sách:

Điểm khác biệt về nền tảng: Chỉ mục danh sách đầu tiên mới hiển thị với người dùng sử dụng Chrome phiên bản 59 trở lên trên Mac OS X.
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."}]
}

Tạo thông báo về tiến trình

Mẫu progress hiển thị thanh tiến trình, trong đó tiến trình hiện tại nằm trong khoảng từ 0 đến 100:

Điểm khác biệt về nền tảng: Trong Chrome phiên bản 59 trở lên trên Mac OS X, thanh tiến trình sẽ hiển thị dưới dạng giá trị phần trăm trong tiêu đề thông báo thay vì hiển thị thanh tiến trình.
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 các sự kiện

Tất cả cá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 thao tác 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.
}

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