Bekerja dengan pekerja layanan

Jeff Posnick

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 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 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.