Bekerja dengan pekerja layanan

Jeff Posnick

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

Membiasakan diri dengan contoh proyek

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. Tugas sudah dimuat melalui tag <script> di dalam index.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 jika didaftarkan terlebih dahulu. Anda dapat melakukannya melalui panggilan telepon ke:

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

di dalam file register-sw.js Anda.

Namun, sebelum Anda menambahkan kode tersebut, ada beberapa poin 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 Anda, dan dapat 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 untuk menampilkan halaman 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.

Dengan menggabungkan kedua titik tersebut, tambahkan kode pendaftaran pekerja layanan 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 Anda adalah tempat semua logika untuk implementasi pekerja layanan Anda biasanya akan diletakkan. 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 dirancang dengan sempurna, siap menangani semua permintaan aplikasi web Anda.

Tapi... itu semua untuk dipelajari nanti. Pada tahap ini, fokusnya adalah mengamati berbagai peristiwa pekerja layanan, dan memahami cara 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 akan 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 Worker di DevTools

Setelah mendapatkan kode yang ditambahkan ke file register-sw.js dan service-worker.js, kini saatnya mengunjungi versi Live project contoh Anda dan mengamati cara kerja pekerja layanan.

• Untuk melihat pratinjau situs, tekan View App, lalu tekan Fullscreen .
• 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, kunjungi tab Applications, dan pilih panel Service Workers. Anda akan melihat sesuatu seperti berikut:

Hal ini memberi tahu Anda bahwa ada pekerja layanan dengan URL sumber service-worker.js, untuk aplikasi web solar-donkey.glitch.me, yang saat ini diaktifkan dan berjalan. Kode 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, guna membuat 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 gagasan tentang alur update.

Setelah pengguna membuka aplikasi web yang mendaftarkan pekerja layanan, mereka akan mendapatkan kode untuk salinan service-worker.js saat ini yang terinstal di browser lokal. Namun, apa yang terjadi saat Anda mengupdate 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 hal yang berbeda dalam skrip pekerja layanan, pekerja layanan baru akan mendapatkan kesempatan untuk menginstal, mengaktifkan, dan pada akhirnya mengambil kontrol.

Anda dapat menyimulasikan alur update ini dengan kembali ke editor kode untuk project Anda, dan membuat setiap perubahan 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 dari aplikasi contoh Anda, lalu muat ulang halaman dengan tab Aplikasi DevTools masih terbuka. Anda akan melihat sesuatu seperti berikut:

Kode ini menunjukkan bahwa ada dua versi pekerja layanan yang diinstal pada tahap ini. Versi sebelumnya, yang telah diaktifkan, sedang berjalan dan mengontrol halaman saat ini. Versi terbaru pekerja layanan tercantum tepat di bawah ini. Service worker tersebut dalam status waiting, dan akan tetap menunggu sampai 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 dari yang lama, seperti pengendali fetch yang merespons dengan resource yang tidak kompatibel dengan aplikasi web versi lama, hal ini tidak akan berlaku sampai 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 baik untuk mulai mengimplementasikan strategi caching, dan semua hal bagus yang akan membantu aplikasi web Anda dimuat dengan cepat dan andal.