chrome.notifications
API memungkinkan Anda membuat notifikasi menggunakan template dan menampilkan notifikasi ini
kepada pengguna di baki sistem pengguna:
Tampilannya
Notifikasi lengkap terdiri dari 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 ketiga dalam font warna yang lebih terang.
Notifikasi dasar:
Notifikasi daftar menampilkan berapa pun item daftar:
Notifikasi gambar mencakup pratinjau gambar:
Notifikasi progres menampilkan status progres:
Bagaimana perilaku mereka
Di ChromeOS, notifikasi muncul di baki sistem pengguna dan tetap berada di baki sistem hingga pengguna menutupnya. Baki sistem akan menyimpan hitungan semua notifikasi baru. Setelah pengguna melihat notifikasi di baki sistem, jumlahnya akan direset ke nol.
Notifikasi dapat diberi prioritas antara -2 hingga 2. Prioritas yang kurang dari 0 ditampilkan di pusat notifikasi ChromeOS, dan menghasilkan error di platform lain. Prioritas default-nya adalah 0. Prioritas yang lebih besar dari 0 ditampilkan untuk durasi yang lebih lama dan notifikasi prioritas yang lebih tinggi dapat ditampilkan di baki sistem.
Setelan priority
tidak memengaruhi urutan notifikasi di macOS.
Selain menampilkan informasi, semua jenis notifikasi dapat menyertakan hingga dua item tindakan. Saat pengguna mengklik item tindakan, ekstensi 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 menggunakan
parameter options
:
await chrome.notifications.create(id, options);
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"
}
Gunakan gambar
Jenis template image
juga menyertakan imageUrl
, yang merupakan link ke gambar yang dipratinjau
dalam notifikasi. Perlu diperhatikan bahwa gambar tidak ditampilkan kepada pengguna di macOS.
var opt = {
type: "image",
title: "Primary Title",
message: "Primary message to display",
iconUrl: "url_to_small_icon",
imageUrl: "url_to_preview_image"
}
Membuat notifikasi daftar
Template list
menampilkan items
dalam format daftar. Perhatikan bahwa hanya item pertama yang ditampilkan kepada pengguna di 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
}
Memproses dan merespons peristiwa
Semua notifikasi dapat mencakup 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 pekerja layanan sehingga notifikasi dapat muncul meskipun ekstensi tidak berjalan.