Menampilkan Notifikasi

Opsi notifikasi dibagi menjadi dua bagian, satu yang berkaitan dengan aspek visual (bagian ini) dan satu lagi yang menjelaskan aspek perilaku notifikasi (bagian berikutnya).

Anda dapat bermain-main dengan berbagai opsi notifikasi di berbagai browser di berbagai platform menggunakan Notification Generator Peter Beverloo.

Opsi Visual

API untuk menampilkan notifikasi cukup sederhana:

<ServiceWorkerRegistration>.showNotification(<title>, <options>);

Argumen, title dan options bersifat opsional.

Judul 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:

Membedah UI Notifikasi.

Opsi judul dan isi

Seperti inilah tampilan notifikasi tanpa judul dan opsi di Chrome pada Windows:

Notifikasi tanpa judul dan opsi di Chrome di Windows.

Seperti yang dapat Anda lihat, nama browser digunakan sebagai judul, sedangkan placeholder "Notifikasi baru" digunakan sebagai isi notifikasi.

Jika progressive web application diinstal di perangkat, nama aplikasi web akan digunakan, bukan nama browser:

Notifikasi dengan nama aplikasi web, bukan 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 mendapatkan notifikasi ini di Chrome di Linux:

Notifikasi dengan judul dan teks isi di Chrome di Linux.

Di Firefox pada Linux akan terlihat seperti ini:

Notifikasi dengan judul dan teks isi di Firefox di Linux.

Seperti inilah tampilan notifikasi dengan banyak teks dalam judul dan isi di Chrome pada Linux:

Notifikasi dengan judul panjang dan teks isi di Chrome di Linux.

Firefox di Linux menciutkan teks isi hingga Anda mengarahkan kursor ke notifikasi, sehingga menyebabkan notifikasi meluas:

Notifikasi dengan judul dan teks isi yang panjang di Firefox di Linux.

Notifikasi dengan judul panjang dan teks isi di Firefox di Linux sambil mengarahkan kursor ke notifikasi dengan kursor mouse.

Notifikasi yang sama di Firefox pada Windows akan terlihat seperti ini:

Notifikasi dengan judul dan teks isi di Firefox di Windows.

Notifikasi dengan judul dan teks isi yang panjang di Firefox pada Windows.

Seperti yang Anda lihat, notifikasi yang sama mungkin terlihat berbeda di browser yang berbeda. Selain itu, antarmuka ini mungkin terlihat berbeda di browser yang sama pada platform yang berbeda.

Chrome dan Firefox menggunakan notifikasi sistem dan pusat notifikasi di platform tempat hal tersebut tersedia.

Misalnya, notifikasi sistem di macOS tidak mendukung image dan tindakan (tombol dan balasan inline).

Chrome juga memiliki notifikasi kustom untuk semua platform desktop. Anda dapat mengaktifkannya dengan menetapkan flag 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 harus memberikan URL ke gambar yang ingin Anda muat:

const title = 'Icon Notification';

const options = {
  icon: '/images/demos/icon-512x512.png',
};

registration.showNotification(title, options);

Anda akan mendapatkan notifikasi ini di Chrome di Linux:

Notifikasi dengan ikon di Chrome di Linux.

dan di Firefox di Linux:

Notifikasi dengan ikon di Firefox di Linux.

Sayangnya tidak ada pedoman yang pasti tentang ukuran gambar yang harus digunakan untuk sebuah ikon.

Android tampaknya menginginkan gambar 64 dp (yang merupakan kelipatan 64 px dengan rasio piksel perangkat).

Dengan asumsi rasio piksel tertinggi untuk perangkat adalah 3, ukuran ikon 192 piksel atau lebih merupakan pilihan yang aman.

Badge

badge adalah ikon monokrom kecil yang digunakan untuk menggambarkan lebih banyak informasi kepada pengguna tentang asal notifikasi:

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.

Notifikasi dengan badge di Chrome pada Android.

Di browser lain (atau Chrome tanpa badge), Anda akan melihat ikon browser.

Notifikasi dengan badge di Firefox pada Android.

Seperti halnya opsi icon, tidak ada panduan nyata tentang ukuran yang harus digunakan.

Mempelajari pedoman Android ukuran yang direkomendasikan adalah 24 piksel dikalikan dengan rasio piksel perangkat.

Artinya, gambar berukuran 72 piksel atau lebih seharusnya bagus (dengan asumsi rasio piksel perangkat maksimum sebesar 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 di Linux, notifikasi akan terlihat seperti ini:

Notifikasi dengan gambar di Chrome di Linux.

Di Chrome pada Android, pemangkasan dan rasionya berbeda:

Notifikasi dengan gambar di Chrome pada Android.

Mengingat perbedaan rasio antara desktop dan seluler, sangat sulit untuk menyarankan pedoman.

Karena Chrome di desktop tidak mengisi ruang yang tersedia dan memiliki rasio 4:3, mungkin pendekatan terbaiknya adalah menampilkan 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, sebaiknya gunakan gambar dengan lebar 1350 piksel atau lebih.

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 informasi yang dapat Anda lihat dalam notifikasi. ID ini digunakan saat mendeteksi bahwa tombol tindakan telah diklik (informasi selengkapnya tentang hal ini di bagian berikutnya). Jenis ini dapat dihilangkan karena 'button' adalah nilai default.

Pada saat penulisan ini, hanya tindakan dukungan Chrome dan Opera untuk Android.

Pada contoh di atas, ada empat tindakan yang ditentukan untuk menggambarkan bahwa Anda dapat menentukan lebih banyak tindakan daripada yang akan ditampilkan. Jika ingin mengetahui jumlah tindakan yang akan ditampilkan oleh browser, 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):

Notifikasi dengan tombol tindakan pada Chrome di Linux.

Di Android 6 dan yang lebih lama, ikon diberi warna agar sesuai dengan skema warna sistem:

Notifikasi dengan tombol tindakan di Chrome untuk Android.

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 untuk membuat ikon cocok dengan tampilan dan nuansa sistem). Sementara itu, Anda dapat mencocokkan warna teks Chrome dengan membuat ikon memiliki warna #333333.

Perlu juga disebutkan bahwa ikon terlihat jelas di Android, tetapi tidak di desktop.

Ukuran terbaik yang bisa saya dapatkan untuk bekerja di Chrome desktop adalah 24px x 24px. Sayangnya, ini tampak tidak tempat di Android.

Praktik terbaik yang bisa kita tarik dari perbedaan ini:

  • Tetap berpegang pada skema warna yang konsisten untuk ikon Anda sehingga setidaknya semua ikon Anda ditampilkan secara konsisten kepada pengguna.
  • Pastikan tombol tersebut berfungsi dalam warna monokrom karena beberapa platform mungkin menampilkannya seperti itu.
  • Uji ukuran dan lihat mana yang cocok untuk Anda. 128 px × 128 px berfungsi dengan baik di Android untuk saya, tetapi kualitasnya buruk di desktop.
  • Ikon tindakan Anda mungkin tidak ditampilkan sama sekali.

Spesifikasi Notifikasi sedang mempelajari cara untuk menentukan beberapa ukuran ikon, tetapi sepertinya akan diperlukan waktu sebelum ada kesepakatan.

Tindakan (Balasan Beruntun)

Anda dapat menambahkan balasan inline ke notifikasi dengan menentukan tindakan menggunakan jenis '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:

Notifikasi di Android dengan tombol tindakan balas.

Mengklik tombol tindakan akan membuka kolom input teks:

Notifikasi di Android dengan kolom input teks yang terbuka.

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);

Notifikasi di Android dengan placeholder yang disesuaikan untuk kolom input teks.

Di Chrome di Windows, kolom input teks selalu terlihat tanpa harus mengklik tombol tindakan:

Notifikasi di Windows dengan kolom input teks dan tombol tindakan balas.

Anda dapat menambahkan lebih dari satu balasan beruntun 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);

Notifikasi di Windows dengan kolom input teks dan dua tombol tindakan.

Arah

Parameter dir memungkinkan Anda menentukan arah tampilan teks, kanan-ke-kiri atau kiri-ke-kanan.

Dalam pengujian, tampaknya arah sebagian besar ditentukan oleh teks, bukan parameter ini. Menurut spesifikasi, ini dimaksudkan untuk menyarankan kepada browser cara menata tata letak opsi seperti tindakan, tetapi saya tidak melihat perbedaannya.

Mungkin sebaiknya tentukan jika Anda bisa, jika tidak, browser harus melakukan hal yang benar sesuai dengan teks yang disediakan.

Parameter harus disetel ke auto, ltr, atau rtl.

Bahasa yang ditulis dari kanan ke kiri pada Chrome di Linux akan terlihat seperti ini:

Notifikasi dengan bahasa yang ditulis dari kanan-ke-kiri pada Chrome di Linux.

Di Firefox (sambil mengarahkan kursor ke atasnya), Anda akan mendapatkan ini:

Notifikasi dengan bahasa kanan-ke-kiri di Firefox di Linux.

Bergetar

Opsi getar memungkinkan Anda menentukan pola getaran yang akan berjalan saat notifikasi ditampilkan, dengan asumsi setelan pengguna saat ini memungkinkan getaran (yaitu perangkat tidak dalam mode senyap).

Format opsi getar harus berupa array angka yang menjelaskan jumlah milidetik saat perangkat harus bergetar, diikuti dengan jumlah milidetik perangkat tidak boleh 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);

Hal ini hanya memengaruhi perangkat yang mendukung getaran.

Audio

Parameter suara memungkinkan Anda menetapkan suara yang akan diputar saat notifikasi diterima.

Pada saat ini ditulis, 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 mengakibatkan notifikasi push dikirim.

timestamp harus berupa jumlah milidetik sejak 00:00:00 UTC, yaitu 1 Januari 1970 (yang merupakan 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 lihat pada notifikasi adalah kurangnya kekhususan dalam informasi yang ditampilkan oleh notifikasi.

Anda harus mempertimbangkan alasan Anda mengirim pesan push tersebut dan pastikan semua opsi notifikasi digunakan untuk membantu pengguna memahami mengapa mereka membaca notifikasi tersebut.

Sejujurnya, saya mudah melihat contoh dan berpikir "Saya tidak akan pernah melakukan kesalahan itu". Tapi, lebih mudah jatuh ke dalam jebakan itu dari yang mungkin Anda pikirkan.

Beberapa kesalahan umum yang harus dihindari:

  • Jangan menempatkan situs Anda di bagian judul atau isi. Browser akan menyertakan domain Anda dalam notifikasi, jadi jangan menduplikasinya.
  • Gunakan semua informasi yang tersedia. Jika Anda mengirim pesan push karena seseorang mengirim pesan kepada pengguna, bukan menggunakan judul 'Pesan Baru' dan isi 'Klik di sini untuk membacanya.' gunakan judul 'John baru saja mengirim pesan baru' dan atur isi notifikasi ke bagian pesan.

Browser dan deteksi fitur

Pada saat penulisan ini, 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 prototipe window.Notification.

Katakanlah kita ingin mengetahui 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 bisa mengubah notifikasi yang ditampilkan kepada pengguna.

Dengan opsi lainnya, cukup lakukan hal yang sama seperti di atas, dengan mengganti 'actions' dengan nama parameter yang diinginkan.

Langkah berikutnya

Lab kode