Menampilkan notifikasi

Alexey Rodionov

Matt Gaunt

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

Anda dapat mencoba berbagai opsi notifikasi di berbagai browser di berbagai platform menggunakan Notification Generator Peter Beverloo.

Opsi visual

API untuk menampilkan notifikasi sangat sederhana:

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

Kedua argumen, title dan options, bersifat opsional.

Judulnya adalah 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

Berikut adalah tampilan notifikasi tanpa judul dan opsi di Chrome pada Windows:

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

Jika aplikasi web progresif diinstal di perangkat, nama aplikasi web akan digunakan, 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 akan mendapatkan notifikasi ini di Chrome di Linux:

Di Firefox pada Linux, tampilannya akan terlihat seperti ini:

Berikut tampilan notifikasi dengan banyak teks di judul dan isi di Chrome di Linux:

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

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

Seperti yang Anda lihat, notifikasi yang sama mungkin terlihat berbeda di browser yang berbeda. Tampilannya juga mungkin terlihat berbeda di browser yang sama pada platform yang berbeda.

Chrome dan Firefox menggunakan notifikasi sistem dan pusat notifikasi di platform yang menyediakan fitur ini.

Misalnya, notifikasi sistem di macOS tidak mendukung gambar 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.

Dalam kode, 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 akan mendapatkan notifikasi ini di Chrome di Linux:

dan di Firefox di Linux:

Sayangnya, tidak ada panduan pasti untuk ukuran gambar yang akan digunakan untuk ikon.

Android tampaknya menginginkan gambar 64 dp (yaitu 64 px dikalikan dengan rasio piksel perangkat).

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

Catatan: Beberapa browser mungkin mengharuskan gambar ditayangkan melalui HTTPS. Perhatikan hal ini jika Anda ingin menggunakan image pihak ketiga.

Badge

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

const title = 'Badge Notification';

const options = {
  badge: '/images/demos/badge-128x128.png',
};

registration.showNotification(title, options);

Saat artikel ini ditulis, badge hanya digunakan di Chrome di Android.

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

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

Berdasarkan panduan Android, ukuran yang direkomendasikan adalah 24 piksel dikalikan dengan rasio piksel perangkat.

Artinya, gambar berukuran 72 px atau lebih akan terlihat bagus (dengan asumsi rasio piksel perangkat maksimum adalah 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 pedoman.

Karena Chrome di desktop tidak mengisi ruang yang tersedia dan memiliki rasio 4:3, mungkin pendekatan terbaiknya adalah menayangkan gambar dengan rasio ini dan mengizinkan 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 akan menjadi pilihan yang baik.

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 ini digunakan saat mendeteksi bahwa tombol tindakan telah diklik (selengkapnya tentang hal ini di bagian berikutnya). Jenisnya dapat dihilangkan karena 'button' adalah nilai default.

Saat artikel ini ditulis, hanya Chrome dan Opera untuk Android yang mendukung tindakan.

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.';
}

Di desktop, ikon tombol tindakan menampilkan warnanya (lihat donat merah muda):

Di Android 6 dan yang lebih lama, ikon diwarnai 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 untuk membuat ikon sesuai dengan tampilan dan nuansa sistem). Sementara itu, Anda dapat mencocokkan warna teks Chrome dengan membuat ikon Anda memiliki warna #333333.

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

Ukuran terbaik yang dapat saya gunakan di Chrome desktop adalah 24 px x 24 px. Sayangnya, hal ini terlihat tidak pada tempatnya di Android.

Praktik terbaik yang dapat kita ambil dari perbedaan ini:

• Gunakan skema warna yang konsisten untuk ikon Anda sehingga setidaknya semua ikon ditampilkan secara konsisten kepada pengguna.
• Pastikan ikon tersebut berfungsi dalam monokrom karena beberapa platform mungkin menampilkannya dengan cara tersebut.
• Uji ukurannya dan lihat mana yang sesuai untuk Anda. 128 px × 128 px berfungsi dengan baik di Android, tetapi kualitasnya buruk di desktop.
• Ikon tindakan Anda tidak akan ditampilkan sama sekali.

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

Tindakan (balasan inline)

Anda dapat menambahkan balasan inline ke notifikasi dengan menentukan tindakan dengan 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);

Berikut tampilannya 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 pada Windows, kolom input teks selalu terlihat tanpa harus mengklik tombol tindakan:

Anda dapat menambahkan lebih dari satu balasan inline atau menggabungkan tombol dan balasan inline:

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 tampilan teks, dari kanan ke kiri atau dari kiri ke kanan.

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

Sebaiknya tentukan jika Anda bisa, jika tidak, browser akan melakukan hal yang benar sesuai dengan teks yang diberikan.

Parameter harus ditetapkan ke auto, ltr, atau rtl.

Bahasa yang penulisannya dari kanan ke kiri yang digunakan di Chrome di Linux terlihat seperti ini:

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

Getar

Perhatian: Dukungan untuk vibrate tidak digunakan lagi di Android 8 dan yang lebih baru.

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

Format opsi getar harus berupa array angka yang menjelaskan jumlah milidetik 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.

Suara

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

Saat artikel ini ditulis, belum 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 terjadinya peristiwa yang menyebabkan 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 terkait notifikasi adalah kurangnya spesifikasi dalam informasi yang ditampilkan oleh notifikasi.

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

Sejujurnya, mudah untuk melihat contoh dan berpikir "Saya tidak akan pernah membuat kesalahan itu". Namun, Anda mungkin lebih mudah terjebak dalam perangkap tersebut daripada yang Anda kira.

Beberapa kesalahan umum yang harus dihindari:

• Jangan cantumkan 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 push karena seseorang mengirim pesan kepada pengguna, daripada menggunakan judul 'Pesan Baru' dan isi 'Klik di sini untuk membacanya', gunakan judul 'John baru saja mengirim pesan baru' dan tetapkan isi notifikasi ke bagian pesan.

Browser dan deteksi 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 prototipe window.Notification.

Misalnya, 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 dapat mengubah notifikasi yang ditampilkan kepada pengguna.

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

Langkah berikutnya

• Ringkasan Notifikasi Push Web
• Cara Kerja Push
• Mendaftarkan 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

Codelab

• Membangun klien notifikasi push
• Membangun server notifikasi push