Bekerja dengan pekerja layanan

Jeff Posnick

Untuk mengikuti codelab ini, buka Glitch ini di tab kedua.

Catatan: Codelab ini menggunakan Chrome DevTools. Download Chrome jika Anda belum memilikinya.

Codelab ini menunjukkan cara mendaftarkan pekerja layanan dari dalam aplikasi web, dan menggunakan Chrome DevTools untuk mengamati perilakunya. Bagian ini juga membahas beberapa teknik proses debug yang mungkin berguna bagi Anda saat menangani service worker.

Memahami project contoh

File dalam project contoh yang paling relevan dengan codelab ini adalah:

• register-sw.js dimulai dengan kosong, tetapi akan berisi kode yang digunakan untuk mendaftarkan pekerja layanan. File ini sudah dimuat melalui tag <script> di dalam index.html project.
• service-worker.js juga kosong. File ini 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 jika terdaftar terlebih dahulu. Anda dapat melakukannya melalui panggilan ke:

navigator.serviceWorker.register(
  '/service-worker.js'
)

di dalam file register-sw.js Anda.

Namun, sebelum menambahkan kode tersebut, ada beberapa hal yang perlu dipertimbangkan.

Pertama, tidak semua browser mendukung service worker. Hal ini terutama berlaku untuk browser versi lama yang tidak otomatis diupdate. Jadi, praktik terbaiknya adalah memanggil navigator.serviceWorker.register() secara kondisional, setelah memeriksa apakah navigator.serviceWorker didukung.

Kedua, saat Anda mendaftarkan pekerja layanan, browser akan menjalankan kode dalam file service-worker.js, dan berpotensi mulai mendownload URL untuk mengisi cache, bergantung pada kode dalam pengendali peristiwa install dan activate pekerja layanan Anda.

Menjalankan kode tambahan dan mendownload aset dapat menghabiskan resource berharga yang dapat digunakan browser Anda untuk menampilkan halaman web saat ini. Untuk membantu menghindari gangguan ini, sebaiknya tunda pendaftaran pekerja layanan hingga browser selesai merender halaman saat ini. Cara mudah untuk memperkirakannya adalah dengan menunggu hingga peristiwa window.load diaktifkan.

Catatan: Menunggu window.load adalah solusi yang cocok untuk semua. Jika Anda mengetahui lebih lanjut cara halaman web memuat resource, atau jika Anda menggunakan framework aplikasi web yang mendukung peristiwa siklus proses "semuanya siap"-nya sendiri, Anda dapat menyesuaikan waktunya.

Dengan menggabungkan kedua poin tersebut, tambahkan kode pendaftaran pekerja layanan tujuan umum 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 adalah tempat semua logika untuk penerapan pekerja layanan biasanya berada. Anda akan menggunakan campuran peristiwa siklus proses pekerja layanan, Cache Storage API, dan pengetahuan tentang traffic jaringan aplikasi web Anda untuk membuat pekerja layanan yang dibuat dengan sempurna, siap menangani semua permintaan aplikasi web Anda.

Namun… 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 konsol DevTools sebagai respons terhadap berbagai peristiwa (tetapi tidak melakukan banyak hal lainnya):

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 Workers di DevTools

Setelah menambahkan kode ke file register-sw.js dan service-worker.js, saatnya membuka versi Live project contoh Anda, dan mengamati cara kerja pekerja layanan.

• Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian 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, yang menunjukkan bahwa pekerja layanan telah diinstal dan diaktifkan:

Kemudian, buka tab Applications, dan pilih panel Service Workers. Anda akan melihat sesuatu seperti berikut:

Hal ini memungkinkan Anda mengetahui bahwa ada pekerja layanan dengan URL sumber service-worker.js, untuk aplikasi web solar-donkey.glitch.me, yang saat ini diaktifkan dan berjalan. 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 membuat perubahan pada pekerja layanan yang saat ini terdaftar untuk tujuan proses debug.

Catatan: Service worker cenderung tetap ada, kecuali jika dihapus pendaftarannya secara eksplisit. Jika Anda ingin "memulai dari awal" selama pengembangan lokal, cara terbaik untuk melakukannya adalah menggunakan jendela Samaran Chrome untuk memuat halaman yang berada di bawah kontrol pekerja layanan. Pekerja layanan hanya akan tetap ada selama jendela terbuka, dan Anda selalu dapat memulai dari awal dengan menutup semua jendela Samaran dan membuka jendela baru.

Memicu alur update pekerja layanan

Salah satu konsep utama yang perlu dipahami saat mengembangkan dengan pekerja layanan adalah ide tentang alur update.

Setelah pengguna mengunjungi aplikasi web yang mendaftarkan pekerja layanan, mereka akan mendapatkan kode untuk salinan service-worker.js saat ini yang diinstal di browser lokal mereka. 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. Salah satu perubahan cepat adalah penggantian

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 tampilan seperti berikut:

Hal ini menunjukkan bahwa ada dua versi pekerja layanan yang diinstal pada tahap ini. Versi sebelumnya, yang sudah diaktifkan, sedang berjalan dan mengendalikan halaman saat ini. Versi pekerja layanan yang diperbarui tercantum tepat di bawah. Statusnya berada dalam status waiting, dan akan tetap menunggu hingga semua tab terbuka yang dikontrol oleh service worker 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.

Catatan: Jika tidak ingin menunggu, Anda dapat memanggil skipWaiting() di dalam pekerja layanan (biasanya di pengendali install), atau menyimulasikan perilaku tersebut dengan mengklik link skipWaiting di DevTools.

Merangkum

Sekarang Anda sudah memahami proses pendaftaran pekerja layanan dan mengamati perilaku pekerja layanan menggunakan DevTools Chrome.

Sekarang Anda berada dalam posisi yang baik untuk mulai menerapkan strategi penyimpanan dalam cache, dan semua hal bagus yang akan membantu aplikasi web Anda dimuat dengan andal dan cepat.