API notifikasi lengkap

Perbedaan platform: Di Chrome versi 59, notifikasi muncul secara berbeda untuk pengguna Mac OS X. Pengguna akan melihat notifikasi Mac OS X asli, bukan notifikasi Chrome. Pelajari lebih lanjut di artikel ini.

Rich Notifications API memungkinkan Anda membuat notifikasi menggunakan template dan menampilkan notifikasi ini kepada pengguna di area notifikasi sistem pengguna:

Notifikasi di panel pengguna sistem

Tampilannya

Notifikasi multimedia hadir dalam empat jenis: 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 yang lebih terang.

Gambar dasar:

Notifikasi dasar

Notifikasi daftar menampilkan sejumlah item daftar:

Notifikasi daftar

Notifikasi gambar menyertakan pratinjau gambar:

Notifikasi gambar

Notifikasi progres menampilkan status progres:

Notifikasi progres

Bagaimana perilaku mereka

Di ChromeOS, notifikasi muncul di baki sistem pengguna, dan tetap berada di baki sistem hingga pengguna menutupnya. Area notifikasi menyimpan jumlah semua notifikasi baru. Setelah pengguna melihat notifikasi di baki sistem, jumlah akan direset menjadi 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 lebih banyak notifikasi prioritas tinggi dapat ditampilkan di area notifikasi 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:

Tindakan dalam notifikasi

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 contoh template basic:

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

Membuat notifikasi gambar

Jenis template image juga menyertakan imageUrl, yang merupakan link ke gambar yang pratinjaunya ditampilkan dalam notifikasi:

Perbedaan platform: Gambar tidak akan ditampilkan kepada pengguna yang menggunakan Chrome versi 59+ di 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"
}

Di Aplikasi Chrome, karena Kebijakan Keamanan Konten yang ketat, URL ini harus mengarah ke resource lokal atau menggunakan URL blob atau data. Gunakan rasio 3:2 untuk gambar Anda; jika tidak, bingkai hitam akan membingkai gambar.

Membuat notifikasi daftar

Template list menampilkan items dalam format daftar:

Perbedaan platform: Hanya item daftar pertama yang ditampilkan kepada pengguna di Chrome versi 59+ di 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."}]
}

Membuat notifikasi progres

Template progress menampilkan status progres dengan rentang progres saat ini dari 0 hingga 100:

Perbedaan platform: Di Chrome versi 59+ di Mac OS X, status progres ditampilkan sebagai nilai persentase di judul notifikasi, bukan sebagai status progres.
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.