Gunakan notifikasi push untuk berinteraksi dan melibatkan kembali pengguna

Kate Jeffreys
Kate Jeffreys

Notifikasi menampilkan potongan-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 di setiap platform. Contoh:

Notifikasi di perangkat Android.
Notifikasi di MacBook.

Biasanya, 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 saat sesuai untuk aplikasi Anda. Layanan push membuat URL unik untuk setiap pekerja layanan yang berlangganan. Mengirim pesan ke URL pekerja layanan akan memunculkan peristiwa pada pekerja layanan tersebut, yang memintanya untuk menampilkan notifikasi.

Notifikasi push dapat membantu pengguna mendapatkan hasil maksimal dari aplikasi Anda dengan meminta mereka untuk membuka kembali aplikasi 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 dalam huruf 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?

Keunggulan notifikasi yang sebenarnya berasal dari kombinasi pekerja layanan dan teknologi push:

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

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

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

Klien dan pekerja layanan menggunakan vanilla JavaScript 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 oleh server.

Bagian 1: Mendaftarkan pekerja layanan dan berlangganan Push

  1. Aplikasi klien mendaftarkan pekerja layanan dengan ServiceWorkerContainer.register(). Pekerja layanan yang 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 pada model langganan. Jika pekerja layanan berlangganan layanan push dengan memanggil PushManager.subscribe(), layanan push akan membuat URL 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 mengaktifkan 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, membuat aplikasi web aktif jika belum aktif.

Langkah berikutnya

Sebagai langkah berikutnya, terapkan notifikasi push.

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