Tindakan Notifikasi di Chrome 48

Di awal tahun 2015, kami memperkenalkan Pesan dan Notifikasi Push di Chrome untuk Android dan Desktop. Ini adalah langkah maju yang besar di web. Pengguna dapat mulai berinteraksi lebih mendalam dengan pengalaman di web bahkan saat browser ditutup.

Meskipun mengirim pesan ini adalah hal yang bagus, satu-satunya hal yang dapat Anda lakukan dengan pesan ini adalah mengkliknya dan membuka halaman atau menutupnya sepenuhnya.

Jika Anda melihat notifikasi yang disediakan secara native untuk aplikasi di platform seluler seperti iOS dan Android, setiap notifikasi tersebut memungkinkan developer menentukan tindakan kontekstual yang dapat dipanggil dan berinteraksi dengan pengguna. Di Chrome 48, kami kini telah menambahkan kemampuan yang serupa dengan Notifikasi Web di Desktop dan Chrome untuk Android.

Screenshot notifikasi

Penambahan ke API ini cukup sederhana. Anda hanya perlu membuat Array tindakan dan menambahkannya ke dalam objek NotificationOptions saat memanggil showNotification dari pendaftaran ServiceWorker (secara langsung di ServiceWorker atau di halaman melalui navigator.serviceWorker.ready).

Saat ini Chrome hanya mendukung dua tindakan pada setiap notifikasi. Beberapa platform mungkin dapat mendukung lebih banyak, dan beberapa platform mungkin mendukung lebih sedikit atau tidak mendukung sama sekali. Anda dapat menentukan apa yang didukung platform dengan memeriksa Notification.maxActions. Pada contoh berikut, kami berasumsi bahwa platform mendukung dua tindakan.

self.registration.showNotification('New message from Alice', {
  actions: [
    {action: 'like', title: 'Like'},
    {action: 'reply', title: 'Reply'}]
});

Tindakan ini akan membuat notifikasi sederhana dengan dua tombol. Perhatikan bahwa Anda tidak dapat menambahkan ikon ke tindakan secara langsung (belum), tetapi Anda dapat menggunakan Emoji dan himpunan karakter Unicode yang diperluas untuk menambahkan lebih banyak konteks ke tombol notifikasi.

Contoh:

self.registration.showNotification("New message from Alice", {
  actions: [
    {action: 'like', title: '👍Like'},
    {action: 'reply', title: '⤻ Reply'}]
});

Setelah Anda membuat notifikasi dan membuatnya terlihat 😻, pengguna dapat berinteraksi dengan notifikasi tersebut di masa mendatang. Semua interaksi dengan notifikasi saat ini (mulai Chrome 48) terjadi melalui peristiwa notificationclick yang terdaftar di pekerja layanan Anda, dan dapat berupa klik umum pada notifikasi atau ketukan tertentu pada salah satu tombol tindakan. Sebagai catatan, di masa mendatang Anda juga akan dapat merespons peristiwanotificationclose.

Untuk memahami tindakan mana yang dilakukan pengguna, Anda perlu memeriksa properti action pada peristiwa tersebut, lalu Anda dapat memilih untuk membuka halaman baru bagi pengguna untuk menyelesaikan tindakan atau melakukan tugas di latar belakang.

self.addEventListener('notificationclick', function(event) {
  var messageId = event.notification.data;

  event.notification.close();

  if (event.action === 'like') {
    silentlyLikeItem();
  }
  else if (event.action === 'reply') {
    clients.openWindow("/messages?reply=" + messageId);
  }
  else {
    clients.openWindow("/messages?reply=" + messageId);
  }
}, false);

Menariknya, tindakan ini tidak perlu membuka jendela baru, tetapi dapat melakukan interaksi aplikasi umum tanpa membuat antarmuka pengguna. Misalnya, pengguna dapat memberi tanda "Menyukai" atau "Menghapus" postingan media sosial yang akan melakukan tindakan pada data lokal pengguna, lalu menyinkronkannya dengan cloud tanpa membuka UI (meskipun praktik yang baik adalah mengirim pesan perubahan data ke jendela yang terbuka sehingga UI dapat diperbarui). Untuk tindakan yang memerlukan interaksi pengguna, Anda akan membuka jendela bagi pengguna untuk membalas.

Karena platform tidak akan mendukung jumlah tindakan yang sama, atau dalam beberapa kasus tidak dapat mendukung tombol Tindakan Notifikasi sama sekali, Anda harus memastikan bahwa Anda selalu memberikan fallback yang logis untuk tugas yang Anda harapkan akan dilakukan pengguna jika mereka hanya mengklik notifikasi.

Jika Anda ingin melihat penerapannya sekarang, lihat Notification Test Harne dari Peter Beverloo dan baca Spesifikasi notifikasi atau ikuti spesifikasinya saat diperbarui.