Tindakan Notifikasi di Chrome 48

Paul Kinlan

Pada awal tahun 2015, kami memperkenalkan Pesan dan Notifikasi Push ke Chrome untuk Android dan Desktop. Ini adalah langkah maju yang luar biasa di web. Pengguna dapat mulai berinteraksi lebih dalam dengan pengalaman di web meskipun browser telah ditutup.

Meskipun Anda dapat mengirim pesan ini, satu-satunya hal yang dapat Anda lakukan dengan pesan tersebut 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 memungkinkan developer menentukan tindakan kontekstual yang dapat dipanggil dan berinteraksi dengan pengguna. Di Chrome 48, kami kini telah menambahkan kemampuan serupa ke Notifikasi Web di Desktop dan Chrome untuk Android.

Penambahan ke API cukup sederhana. Anda hanya perlu membuat Array tindakan dan menambahkannya ke objek NotificationOptions saat memanggil showNotification dari pendaftaran ServiceWorker (baik 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 sama sekali. Anda dapat menentukan apa yang didukung platform dengan memeriksa Notification.maxActions. Dalam contoh berikut, kami mengasumsikan 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, Anda tidak dapat menambahkan ikon ke tindakan secara langsung (belum), tetapi Anda dapat menggunakan Emoji dan kumpulan 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 pada suatu waktu di masa mendatang. Interaksi dengan notifikasi saat ini (mulai Chrome 48) berasal dari peristiwa notificationclick yang terdaftar di pekerja layanan Anda dan dapat berupa klik umum pada notifikasi atau ketukan tertentu pada salah satu tombol tindakan. Catatan tambahan, pada masa mendatang, Anda juga dapat meresponsnotificationclose.

Untuk memahami tindakan yang dilakukan pengguna, Anda perlu memeriksa properti action pada peristiwa, lalu Anda memiliki pilihan 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);

Yang menarik adalah tindakan tidak harus membuka jendela baru, tindakan dapat melakukan interaksi aplikasi umum tanpa membuat antarmuka pengguna. Misalnya, pengguna dapat "Menyukai" atau "Menghapus" postingan media sosial yang akan melakukan tindakan pada data lokal pengguna, lalu menyinkronkannya dengan cloud tanpa membuka UI (meskipun sebaiknya kirim pesan tentang perubahan data ke jendela yang terbuka agar 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 penggantian yang masuk akal ke tugas yang Anda harapkan dilakukan pengguna jika mereka hanya mengklik notifikasi.

Jika Anda ingin melihat cara kerjanya sekarang, lihat Notification Test Harness milik Peter Beverloo dan baca Spesifikasi notifikasi atau ikuti spesifikasi saat diperbarui.