Mengapa menggunakan notifikasi push?
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:
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
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 kePushManager.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.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 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);
})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.