Dalam codelab ini, Anda akan menggunakan pekerja layanan untuk mengelola notifikasi. Petunjuk di sini mengasumsikan bahwa Anda sudah memahami pekerja layanan dan dasar-dasar meminta izin notifikasi serta mengirim notifikasi. Jika Anda memerlukan pengingat tentang notifikasi, lihat codelab Memulai Notifications API. Untuk mempelajari pekerja layanan lebih lanjut, lihat Pengantar pekerja layanan dari Matt Gaunt.
Membuat remix aplikasi contoh dan melihatnya di tab baru
Notifikasi otomatis diblokir dari aplikasi Glitch yang disematkan, sehingga Anda tidak akan dapat melihat pratinjau aplikasi di halaman ini. Sebagai gantinya, berikut hal yang harus dilakukan:
- Klik Remix to Edit untuk membuat project dapat diedit.
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh .
Glitch akan terbuka di tab Chrome baru.
Saat Anda mengerjakan codelab ini, buat perubahan pada kode di Glitch tersemat di halaman ini. Muat ulang tab baru dengan aplikasi live Anda untuk melihat perubahan.
Memahami aplikasi contoh dan kode awal
Mulai dengan melihat aplikasi live di tab Chrome baru:
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
Klik tab Konsol.
Pastikan opsi Info dipilih di dropdown Levels di samping kotak Filter.
Di konsol DevTools untuk aplikasi live, Anda akan melihat pesan konsol:
TODO: Implement getRegistration()
.Ini adalah pesan dari stub fungsi yang akan Anda terapkan dalam codelab ini.
Sekarang, mari kita lihat kode aplikasi contoh di Glitch yang disematkan di halaman ini.
Di Glitch tersemat, lihat
public/index.js
:Ada empat stub untuk fungsi yang akan Anda terapkan:
registerServiceWorker
,getRegistration
,unRegisterServiceWorker
, dansendNotification
.Fungsi
requestPermission
meminta izin pengguna untuk mengirim notifikasi. Jika telah menyelesaikan codelab Memulai Notifications API, Anda akan melihat bahwa fungsirequestPermission
-nya digunakan di sini. Satu-satunya perbedaan adalah sekarang juga memperbarui antarmuka pengguna setelah me-resolve permintaan izin.Fungsi
updateUI
memuat ulang semua tombol dan pesan aplikasi.Fungsi
initializePage
melakukan deteksi fitur untuk kemampuan pekerja layanan di browser dan memperbarui antarmuka pengguna aplikasi.Skrip menunggu hingga halaman dimuat, lalu melakukan inisialisasi.
Di Glitch tersemat, buka
public/service-worker.js
.Seperti namanya, Anda akan menambahkan kode ke aplikasi untuk mendaftarkan file ini sebagai service worker.
Meskipun belum digunakan oleh aplikasi, file ini berisi beberapa kode awal yang akan mencetak pesan ke konsol saat pekerja layanan diaktifkan.
Anda akan menambahkan kode ke
public/service-worker.js
untuk menangani notifikasi saat pekerja layanan menerimanya.
Mendaftarkan pekerja layanan
Pada langkah ini, Anda akan menulis kode yang berjalan
saat pengguna mengklik Register service worker di UI aplikasi.
Kode ini akan mendaftarkan public/service-worker.js
sebagai pekerja layanan.
Di editor Glitch tersemat, buka
public/index.js
. Ganti fungsiregisterServiceWorker
dengan kode berikut:// Use the Service Worker API to register a service worker. async function registerServiceWorker() { await navigator.serviceWorker.register('./service-worker.js') updateUI(); }
Perhatikan bahwa
registerServiceWorker
menggunakan deklarasiasync function
untuk mempermudah penanganan promise. Hal ini memungkinkan Andaawait
nilai yang di-resolve dariPromise
. Misalnya, fungsi di atas menunggu hasil pendaftaran pekerja layanan sebelum mengupdate UI. Lihatawait
di MDN untuk mengetahui informasi selengkapnya.Setelah pengguna dapat mendaftarkan pekerja layanan, Anda bisa mendapatkan referensi ke objek pendaftaran pekerja layanan. Di
public/index.js
, ganti fungsigetRegistration
dengan kode berikut:// Get the current service worker registration. function getRegistration() { return navigator.serviceWorker.getRegistration(); }
Fungsi di atas menggunakan Service Worker API untuk mendapatkan pendaftaran pekerja layanan saat ini, jika ada. Hal ini membuat mendapatkan referensi ke pendaftaran pekerja layanan menjadi sedikit lebih mudah.
Untuk menyelesaikan fungsi pendaftaran pekerja layanan, tambahkan kode untuk membatalkan pendaftaran pekerja layanan. Ganti fungsi
unRegisterServiceWorker
dengan kode berikut:// Unregister a service worker, then update the UI. async function unRegisterServiceWorker() { // Get a reference to the service worker registration. let registration = await getRegistration(); // Await the outcome of the unregistration attempt // so that the UI update is not superceded by a // returning Promise. await registration.unregister(); updateUI(); }
Di tab tempat Anda melihat aplikasi live, muat ulang halaman. Tombol Register service worker dan Unregister service worker sekarang seharusnya berfungsi.
Mengirim notifikasi ke pekerja layanan
Pada langkah ini, Anda akan menulis kode yang akan berjalan saat pengguna mengklik Kirim notifikasi di UI aplikasi. Kode ini akan membuat notifikasi, memeriksa apakah pekerja layanan terdaftar, lalu mengirim notifikasi ke pekerja layanan menggunakan metode postMessage
-nya.
Di editor Glitch tersemat, buka public/index.js
dan ganti fungsi sendNotification
dengan kode berikut:
// Create and send a test notification to the service worker.
async function sendNotification() {
// Use a random number as part of the notification data
// (so you can tell the notifications apart during testing!)
let randy = Math.floor(Math.random() * 100);
let notification = {
title: 'Test ' + randy,
options: { body: 'Test body ' + randy }
};
// Get a reference to the service worker registration.
let registration = await getRegistration();
// Check that the service worker registration exists.
if (registration) {
// Check that a service worker controller exists before
// trying to access the postMessage method.
if (navigator.serviceWorker.controller) {
navigator.serviceWorker.controller.postMessage(notification);
} else {
console.log('No service worker controller found. Try a soft reload.');
}
}
}
Berikut fungsi kode tersebut:
sendNotification
adalah fungsi asinkron, sehingga Anda dapat menggunakanawait
untuk mendapatkan referensi ke pendaftaran pekerja layanan.Metode
postMessage
pekerja layanan mengirim data dari aplikasi ke pekerja layanan. Lihat dokumentasi MDN tentang postMessage untuk informasi selengkapnya.Kode memeriksa keberadaan properti
navigator.serviceWorker.controller
sebelum mencoba mengakses fungsipostMessage
.navigator.serviceWorker.controller
akan menjadinull
jika tidak ada pekerja layanan yang aktif, atau jika halaman telah dimuat ulang secara paksa (Shift+
Muat ulang). Lihat dokumentasi pengontrol ServiceWorker di MDN untuk mengetahui informasi selengkapnya.
Menangani notifikasi di pekerja layanan
Pada langkah ini, Anda akan menulis kode di pekerja layanan yang akan menangani pesan yang diposting ke dalamnya dan menampilkan notifikasi kepada pengguna.
Di editor Glitch tersemat, buka public/service-worker.js
. Tambahkan kode berikut ke bagian akhir file:
// Show notification when received
self.addEventListener('message', (event) => {
let notification = event.data;
self.registration.showNotification(
notification.title,
notification.options
).catch((error) => {
console.log(error);
});
});
Berikut penjelasan singkatnya:
self
adalah referensi ke service worker itu sendiri.Meskipun pekerja layanan kini menangani tampilan notifikasi, UI aplikasi utama masih bertanggung jawab untuk mendapatkan izin notifikasi dari pengguna. Jika izin tidak diberikan, promise yang ditampilkan oleh
showNotification
akan ditolak. Kode di atas menggunakan pemblokirancatch
untuk menghindari error penolakanPromise
yang tidak tertangkap dan menangani error ini dengan lebih baik.
Jika Anda mengalami masalah, lihat glitch.com/edit/#!/codelab-notifications-service-worker-completed untuk melihat kode yang sudah selesai.
Lanjutkan ke codelab berikutnya dalam seri ini: Mem-build server notifikasi push.