Opsi notifikasi dibagi menjadi dua bagian, satu bagian yang berhubungan dengan bagian berikutnya) dan menjelaskan aspek perilaku notifikasi (bagian berikutnya).
Anda dapat bermain-main dengan berbagai opsi notifikasi di berbagai browser pada berbagai platform menggunakan aplikasi Peter Beverloo Generator Notifikasi.
Opsi Visual
API untuk menampilkan notifikasi sederhana:
<ServiceWorkerRegistration>.showNotification(<title>, <options>);
Kedua argumen, title
dan options
bersifat opsional.
Judulnya berupa string dan opsinya dapat berupa salah satu dari berikut ini:
{
"//": "Visual Options",
"body": "<String>",
"icon": "<URL String>",
"image": "<URL String>",
"badge": "<URL String>",
"dir": "<String of 'auto' | 'ltr' | 'rtl'>",
"timestamp": "<Long>"
"//": "Both visual & behavioral options",
"actions": "<Array of Strings>",
"data": "<Anything>",
"//": "Behavioral Options",
"tag": "<String>",
"requireInteraction": "<boolean>",
"renotify": "<Boolean>",
"vibrate": "<Array of Integers>",
"sound": "<URL String>",
"silent": "<Boolean>",
}
Mari kita lihat opsi visual:
Opsi judul dan isi
Seperti inilah tampilan notifikasi tanpa judul dan opsi di Chrome pada Windows:
Seperti yang Anda lihat, nama browser digunakan sebagai judul dan "Notifikasi baru" placeholder adalah digunakan sebagai isi notifikasi.
Jika aplikasi progressive web diinstal di perangkat, nama aplikasi web akan digunakan nama browser:
Jika kita menjalankan kode berikut:
const title = 'Simple Title';
const options = {
body: 'Simple piece of body text.\nSecond line of body text :)',
};
registration.showNotification(title, options);
kita akan mendapatkan notifikasi ini di Chrome di Linux:
Pada Firefox di Linux, kodenya akan terlihat seperti ini:
Seperti inilah tampilan notifikasi dengan banyak teks di judul dan isi di Chrome Linux:
Firefox di Linux menciutkan teks isi sampai Anda mengarahkan kursor notifikasi, yang menyebabkan notifikasi untuk memperluas:
Notifikasi yang sama di Firefox pada Windows terlihat seperti ini:
Seperti yang Anda lihat, notifikasi yang sama mungkin terlihat berbeda di browser yang berbeda. Mungkin juga terlihat berbeda di {i>browser<i} yang sama dan platform yang berbeda.
Chrome dan Firefox menggunakan notifikasi sistem dan pusat notifikasi di platform tempat yang tersedia.
Misalnya, notifikasi sistem di macOS tidak mendukung gambar dan tindakan (tombol dan inline balasan).
Chrome juga memiliki notifikasi kustom untuk semua platform desktop. Anda dapat mengaktifkannya dengan menyetel
chrome://flags/#enable-system-notifications
ke status Disabled
.
Ikon
Opsi icon
pada dasarnya adalah gambar kecil yang dapat Anda tampilkan di samping judul dan teks isi.
Di kode Anda, Anda harus memberikan URL ke gambar yang ingin dimuat:
const title = 'Icon Notification';
const options = {
icon: '/images/demos/icon-512x512.png',
};
registration.showNotification(title, options);
Anda mendapatkan notifikasi ini di Chrome di Linux:
dan di Firefox di Linux:
Sayangnya tidak ada pedoman yang solid tentang ukuran gambar yang harus digunakan untuk ikon.
Android tampaknya menginginkan gambar 64 dp (yaitu kelipatan 64px dengan rasio piksel perangkat).
Dengan asumsi rasio {i>pixel<i} tertinggi untuk suatu perangkat adalah 3, ukuran ikon 192px atau lebih adalah aman.
Badge
badge
adalah ikon monokrom kecil yang digunakan untuk menggambarkan lebih banyak informasi ke
mengenai dari mana notifikasi berasal:
const title = 'Badge Notification';
const options = {
badge: '/images/demos/badge-128x128.png',
};
registration.showNotification(title, options);
Pada saat penulisan, badge hanya digunakan pada Chrome di Android.
Di browser lain (atau Chrome tanpa badge), Anda akan melihat ikon browser tersebut.
Seperti opsi icon
, tidak ada panduan nyata tentang ukuran yang harus digunakan.
Mempelajari panduan Android ukuran yang disarankan adalah 24 px dikalikan dengan rasio piksel perangkat.
Artinya, gambar berukuran 72 px atau lebih seharusnya bagus (dengan asumsi rasio piksel perangkat maksimal 3).
Gambar
Opsi image
dapat digunakan untuk menampilkan gambar yang lebih besar kepada pengguna. Hal ini sangat
berguna untuk menampilkan
gambar pratinjau kepada pengguna.
const title = 'Image Notification';
const options = {
image: '/images/demos/unsplash-farzad-nazifi-1600x1100.jpg',
};
registration.showNotification(title, options);
Di Chrome pada Linux, notifikasi akan terlihat seperti ini:
Di Chrome pada Android, pemangkasan dan rasionya berbeda:
Mengingat perbedaan rasio antara desktop dan seluler, sangat sulit untuk menyarankan kami.
Karena Chrome di desktop tidak mengisi ruang yang tersedia dan memiliki rasio 4:3, mungkin yang terbaik
adalah menyajikan gambar dengan rasio ini dan memungkinkan Android memangkas gambar. Meskipun demikian,
opsi image
mungkin masih berubah.
Di Android, satu-satunya panduan adalah lebar 450 dp.
Dengan menggunakan panduan ini, gambar dengan lebar 1.350 piksel atau lebih bagus untuk digunakan.
Tindakan (Tombol)
Anda dapat menentukan actions
untuk menampilkan tombol dengan notifikasi:
const title = 'Actions Notification';
const options = {
actions: [
{
action: 'coffee-action',
type: 'button',
title: 'Coffee',
icon: '/images/demos/action-1-128x128.png',
},
{
action: 'doughnut-action',
type: 'button',
title: 'Doughnut',
icon: '/images/demos/action-2-128x128.png',
},
{
action: 'gramophone-action',
type: 'button',
title: 'Gramophone',
icon: '/images/demos/action-3-128x128.png',
},
{
action: 'atom-action',
type: 'button',
title: 'Atom',
icon: '/images/demos/action-4-128x128.png',
},
],
};
registration.showNotification(title, options);
Untuk setiap tindakan, Anda dapat menentukan title
, action
(yang pada dasarnya adalah ID), icon
, dan
type
. Judul dan ikon adalah hal yang dapat Anda lihat di notifikasi. ID digunakan saat mendeteksi
tombol tindakan telah diklik (selengkapnya tentang hal ini di bagian berikutnya). Jenis
dapat dihilangkan karena 'button'
adalah nilai default.
Pada saat penulisan, hanya Chrome dan Opera untuk tindakan dukungan Android.
Dalam contoh di atas, terdapat empat tindakan yang didefinisikan untuk menggambarkan bahwa Anda dapat mendefinisikan lebih banyak tindakan daripada
akan ditampilkan. Jika Anda ingin mengetahui jumlah tindakan yang akan ditampilkan oleh {i>browser<i},
Anda dapat memeriksa window.Notification?.maxActions
:
const maxVisibleActions = window.Notification?.maxActions;
if (maxVisibleActions) {
options.body = `Up to ${maxVisibleActions} notification actions can be displayed.`;
} else {
options.body = 'Notification actions are not supported.';
}
Pada desktop, ikon tombol tindakan menampilkan warnanya (lihat donat merah muda):
Di Android 6 dan yang lebih lama, ikon diberi warna agar sesuai dengan skema warna sistem:
Di Android 7 dan yang lebih baru, ikon tindakan tidak ditampilkan sama sekali.
Chrome diharapkan akan mengubah perilakunya di desktop agar sesuai dengan Android (yaitu, menerapkan
skema warna yang sesuai agar ikon sesuai dengan tampilan dan nuansa sistem). Sementara itu, Anda
dapat mencocokkan warna teks Chrome dengan membuat ikon Anda berwarna #333333
.
Perlu juga disebutkan bahwa ikon terlihat jelas di Android, tetapi tidak di desktop.
Ukuran terbaik yang bisa saya kerjakan di Chrome desktop adalah 24px x 24px. Sayangnya, ini terlihat tidak pada tempatnya di Android.
Praktik terbaik yang dapat kita tarik dari perbedaan ini:
- Tetap berpegang pada skema warna yang konsisten untuk ikon Anda sehingga setidaknya semua ikon Anda yang ditampilkan kepada pengguna.
- Pastikan keduanya berfungsi dalam monokrom karena beberapa platform mungkin menampilkannya.
- Uji ukuran dan lihat mana yang cocok untuk Anda. 128 × 128 px berfungsi dengan baik di Android untuk saya, tetapi buruk berkualitas tinggi di {i>desktop<i}.
- Ikon tindakan Anda mungkin tidak ditampilkan sama sekali.
Spesifikasi Notifikasi sedang mengeksplorasi cara untuk menentukan beberapa ukuran ikon, tetapi sepertinya akan beberapa waktu sebelum apa pun disepakati.
Tindakan (Balasan Beruntun)
Anda dapat menambahkan balasan inline ke notifikasi dengan menentukan tindakan berjenis 'text'
:
const title = 'Alexey Rodionov';
const options = {
body: 'How are you doing? )',
image: '/images/demos/avatar-512x512.jpg',
icon: '/images/demos/icon-512x512.png',
badge: '/images/demos/badge-128x128.png',
actions: [
{
action: 'reply',
type: 'text',
title: 'Reply',
icon: '/images/demos/action-5-128x128.png',
}
],
};
registration.showNotification(title, options);
Tampilannya akan terlihat seperti ini di Android:
Mengklik tombol tindakan akan membuka kolom input teks:
Anda dapat menyesuaikan placeholder untuk kolom input teks:
const title = 'Alexey Rodionov';
const options = {
body: 'How are you doing? )',
icon: '/images/demos/avatar-512x512.jpg',
badge: '/images/demos/badge-128x128.png',
actions: [
{
action: 'reply',
type: 'text',
title: 'Reply',
icon: '/images/demos/action-5-128x128.png',
placeholder: 'Type text here',
}
],
};
registration.showNotification(title, options);
Di Chrome di Windows, kolom input teks selalu terlihat tanpa harus mengklik tindakan tombol:
Anda dapat menambahkan lebih dari satu balasan inline atau menggabungkan tombol dan balasan beruntun:
const title = 'Poll';
const options = {
body: 'Do you like this photo?',
image: '/images/demos/cat-image.jpg',
icon: '/images/demos/icon-512x512.png',
badge: '/images/demos/badge-128x128.png',
actions: [
{
action: 'yes',
type: 'button',
title: '👍 Yes',
},
{
action: 'no',
type: 'text',
title: '👎 No (explain why)',
placeholder: 'Type your explanation here',
},
],
};
registration.showNotification(title, options);
Arah
Parameter dir
memungkinkan Anda menentukan arah teks yang akan ditampilkan,
kanan-ke-kiri atau kiri-ke-kanan.
Dalam pengujian, sepertinya arahnya sebagian besar ditentukan oleh teks, bukan oleh . Sesuai dengan spesifikasinya, petunjuk ini dimaksudkan untuk memberi tahu browser cara mengatur opsi tata letak seperti tindakan, tapi saya tidak melihat perbedaan.
Mungkin yang terbaik adalah menentukan jika Anda bisa, jika tidak, {i>browser<i} harus melakukan hal yang benar sesuai dengan teks yang diberikan.
Parameter harus disetel ke auto
, ltr
, atau rtl
.
Bahasa yang ditulis dari kanan ke kiri yang digunakan di Chrome di Linux terlihat seperti ini:
Di Firefox (sambil mengarahkan kursor ke atasnya), Anda akan mendapatkan ini:
Getar
Opsi getar memungkinkan Anda untuk menentukan pola getaran yang akan dijalankan saat notifikasi ditampilkan, dengan asumsi setelan pengguna saat ini memungkinkan getaran (yaitu perangkat tidak ada mode senyap).
Format opsi getar harus berupa susunan angka yang menjelaskan jumlah dalam milidetik saat perangkat akan bergetar, diikuti dengan jumlah milidetik saat perangkat harus bergetar tidak bergetar.
const title = 'Vibrate Notification';
const options = {
// Star Wars shamelessly taken from the awesome Peter Beverloo
// https://tests.peter.sh/notification-generator/
vibrate: [
500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450, 110, 200, 110, 170,
40, 500,
],
};
registration.showNotification(title, options);
Ini hanya memengaruhi perangkat yang mendukung getaran.
Suara
Parameter suara memungkinkan Anda menetapkan suara yang akan diputar saat notifikasi diterima.
Pada saat penulisan ini, tidak ada browser yang mendukung opsi ini.
const title = 'Sound Notification';
const options = {
sound: '/demos/notification-examples/audio/notification-sound.mp3',
};
registration.showNotification(title, options);
Stempel waktu
Stempel waktu memungkinkan Anda memberi tahu platform waktu saat peristiwa terjadi yang menghasilkan push notifikasi yang dikirim.
timestamp
harus berupa jumlah milidetik sejak 00:00:00 UTC, yaitu 1 Januari 1970
(yaitu epoch UNIX).
const title = 'Timestamp Notification';
const options = {
body: 'Timestamp is set to "01 Jan 2000 00:00:00".',
timestamp: Date.parse('01 Jan 2000 00:00:00'),
};
registration.showNotification(title, options);
Praktik Terbaik UX
Kegagalan UX terbesar yang pernah saya alami dengan notifikasi adalah kurangnya kekhususan dalam informasi yang ditampilkan oleh notifikasi.
Anda harus mempertimbangkan mengapa Anda mengirim pesan {i>push<i} dan memastikan semua opsi notifikasi digunakan untuk membantu pengguna memahami mengapa mereka membaca notifikasi itu.
Sejujurnya, mudah melihat contoh dan berpikir "Saya tidak akan pernah melakukan kesalahan itu". Tapi lebih mudah jatuh ke dalam perangkap dari yang Anda pikirkan.
Beberapa kesalahan umum yang harus dihindari:
- Jangan tempatkan situs Anda di judul atau isi. Browser menyertakan domain Anda dalam notifikasi, jadi jangan menduplikasinya.
- Gunakan semua informasi yang Anda miliki. Jika Anda mengirim pesan {i>push<i} karena seseorang mengirim pesan ke pengguna, alih-alih menggunakan judul 'Pesan Baru' dan isi 'Klik di sini untuk membacanya.' gunakan judul 'John baru saja mengirim pesan baru' dan atur isi notifikasi menjadi dari pesan tersebut.
Deteksi browser dan fitur
Pada saat penulisan, ada perbedaan yang cukup besar antara Chrome dan Firefox dalam hal dukungan fitur untuk notifikasi.
Untungnya, Anda dapat mendeteksi dukungan untuk fitur notifikasi dengan melihat window.Notification
prototipe.
Katakanlah kita ingin tahu apakah notifikasi mendukung tombol tindakan, kita akan melakukan hal berikut:
if ('actions' in window.Notification?.prototype) {
// Action buttons are supported.
} else {
// Action buttons are NOT supported.
}
Dengan ini, kita dapat mengubah notifikasi yang ditampilkan kepada pengguna.
Dengan opsi lainnya, lakukan hal yang sama seperti di atas, dengan mengganti 'actions'
dengan
nama parameter.
Langkah berikutnya
- Ringkasan Notifikasi Push Web
- Cara Kerja Push
- Berlangganan Pengguna
- UX Izin
- Mengirim Pesan dengan Library Web Push
- Protokol Push Web
- Menangani Peristiwa Push
- Menampilkan Notifikasi
- Perilaku Notifikasi
- Pola Notifikasi Umum
- FAQ Notifikasi Push
- Masalah Umum dan Melaporkan Bug