Dalam codelab ini, Anda akan menggunakan pekerja layanan untuk mengelola notifikasi. Petunjuk di sini mengasumsikan bahwa Anda sudah terbiasa dengan pekerja layanan dan dasar-dasar permintaan izin notifikasi dan pengiriman notifikasi. Jika Anda perlu mengingat kembali tentang notifikasi, lihat Memulai Notifications API codelab. Untuk mempelajari pekerja layanan lebih lanjut, lihat Pengantar pekerja layanan dari Matt Gaunt.
Me-remix aplikasi contoh dan melihatnya di tab baru
Notifikasi diblokir secara otomatis dari aplikasi Glitch yang disematkan, sehingga Anda tidak akan dapat melihat pratinjau aplikasi di halaman ini. Sebagai gantinya, berikut ini hal yang harus dilakukan:
- Klik Remix to Edit agar project dapat diedit.
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan
Layar penuh
.
Glitch akan terbuka di tab Chrome baru.
Saat Anda mengerjakan codelab ini, buat perubahan pada kode di Glitch yang disematkan di halaman ini. Muat ulang tab baru dengan aplikasi yang sudah aktif untuk melihat perubahan.
Memahami aplikasi contoh dan kode awal
Mulailah dengan melihat aplikasi aktif di tab Chrome yang 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 yang sudah tersedia, 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 yang disematkan, lihat
public/index.js
:Ada empat stub untuk fungsi yang akan Anda implementasikan:
registerServiceWorker
,getRegistration
,unRegisterServiceWorker
, dansendNotification
.Fungsi
requestPermission
meminta izin pengguna untuk mengirim notifikasi. Jika Anda melakukan codelab Memulai Notifications API, Anda akan melihat bahwa fungsirequestPermission
digunakan di sini. Satu-satunya perbedaan adalah API ini kini juga memperbarui antarmuka pengguna setelah menyelesaikan permintaan izin.Fungsi
updateUI
memuat ulang semua tombol dan pesan aplikasi.Fungsi
initializePage
melakukan deteksi fitur untuk kemampuan pekerja layanan di browser dan mengupdate antarmuka pengguna aplikasi.Skrip akan menunggu hingga halaman dimuat, lalu melakukan inisialisasi.
Di Glitch yang disematkan, buka
public/service-worker.js
.Seperti namanya, Anda akan menambahkan kode ke aplikasi untuk mendaftarkan file ini sebagai pekerja layanan.
Meskipun file ini 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 menjalankan
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 Anda melakukanawait
nilaiPromise
yang di-resolve. 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 API Pekerja Layanan untuk mendapatkan pendaftaran pekerja layanan saat ini, jika ada. Cara ini memudahkan penambahan referensi ke pendaftaran pekerja layanan.
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(); }
Pada tab tempat Anda melihat aplikasi aktif, muat ulang halaman. Tombol Daftarkan pekerja layanan dan Batalkan pendaftaran pekerja layanan sekarang seharusnya berfungsi.
Mengirim notifikasi ke pekerja layanan
Pada langkah ini, Anda akan menulis kode yang akan dijalankan saat pengguna mengklik Send a notifications di UI aplikasi. Kode ini akan membuat notifikasi, memeriksa apakah pekerja layanan terdaftar, lalu mengirim notifikasi ke pekerja layanan menggunakan metode postMessage
.
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.');
}
}
}
Inilah yang dilakukan 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 MMD 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 paksa (Shift+
Muat ulang). Lihat dokumentasi pengontrol ServiceWorker di MDN untuk informasi selengkapnya.
Menangani notifikasi di pekerja layanan
Pada langkah ini, Anda akan menulis kode dalam pekerja layanan yang akan menangani pesan yang diposting ke pekerja layanan tersebut 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 pekerja layanan 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 blokcatch
untuk menghindari error penolakanPromise
yang tidak tertangkap dan menangani error ini sedikit lebih halus.
Jika Anda mengalami kesulitan, lihat glitch.com/edit/#!/codelab-notifications-service-worker-completed untuk kode yang sudah selesai.
Buka codelab berikutnya dalam seri ini: Membangun server notifikasi push.