Halaman ini diterjemahkan oleh Cloud Translation API.

Menampilkan Notifikasi

Alexey Rodionov

Matt Gaunt

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:

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

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

Notifikasi dengan judul dan teks isi di Chrome pada Linux.

Pada Firefox di Linux, kodenya akan terlihat seperti ini:

Notifikasi dengan judul dan teks isi di Firefox pada Linux.

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

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

Firefox di Linux menciutkan teks isi sampai Anda mengarahkan kursor notifikasi, yang menyebabkan notifikasi untuk memperluas:

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

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

Notifikasi yang sama di Firefox pada Windows terlihat seperti ini:

Notifikasi dengan judul dan teks isi di Firefox pada 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. 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:

Notifikasi dengan gambar di Chrome pada 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 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):

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

Notifikasi di Android dengan tombol tindakan balasan.

Mengklik tombol tindakan akan membuka kolom input teks:

Notifikasi di Android dengan kolom input teks 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 tindakan tombol:

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

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

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

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:

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

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

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

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.