API notifikasi lengkap

Perbedaan platform: Di Chrome versi 59, notifikasi akan muncul secara berbeda untuk pengguna Mac OS X. Sebagai ganti notifikasi Chrome sendiri, pengguna akan melihat notifikasi asli Mac OS X. Pelajari lebih lanjut dalam artikel ini.

API notifikasi yang lengkap memungkinkan Anda membuat notifikasi menggunakan template dan menampilkannya notifikasi untuk pengguna di area notifikasi pengguna:

Notifikasi di baki pengguna sistem

Tampilannya

Notifikasi yang lengkap hadir dalam empat jenis notifikasi yang berbeda: dasar, gambar, daftar, dan progres. Semua notifikasi meliputi judul, pesan, ikon kecil yang ditampilkan di sebelah kiri notifikasi pesan, dan kolom konteksMessage, yang ditampilkan sebagai kolom teks ke-3 dengan 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 mereka berperilaku

Di ChromeOS, notifikasi muncul di area notifikasi pengguna, dan tetap berada di area notifikasi pengguna menolaknya. Baki sistem menyimpan jumlah semua notifikasi baru. Setelah pengguna melihat notifikasi di area notifikasi, hitungannya akan direset ke nol.

Notifikasi dapat diberi prioritas antara -2 hingga 2. Prioritas < 0 ditampilkan di ChromeOS pusat notifikasi, dan menghasilkan {i>error<i} di platform lain. Prioritas 0 adalah prioritas default. Prioritas > 0 ditampilkan untuk menambah durasi dan lebih banyak notifikasi prioritas tinggi dapat yang ditampilkan di area notifikasi.

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, ketika pengguna mengklik "Balas", aplikasi email akan terbuka dan pengguna dapat menyelesaikan balasan:

Tindakan di notifikasi

Cara mengembangkannya

Untuk menggunakan API ini, panggil metode notifications.create, yang meneruskan detail notifikasi melalui parameter options:

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

notifications.NotificationOptions harus menyertakan notifications.TemplateType, yang mendefinisikan detail notifikasi yang tersedia dan bagaimana 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 untuk menampilkan 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:

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 atau gunakan blob atau URL data. Gunakan rasio 3:2 untuk gambar Anda; jika tidak, batas hitam membingkai gambar.

Buat 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."}]
}

Buat notifikasi progres

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

Perbedaan platform: Di Chrome versi 59+ pada Mac OS X, status progres ditampilkan sebagai nilai persentase dalam judul notifikasi, bukan menampilkan 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 bisa mencakup pemroses peristiwa dan pengendali peristiwa yang merespons tindakan pengguna (lihat chrome.events). Misalnya, Anda bisa menulis sebuah pengendali peristiwa untuk merespons sebuah 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, agar notifikasi dapat dapat muncul bahkan saat aplikasi atau ekstensi tidak berjalan.