Gunakan notifikasi push untuk berinteraksi dan melibatkan kembali pengguna

Kate Jeffreys
Kate Jeffreys

Notifikasi menampilkan potongan kecil informasi kepada pengguna. Aplikasi web dapat menggunakan notifikasi untuk memberi tahu pengguna tentang peristiwa penting yang mendesak, atau tindakan yang perlu dilakukan pengguna.

Tampilan dan nuansa notifikasi bervariasi antar-platform. Contoh:

Notifikasi di perangkat Android.
Notifikasi di MacBook.

Secara tradisional, browser web harus memulai pertukaran informasi antara server dan klien dengan membuat permintaan. Di sisi lain, teknologi push web memungkinkan Anda mengonfigurasi server untuk mengirim notifikasi jika sesuai untuk aplikasi Anda. Layanan push membuat URL unik untuk setiap pekerja layanan yang berlangganan. Mengirim pesan ke URL pekerja layanan akan memicu peristiwa pada pekerja layanan tersebut, yang memintanya untuk menampilkan notifikasi.

Notifikasi push dapat membantu pengguna memanfaatkan aplikasi Anda secara maksimal dengan meminta mereka untuk membukanya kembali dan menggunakannya berdasarkan informasi terbaru.

Membuat dan mengirim notifikasi

Buat notifikasi menggunakan Notifications API. Objek Notification memiliki string title dan objek options. Contoh:

let title = 'Hi!';
let options
= {
  body
: 'Very Important Message',
 
/* other options can go here */
};
let notification
= new Notification(title, options);

title ditampilkan dengan tebal saat notifikasi aktif, sedangkan body berisi teks tambahan.

Mendapatkan izin untuk mengirim notifikasi

Untuk menampilkan notifikasi, aplikasi Anda harus mendapatkan izin dari pengguna untuk melakukannya:

Notification.requestPermission();

Bagaimana cara kerja notifikasi push?

Kekuatan sebenarnya dari notifikasi berasal dari kombinasi pekerja layanan dan teknologi push:

  • Worker layanan dapat berjalan di latar belakang dan menampilkan notifikasi meskipun aplikasi Anda tidak terlihat di layar.

  • Teknologi push memungkinkan Anda mengonfigurasi server untuk mengirim notifikasi jika sesuai untuk aplikasi Anda. Layanan push membuat URL unik untuk setiap pekerja layanan yang berlangganan. Mengirim pesan ke URL pekerja layanan akan memicu peristiwa pada pekerja layanan tersebut, yang memintanya untuk menampilkan notifikasi.

Dalam alur contoh berikut, klien mendaftarkan pekerja layanan dan berlangganan notifikasi push. Kemudian, server mengirimkan notifikasi ke endpoint langganan.

Pekerja layanan dan klien menggunakan JavaScript vanilla tanpa library tambahan. Server dibuat dengan paket npm express di Node.js, dan menggunakan paket npm web-push untuk mengirim notifikasi. Untuk mengirim informasi ke server, klien melakukan panggilan ke URL POST yang telah diekspos server.

Bagian 1: Mendaftarkan pekerja layanan dan berlangganan Push

  1. Aplikasi klien mendaftarkan pekerja layanan dengan ServiceWorkerContainer.register(). Pekerja layanan terdaftar akan terus berjalan di latar belakang saat klien tidak aktif.

    Kode klien:

    navigator.serviceWorker.register('sw.js');
  2. Klien meminta izin dari pengguna untuk mengirim notifikasi.

    Kode klien:

    Notification.requestPermission();
  3. Untuk mengaktifkan notifikasi push, pekerja layanan menggunakan PushManager.subscribe() untuk membuat langganan push. Dalam panggilan ke PushManager.subscribe(), pekerja layanan menyediakan kunci API aplikasi sebagai ID.

    Kode klien:

    navigator.serviceWorker.register('sw.js').then(sw => {
      sw
    .pushManager.subscribe({ /* API key */ });
    });

    Layanan push seperti Firebase Cloud Messaging beroperasi berdasarkan model langganan. Saat pekerja layanan berlangganan layanan push dengan memanggil PushManager.subscribe(), layanan push akan membuat URL yang unik untuk pekerja layanan tersebut. URL ini dikenal sebagai endpoint langganan.

  4. Klien mengirimkan endpoint langganan ke server aplikasi.

    Kode klien:

    navigator.serviceWorker.register('sw.js').then(sw => {
      sw
    .pushManager.subscribe({ /* API key */ }).then(subscription => {
        sendToServer
    (subscription, '/new-subscription', 'POST');
     
    });
    });

    Kode server:

    app.post('/new-subscription', (request, response) => {
     
    // extract subscription from request
     
    // send 'OK' response
    });

Bagian 2: Mengirim notifikasi

  1. Server web mengirimkan notifikasi ke endpoint langganan.

    Kode server:

    const webpush = require('web-push');

    let options
    = { /* config info for cloud messaging and API key */ };
    let subscription
    = { /* subscription created in Part 1*/ };
    let payload
    = { /* notification */ };

    webpush
    .sendNotification(subscription, payload, options);
  2. Notifikasi yang dikirim ke endpoint langganan akan memicu peristiwa push dengan pekerja layanan sebagai target. Pekerja layanan menerima pesan dan menampilkannya kepada pengguna sebagai notifikasi.

    Kode pekerja layanan:

    self.addEventListener('push', (event) => {
      let title
    = { /* get notification title from event data */ }
      let options
    = { /* get notification options from event data */ }
      showNotification
    (title, options);
    })
  3. Pengguna berinteraksi dengan notifikasi, sehingga aplikasi web menjadi aktif jika belum.

Langkah berikutnya

Sebagai langkah berikutnya, terapkan notifikasi push.

Kami telah membuat serangkaian codelab untuk memandu Anda melalui setiap langkah prosesnya.