Codelab ini menunjukkan cara membuat klien notifikasi push langkah demi langkah. Di akhir codelab, Anda akan memiliki klien yang:
- Membuat pengguna berlangganan notifikasi push.
- Menerima pesan push dan menampilkannya sebagai notifikasi.
- Menghentikan langganan pengguna dari notifikasi push.
Codelab ini berfokus untuk membantu Anda belajar sambil melakukan dan tidak banyak membahas konsep. Lihat Bagaimana cara kerja notifikasi push? untuk mempelajari konsep notifikasi push.
Kode server codelab ini sudah selesai. Anda hanya akan mengimplementasikan klien dalam codelab ini. Untuk mempelajari cara mengimplementasikan server notifikasi push, lihat Codelab: Membangun server notifikasi push.
Lihat push-notifications-client-codelab-complete (sumber) untuk melihat kode lengkap.
Kompatibilitas browser
Codelab ini diketahui berfungsi dengan kombinasi sistem operasi dan browser berikut:
- Windows: Chrome, Edge
- macOS: Chrome, Firefox
- Android: Chrome, Firefox
Codelab ini diketahui tidak berfungsi dengan sistem operasi berikut (atau kombinasi sistem operasi dan browser):
- macOS: Brave, Edge, Safari
- iOS
Penyiapan
Mendapatkan salinan kode yang dapat diedit
Editor kode yang Anda lihat di sebelah kanan petunjuk ini akan disebut UI Glitch di seluruh codelab ini.
- Klik Remix to Edit agar project dapat diedit.
Menyiapkan autentikasi
Agar notifikasi push dapat berfungsi, Anda harus menyiapkan server dan klien dengan kunci autentikasi. Lihat Menandatangani permintaan protokol push web untuk mempelajari alasannya.
- Di UI Glitch, klik Tools lalu klik Terminal untuk membuka Glitch Terminal.
- Di Glitch Terminal, jalankan
npx web-push generate-vapid-keys
. Salin kunci pribadi dan nilai kunci publik. - Di UI Glitch, buka
.env
lalu updateVAPID_PUBLIC_KEY
danVAPID_PRIVATE_KEY
. SetelVAPID_SUBJECT
kemailto:test@test.test
. Semua nilai ini harus digabungkan dalam tanda kutip ganda. Setelah melakukan pembaruan, file.env
Anda akan terlihat mirip ini:
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
- Tutup Glitch Terminal.
- Buka
public/index.js
. - Ganti
VAPID_PUBLIC_KEY_VALUE_HERE
dengan nilai kunci publik Anda.
Mendaftarkan pekerja layanan
Klien Anda pada akhirnya akan memerlukan pekerja layanan untuk menerima dan menampilkan notifikasi. Sebaiknya daftarkan pekerja layanan sedini mungkin. Lihat Menerima dan menampilkan pesan yang dikirim sebagai notifikasi untuk mengetahui konteks selengkapnya.
- Ganti komentar
// TODO add startup logic here
dengan kode berikut:
// TODO add startup logic here
if ('serviceWorker' in navigator && 'PushManager' in window) {
navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {
console.info('Service worker was registered.');
console.info({serviceWorkerRegistration});
}).catch(error => {
console.error('An error occurred while registering the service worker.');
console.error(error);
});
subscribeButton.disabled = false;
} else {
console.error('Browser does not support service workers or push messages.');
}
subscribeButton.addEventListener('click', subscribeButtonHandler);
unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);
- Untuk melihat pratinjau situs, tekan View App, lalu tekan Fullscreen .
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Konsol. Anda akan melihat pesan
Service worker was registered.
yang dicatat dalam log ke Konsol.
Meminta izin notifikasi push
Anda tidak boleh meminta izin untuk mengirim notifikasi push saat halaman dimuat. Sebaliknya, UI Anda harus bertanya kepada pengguna apakah mereka ingin menerima notifikasi push. Setelah mereka mengonfirmasi secara eksplisit (misalnya dengan mengklik tombol), Anda dapat memulai proses formal untuk mendapatkan izin notifikasi push dari browser.
- Di UI Glitch, klik View Source untuk kembali ke kode Anda.
- Di
public/index.js
, ganti komentar// TODO
disubscribeButtonHandler()
dengan kode berikut:
// TODO
// Prevent the user from clicking the subscribe button multiple times.
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
console.error('The user explicitly denied the permission request.');
return;
}
if (result === 'granted') {
console.info('The user accepted the permission request.');
}
- Kembali ke tab aplikasi dan klik Berlangganan push. Browser atau sistem operasi mungkin akan menanyakan apakah Anda ingin mengizinkan situs mengirimkan notifikasi push. Klik Allow (atau frasa setara apa pun yang digunakan browser/OS Anda). Di Konsol, Anda akan melihat pesan yang menunjukkan apakah permintaan telah diterima atau ditolak.
Berlangganan notifikasi push
Proses langganan melibatkan interaksi dengan layanan web yang dikontrol oleh vendor browser yang disebut layanan push. Setelah mendapatkan informasi langganan notifikasi push, Anda harus mengirimkannya ke server dan meminta server menyimpannya dalam database untuk jangka panjang. Lihat Membuat klien berlangganan notifikasi push untuk mengetahui konteks selengkapnya tentang proses langganan.
- Tambahkan kode yang ditandai berikut ke
subscribeButtonHandler()
:
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
console.error('The user explicitly denied the permission request.');
return;
}
if (result === 'granted') {
console.info('The user accepted the permission request.');
}
const registration = await navigator.serviceWorker.getRegistration();
const subscribed = await registration.pushManager.getSubscription();
if (subscribed) {
console.info('User is already subscribed.');
notifyMeButton.disabled = false;
unsubscribeButton.disabled = false;
return;
}
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
});
notifyMeButton.disabled = false;
fetch('/add-subscription', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(subscription)
});
Opsi userVisibleOnly
harus true
. Suatu hari mungkin Anda dapat
mengirim pesan tanpa menampilkan notifikasi yang terlihat oleh pengguna
(push senyap), tetapi saat ini browser tidak mengizinkan kemampuan tersebut
karena masalah privasi.
Nilai applicationServerKey
bergantung pada fungsi utilitas yang
mengonversi string base64 menjadi Uint8Array. Nilai ini digunakan untuk
autentikasi antara server Anda dan layanan push.
Berhenti berlangganan notifikasi push
Setelah pengguna berlangganan notifikasi push, UI Anda harus menyediakan cara untuk berhenti berlangganan jika pengguna berubah pikiran dan tidak ingin lagi menerima notifikasi push.
- Ganti komentar
// TODO
diunsubscribeButtonHandler()
dengan kode berikut:
// TODO
const registration = await navigator.serviceWorker.getRegistration();
const subscription = await registration.pushManager.getSubscription();
fetch('/remove-subscription', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({endpoint: subscription.endpoint})
});
const unsubscribed = await subscription.unsubscribe();
if (unsubscribed) {
console.info('Successfully unsubscribed from push notifications.');
unsubscribeButton.disabled = true;
subscribeButton.disabled = false;
notifyMeButton.disabled = true;
}
Menerima pesan push dan menampilkannya sebagai notifikasi
Seperti yang disebutkan sebelumnya, Anda memerlukan pekerja layanan untuk menangani penerimaan dan tampilan pesan yang dikirim ke klien dari server Anda. Lihat Menerima dan menampilkan pesan yang dikirim sebagai notifikasi untuk mengetahui detail selengkapnya.
- Buka
public/service-worker.js
dan ganti komentar// TODO
di pengendali peristiwapush
pekerja layanan dengan kode berikut:
// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
body: data.options.body,
icon: image
}
self.registration.showNotification(
data.title,
options
);
- Kembali ke tab aplikasi.
- Klik Beri tahu saya. Anda akan menerima notifikasi push.
- Coba buka URL tab aplikasi Anda di browser lain (atau bahkan perangkat lain), dengan memeriksa alur kerja langganan, lalu klik Beri tahu semua. Anda akan menerima notifikasi push yang sama di semua browser langganan Anda. Lihat kembali Kompatibilitas browser untuk melihat daftar kombinasi browser/OS yang diketahui berfungsi atau tidak berfungsi.
Anda dapat menyesuaikan notifikasi dalam banyak cara. Lihat parameter ServiceWorkerRegistration.showNotification()
untuk mempelajari lebih lanjut.
Membuka URL saat pengguna mengklik notifikasi
Dalam dunia nyata, Anda mungkin akan menggunakan notifikasi sebagai cara untuk melibatkan kembali pengguna dan mendorong mereka agar mengunjungi situs Anda. Untuk melakukannya, Anda perlu sedikit mengonfigurasi pekerja layanan Anda.
- Ganti komentar
// TODO
dalam pengendali peristiwanotificationclick
pekerja layanan dengan kode berikut:
// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));
- Kembali ke tab aplikasi, kirim notifikasi lain kepada diri sendiri, lalu
klik notifikasi tersebut. Browser Anda akan membuka tab baru dan memuat
https://web.dev
.
Langkah berikutnya
- Lihat
ServiceWorkerRegistration.showNotification()
untuk menemukan semua cara menyesuaikan notifikasi. - Baca Ringkasan notifikasi push untuk pemahaman konseptual yang lebih mendalam tentang cara kerja notifikasi push.
- Lihat Codelab: Membangun server notifikasi push untuk mempelajari cara membangun server yang mengelola langganan dan mengirim permintaan protokol push web.
- Coba Pembuat Notifikasi untuk menguji semua cara menyesuaikan notifikasi.