Halaman ini diterjemahkan oleh Cloud Translation API.

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 yang mendesak, atau tindakan yang perlu dilakukan pengguna.

Tampilan dan nuansa notifikasi bervariasi di setiap 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 agar mengirim notifikasi jika memungkinkan 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 manfaat maksimal dari aplikasi Anda dengan meminta mereka untuk membuka kembali aplikasi dan menggunakannya berdasarkan informasi terbaru.

Membuat dan mengirim notifikasi

Membuat 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 cetak 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:

Pekerja layanan dapat berjalan di latar belakang dan menampilkan notifikasi meskipun aplikasi tidak terlihat di layar.
Teknologi push memungkinkan Anda mengonfigurasi server agar 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.

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

Klien dan pekerja layanan menggunakan JavaScript biasa 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 ke Push

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');
```
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 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 ke layanan push dengan memanggil PushManager.subscribe(), layanan push akan membuat URL yang unik untuk pekerja layanan tersebut. URL 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 akan mengaktifkan peristiwa push dengan pekerja layanan sebagai target. Pekerja layanan akan 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 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 prosesnya.