API notifikasi kaya memungkinkan Anda membuat notifikasi menggunakan template dan menampilkan notifikasi ini kepada pengguna di baki sistem pengguna:
Tampilannya
Notifikasi yang beragam hadir dalam empat ragam yang berbeda: dasar, gambar, daftar, dan progres. Semua notifikasi mencakup judul, pesan, ikon kecil yang ditampilkan di sebelah kiri pesan notifikasi, dan kolom contextMessage, yang ditampilkan sebagai kolom teks ke-3 dalam font warna lebih terang.
Gambar dasar:
Notifikasi daftar menampilkan berapa pun item daftar:
Notifikasi gambar mencakup pratinjau gambar:
Notifikasi progres menampilkan status progres:
Bagaimana perilaku mereka
Di ChromeOS, notifikasi akan muncul di baki sistem pengguna, dan tetap berada di baki sistem hingga pengguna menutupnya. Baki sistem menyimpan jumlah semua notifikasi baru. Setelah pengguna melihat notifikasi di baki sistem, jumlahnya akan direset ke nol.
Notifikasi dapat diberi prioritas antara -2 hingga 2. Prioritas < 0 ditampilkan di pusat notifikasi ChromeOS, dan menghasilkan error di platform lain. Prioritas 0 adalah prioritas default. Prioritas > 0 ditampilkan untuk durasi yang meningkat dan notifikasi dengan prioritas yang lebih tinggi dapat ditampilkan di baki sistem.
Selain menampilkan informasi, semua jenis notifikasi dapat menyertakan hingga dua item tindakan. Saat pengguna mengklik item tindakan, aplikasi Anda dapat merespons dengan tindakan yang sesuai. Misalnya, saat pengguna mengklik "Balas", aplikasi email akan terbuka dan pengguna dapat menyelesaikan balasan:
Cara mengembangkannya
Untuk menggunakan API ini, panggil metode notifications.create, dengan meneruskan detail notifikasi melalui
parameter options
:
chrome.notifications.create(id, options, creationCallback);
notifications.NotificationOptions harus menyertakan notifications.TemplateType, yang menentukan detail notifikasi yang tersedia dan cara detail tersebut ditampilkan.
Membuat notifikasi dasar
Semua jenis template (basic
, image
, list
, dan progress
) harus menyertakan notifikasi title
dan
message
, serta iconUrl
, yang merupakan link ke ikon kecil yang ditampilkan di sebelah kiri
pesan notifikasi.
Berikut adalah contoh template basic
:
var opt = { type: "basic", title: "Primary Title", message: "Primary message to display", iconUrl: "url_to_small_icon" }
Buat notifikasi gambar
Jenis template image
juga menyertakan imageUrl
, yang merupakan link ke gambar yang dipratinjau
dalam notifikasi:
var opt = {
type: "basic",
title: "Primary Title",
message: "Primary message to display",
iconUrl: "url_to_small_icon",
imageUrl: "url_to_preview_image"
}
Di Aplikasi Chrome, karena Kebijakan Keamanan Konten yang ketat, URL ini harus mengarah ke resource lokal atau menggunakan blob atau URL data. Gunakan rasio 3:2 untuk gambar; jika tidak, batas hitam akan membingkai gambar.
Membuat notifikasi daftar
Template list
menampilkan items
dalam format daftar:
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."}] }
Notifikasi progres pembuatan
Template progress
menampilkan status progres dengan progres saat ini dalam rentang 0 hingga 100:
var opt = {
type: "progress",
title: "Primary Title",
message: "Primary message to display",
iconUrl: "url_to_small_icon",
progress: 42
}
Memproses dan merespons peristiwa
Semua notifikasi dapat menyertakan pemroses peristiwa dan pengendali peristiwa yang merespons tindakan pengguna (lihat chrome.events). Misalnya, Anda dapat menulis pengendali peristiwa untuk merespons peristiwa notifications.onButtonClicked.
Pemroses peristiwa:
chrome.notifications.onButtonClicked.addListener(replyBtnClick);
Pengendali peristiwa:
function replyBtnClick {
//Write function to respond to user action.
}
Pertimbangkan untuk menyertakan pemroses dan pengendali peristiwa dalam halaman peristiwa, sehingga notifikasi dapat muncul meskipun aplikasi atau ekstensi tidak berjalan.