Codelab ini menunjukkan cara mendaftarkan pekerja layanan dari dalam aplikasi web, dan menggunakan Chrome DevTools untuk mengamati perilakunya. Panduan ini juga mencakup beberapa teknik proses debug yang mungkin berguna bagi Anda saat menangani pekerja layanan.
Memahami contoh project
File dalam project contoh yang paling relevan dengan codelab ini adalah:
register-sw.jsdimulai dengan kosong, tetapi akan berisi kode yang digunakan untuk mendaftarkan pekerja layanan. Library tersebut sudah dimuat melalui tag<script>di dalamindex.htmlproject.service-worker.jsjuga kosong. Ini adalah file yang akan berisi pekerja layanan untuk proyek ini.
Menambahkan kode pendaftaran pekerja layanan
Pekerja layanan (bahkan yang kosong, seperti file service-worker.js saat ini)
tidak akan digunakan kecuali jika
didaftarkan
terlebih dahulu. Anda dapat melakukannya melalui panggilan ke:
navigator.serviceWorker.register(
'/service-worker.js'
)
di dalam file register-sw.js Anda.
Namun, sebelum Anda menambahkan kode tersebut, ada beberapa hal yang perlu diperhitungkan.
Pertama, tidak semua browser mendukung pekerja layanan. Hal ini terutama berlaku untuk versi browser lama yang
tidak diupdate secara otomatis. Jadi, praktik terbaiknya adalah memanggil
navigator.serviceWorker.register() secara bersyarat, setelah memeriksa apakah
navigator.serviceWorker didukung.
Kedua, saat Anda mendaftarkan pekerja layanan, browser akan menjalankan kode dalam file service-worker.js, dan dapat mulai mendownload URL untuk mengisi cache, bergantung pada kode di pengendali peristiwa install dan activate pekerja layanan Anda.
Menjalankan kode tambahan dan mendownload aset dapat menghabiskan resource berharga yang dapat digunakan browser untuk menampilkan halaman saat ini. Untuk membantu menghindari gangguan ini, sebaiknya tunda pendaftaran pekerja layanan hingga browser selesai merender halaman saat ini. Cara yang mudah untuk memperkirakan hal ini adalah dengan menunggu hingga peristiwa window.load diaktifkan.
Dengan menggabungkan kedua poin tersebut, tambahkan kode pendaftaran pekerja layanan
serbaguna ini ke file register-sw.js Anda:
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}
Menambahkan beberapa kode logging pekerja layanan
File service-worker.js Anda adalah tempat semua logika untuk implementasi pekerja layanan biasanya pergi. Anda akan menggunakan campuran peristiwa siklus proses pekerja layanan, Cache Storage API, dan pengetahuan tentang traffic jaringan aplikasi web untuk membuat pekerja layanan yang dibuat sempurna, siap untuk menangani semua permintaan aplikasi web Anda.
Tapi... itu semua untuk dipelajari nanti. Pada tahap ini, fokusnya adalah mengamati berbagai peristiwa pekerja layanan, dan membiasakan diri menggunakan DevTools Chrome untuk men-debug status pekerja layanan Anda.
Untuk itu, tambahkan kode berikut ke service-worker.js yang akan mencatat pesan ke dalam log ke konsol DevTools sebagai respons terhadap berbagai peristiwa (tetapi jangan lakukan hal lain):
self.addEventListener('install', (event) => {
console.log('Inside the install handler:', event);
});
self.addEventListener('activate', (event) => {
console.log('Inside the activate handler:', event);
});
self.addEventListener(fetch, (event) => {
console.log('Inside the fetch handler:', event);
});
Memahami panel Service Worker di DevTools
Setelah menambahkan kode ke file register-sw.js dan service-worker.js, sekarang saatnya mengunjungi versi Live project contoh Anda, dan mengamati cara kerja pekerja layanan.
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar Penuh
. - Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Konsol.
Anda akan melihat pesan log berikut, yang menunjukkan bahwa pekerja layanan telah diinstal dan diaktifkan:
Kemudian, buka tab Applications, lalu pilih panel Service Workers. Anda akan melihat sesuatu seperti berikut:
Tindakan ini memberi tahu Anda bahwa ada pekerja layanan dengan URL sumber
service-worker.js untuk solar-donkey.glitch.me aplikasi web, yang saat ini
diaktifkan dan berjalan. Selain itu, laporan ini juga memberi tahu Anda bahwa saat ini ada satu klien (tab terbuka) yang dikontrol oleh pekerja layanan.
Anda dapat menggunakan link di panel ini, seperti Unregister atau stop, untuk melakukan
perubahan pada pekerja layanan yang saat ini terdaftar untuk tujuan proses debug.
Memicu alur update pekerja layanan
Salah satu konsep utama yang harus dipahami saat melakukan pengembangan dengan pekerja layanan adalah ide alur update.
Setelah pengguna mengunjungi aplikasi web yang mendaftarkan pekerja layanan, mereka akan mendapatkan kode untuk salinan service-worker.js saat ini yang terinstal di browser lokal mereka. Namun, apa yang terjadi saat memperbarui versi
service-worker.js yang tersimpan di server web Anda?
Saat pengunjung berulang kembali ke URL yang berada dalam cakupan pekerja layanan, browser akan otomatis meminta service-worker.js terbaru dan memeriksa perubahan apa pun. Jika ada sesuatu dalam skrip pekerja layanan yang berbeda, pekerja layanan baru akan berkesempatan untuk menginstal, mengaktifkan, dan pada akhirnya mengambil kendali.
Anda dapat menyimulasikan alur update ini dengan kembali ke editor kode untuk project Anda, dan membuat perubahan apa pun pada kode. Satu perubahan cepat adalah mengganti
self.addEventListener('install', (event) => {
console.log('Inside the install handler:', event);
});
dengan
self.addEventListener('install', (event) => {
console.log('Inside the UPDATED install handler:', event);
});
Setelah melakukan perubahan tersebut, kembali ke versi Live aplikasi contoh Anda, lalu muat ulang halaman dengan tab Aplikasi DevTools masih terbuka. Anda akan melihat sesuatu seperti berikut:
Hal ini menunjukkan bahwa ada dua versi pekerja layanan yang diinstal pada tahap ini. Versi sebelumnya, yang sudah diaktifkan, sedang berjalan dan
mengontrol halaman saat ini. Versi terbaru pekerja layanan tercantum tepat di bawah. Tag ini berada dalam
status waiting,
dan akan tetap menunggu hingga semua tab terbuka yang dikontrol oleh
pekerja layanan lama ditutup.
Perilaku default ini memastikan bahwa jika pekerja layanan baru Anda memiliki perbedaan perilaku yang mendasar dengan yang lama, seperti pengendali fetch yang merespons dengan resource yang tidak kompatibel dengan versi lama aplikasi web Anda, itu tidak akan berlaku hingga pengguna menonaktifkan semua instance aplikasi web Anda sebelumnya.
Mengambil kesimpulan
Sekarang Anda seharusnya sudah memahami proses pendaftaran pekerja layanan dan mengamati perilaku pekerja layanan menggunakan DevTools Chrome.
Sekarang, Anda berada dalam posisi yang tepat untuk mulai menerapkan strategi caching, dan semua hal bagus yang akan membantu aplikasi web Anda dimuat dengan cepat dan andal.