Codelab ini menunjukkan cara mendaftarkan pekerja layanan dari dalam aplikasi web, dan menggunakan Chrome DevTools untuk mengamati perilakunya. Anda juga membahas beberapa teknik {i>debugging<i} yang mungkin berguna bagi Anda saat berhadapan dengan pekerja layanan.
Membiasakan diri dengan contoh proyek
File dalam project contoh yang paling relevan dengan codelab ini adalah:
register-sw.js
diawali dengan kosong, tetapi akan berisi kode yang digunakan untuk mendaftarkan pekerja layanan. Widget sudah dimuat melalui<script>
di dalamindex.html
project.service-worker.js
juga kosong. Ini adalah file yang akan berisi pekerja layanan untuk project ini.
Menambahkan kode pendaftaran pekerja layanan
Pekerja layanan (bahkan yang kosong, seperti file service-worker.js
saat ini)
tidak akan digunakan kecuali
terdaftar
terlebih dahulu. Anda dapat melakukannya melalui panggilan telepon ke:
navigator.serviceWorker.register(
'/service-worker.js'
)
di dalam file register-sw.js
Anda.
Sebelum Anda menambahkan kode itu, ada beberapa poin yang harus diperhatikan menggunakan akun layanan.
Pertama, tidak semua {i>browser<i}
mendukung
pekerja layanan. Hal ini terutama berlaku untuk versi browser lama yang
tidak diperbarui secara otomatis. Jadi praktik terbaik adalah memanggil
navigator.serviceWorker.register()
secara bersyarat, setelah memeriksa apakah
navigator.serviceWorker
didukung.
Kedua, saat Anda mendaftarkan pekerja layanan, browser menjalankan kode di
service-worker.js
, dan mungkin mulai mendownload URL untuk diisi
di-cache, tergantung pada kode dalam metode
install
dan
activate
pengendali peristiwa.
Menjalankan kode tambahan dan mendownload aset dapat menghabiskan
sumber daya berharga yang dapat digunakan {i>browser<i} Anda untuk menampilkan
halaman web mereka. Untuk membantu menghindari gangguan ini, sebaiknya tunda
pendaftaran pekerja layanan hingga browser selesai merender
halaman saat ini. Cara yang mudah untuk memperkirakannya
adalah dengan menunggu sampai
window.load
peristiwa telah diaktifkan.
Dengan menggabungkan kedua titik tersebut, tambahkan pekerja layanan umum ini
kode pendaftaran 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 pekerja layanan Anda
implementasi jaringan ini
biasanya berjalan. Anda akan menggunakan gabungan pekerja layanan
peristiwa siklus proses,
tindakan
Cache Storage API,
dan pengetahuan tentang traffic jaringan aplikasi web Anda untuk membuat desain
pekerja layanan, siap 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 dicatat
ke konsol DevTools sebagai respons terhadap beragam peristiwa (tetapi tidak banyak yang
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 kode ditambahkan ke register-sw.js
dan service-worker.js
{i>file<i}, saatnya untuk mengunjungi versi Live dari proyek contoh Anda, dan mengamati
pekerja layanan beraksi.
- 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 sesuatu seperti pesan log berikut, menunjukkan bahwa pekerja layanan telah diinstal dan diaktifkan:
Kemudian, kunjungi tab Applications, dan pilih panel Service Workers. Anda akan melihat sesuatu seperti berikut:
Ini memberi tahu Anda bahwa ada pekerja layanan dengan URL sumber
service-worker.js
, untuk aplikasi web solar-donkey.glitch.me
, yang saat ini
aktif dan berjalan. Catatan ini juga memberi tahu Anda bahwa saat ini
ada satu klien (terbuka
) yang dikontrol oleh pekerja layanan.
Anda dapat menggunakan link di panel ini, seperti Unregister
, atau stop
, untuk membuat
perubahan pada service worker yang saat ini terdaftar untuk tujuan proses debug.
Memicu alur update pekerja layanan
Salah satu konsep utama yang harus dipahami saat mengembangkan dengan pekerja layanan adalah gagasan tentang alur update.
Setelah pengguna mengunjungi aplikasi web yang mendaftarkan pekerja layanan, mereka akan
dengan kode untuk salinan service-worker.js
saat ini yang terinstal di
browser lokal. Namun, apa yang terjadi jika Anda melakukan update pada versi
service-worker.js yang disimpan di server web?
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 yang berbeda dalam skrip pekerja layanan, pekerja layanan baru akan mendapatkan kesempatan untuk menginstal, mengaktifkan, dan pada akhirnya mengambil kendali.
Anda dapat menyimulasikan alur update ini dengan kembali ke editor kode untuk project Anda, dan membuat setiap perubahan pada kode. Satu perubahan cepat akan menjadi untuk 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, dan muat ulang halaman dengan tab Aplikasi DevTools masih terbuka. Anda akan melihat sesuatu seperti berikut:
Ini menunjukkan bahwa ada dua versi pekerja layanan Anda yang diinstal di
poin. Versi sebelumnya, yang telah diaktifkan, sedang berjalan dan di
untuk mengontrol
halaman yang ditampilkan. Versi pekerja layanan yang diperbarui tercantum
tepat di bawah. Alat ini ada di
Negara bagian 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 mendasar dari pekerja layanan lama—seperti pengendali fetch
yang merespons dengan resource yang tidak kompatibel dengan versi lama aplikasi web Anda—perilaku tersebut tidak akan diterapkan hingga pengguna menutup semua instance aplikasi web Anda sebelumnya.
Mengambil kesimpulan
Sekarang Anda seharusnya merasa nyaman dengan proses pendaftaran pekerja layanan dan mengamati perilaku pekerja layanan menggunakan DevTools Chrome.
Anda sekarang berada dalam posisi yang baik untuk mulai menerapkan strategi penyimpanan dalam cache, dan semua hal yang akan membantu aplikasi web Anda memuat dengan andal dan andal dengan cepat.