Gunakan notifikasi push untuk berinteraksi dan melibatkan kembali pengguna

Kate Jeffreys

Mengapa menggunakan notifikasi push?

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

Tampilan dan nuansa notifikasi bervariasi di berbagai platform. Contoh:

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

Notifikasi push dapat membantu pengguna memanfaatkan aplikasi Anda secara maksimal dengan meminta mereka untuk membuka 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 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?

Manfaat sebenarnya dari notifikasi 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 untuk mengirim notifikasi saat hal itu sesuai untuk aplikasi Anda. Layanan push membuat URL unik untuk setiap pekerja layanan yang berlangganan. Mengirim pesan ke URL pekerja layanan akan memunculkan peristiwa di pekerja layanan tersebut, sehingga memintanya untuk menampilkan notifikasi.

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

Klien dan pekerja layanan menggunakan JavaScript standar tanpa library tambahan. Server dibangun 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

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');
```
Klien meminta izin dari pengguna untuk mengirim notifikasi.

Kode klien:
```
Notification.requestPermission();
```
Untuk mengaktifkan notifikasi push, pekerja layanan menggunakan PushManager.subscribe() untuk membuat langganan push. Dalam panggilan ke PushManager.subscribe(), pekerja layanan memberikan 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. Saat 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.

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

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

Notifikasi yang dikirim ke endpoint langganan memicu peristiwa push dengan pekerja layanan sebagai target. Service worker 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);
})

Pengguna berinteraksi dengan notifikasi, sehingga aplikasi web menjadi aktif jika belum aktif.

Langkah berikutnya

Sebagai langkah berikutnya, terapkan notifikasi push.

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