Meningkatkan pengalaman pengembangan pekerja layanan

Walaupun siklus hidup pekerja layanan memastikan proses instalasi dan pembaruan yang dapat diprediksi, hal itu dapat membuat siklus pengembangan lokal sedikit lebih bernuansa.

Pada siklus pengembangan lokal umum, pengembang menyimpan perubahan ke file dalam editor teks, kemudian beralih ke browser untuk memverifikasi perubahan, dan proses berulang. Ketika pekerja layanan berada di dalam campuran, siklus ini sebagian besar sama, tetapi mungkin ada perbedaan antara yang diharapkan developer dan apa yang dilakukan browser.

Pengecualian untuk pengembangan lokal

Secara umum, API pekerja layanan hanya tersedia di halaman yang disalurkan melalui HTTPS, tetapi ada pengecualian untuk aturan ini ketika mereka mungkin tersedia melalui HTTP. Satu pengecualian penting adalah untuk halaman yang ditayangkan melalui localhost, yang berfungsi dengan baik untuk pengembangan lokal.

Namun, bukan hal yang aneh bagi developer untuk menentukan nama host lokal selain localhost di file host. Hal ini diperlukan di lingkungan pengembangan lokal saat beberapa project memerlukan nama host terpisah. Dalam hal ini, penyediaan sertifikat yang ditandatangani sendiri dapat dilakukan.

Solusi yang lebih mudah adalah dengan memerintahkan browser membuat pengecualian untuk pengujian pekerja layanan. Untuk Chrome, buka chrome://flags/#unsafely-treat-insecure-origin-as-secure dan menentukan origin yang tidak aman untuk diperlakukan sebagai origin yang aman. Firefox menawarkan cara untuk menguji pekerja layanan pada origin yang tidak aman melalui setelan devtools.serviceWorkers.testing.enabled di about:config.

Alat bantu pengembangan pekerja layanan

Pengembangan lokal yang melibatkan pekerja layanan dalam kombinasi dapat menyebabkan perilaku yang tampak tidak terduga. Misalnya, strategi khusus cache tersedia untuk aset statis tanpa versi, atau "Anda sedang offline" yang telah di-pracache yang diharapkan diperbarui saat dimuat ulang setelah melakukan perubahan. Karena versi lama aset tersebut selalu ditayangkan dari instance Cache, sepertinya tidak pernah diperbarui! Frustrasikan, pekerja layanan hanya melakukan apa yang memang harus dilakukan, tetapi ada beberapa cara untuk membuat pengujian lebih mudah.

Sejauh ini, cara paling efektif untuk menguji pekerja layanan adalah dengan mengandalkan jendela penjelajahan rahasia, seperti jendela samaran di Chrome, atau fitur Penjelajahan Pribadi Firefox. Setiap kali Anda membuka jendela penjelajahan rahasia, Anda memulai dari awal. Tidak ada pekerja layanan yang aktif, dan tidak ada instance Cache yang terbuka. Rutinitas untuk pengujian semacam ini adalah:

1. Buka jendela penjelajahan rahasia.
2. Buka halaman yang mendaftarkan pekerja layanan.
3. Verifikasi apakah pekerja layanan berperilaku seperti yang Anda harapkan.
4. Tutup jendela Samaran.
5. Ulangi.

Dengan proses ini, Anda benar-benar meniru siklus proses pekerja layanan.

Alat pengujian lain yang tersedia di panel Aplikasi Chrome DevTools bisa membantu—meskipun mereka bisa memodifikasi siklus proses pekerja layanan dengan beberapa cara.

Panel aplikasi memiliki subpanel berlabel Service Workers, yang menunjukkan pekerja layanan aktif untuk halaman saat ini. Setiap pekerja layanan yang aktif dapat diperbarui secara manual atau bahkan dibatalkan pendaftarannya sama sekali. Ada juga tiga tombol di bagian atas yang membantu pengembangan.

1. Offline menyimulasikan kondisi offline. Hal ini membantu saat menguji apakah pekerja layanan yang aktif menayangkan konten offline.
2. Update saat dimuat ulang: jika diaktifkan, mengambil kembali dan menggantikan pekerja layanan saat ini setiap kali halaman dimuat ulang.
3. Abaikan untuk jaringan, jika diaktifkan, akan mengakali kode apa pun dalam peristiwa fetch pekerja layanan dan selalu mengambil konten dari jaringan.

Tombol ini berguna, terutama Abaikan untuk jaringan, yang sangat bagus ketika Anda mengembangkan proyek dengan pekerja layanan aktif, tetapi juga ingin memastikan pengalaman bekerja seperti yang diharapkan tanpa pekerja layanan.

Firefox memiliki panel aplikasi serupa pada alat pengembangnya, tetapi fungsinya terbatas hanya untuk menunjukkan pekerja layanan apa yang diinstal, serta kemampuan untuk membatalkan pendaftaran pekerja layanan aktif secara manual untuk halaman saat ini. Hal ini sama membantunya, tetapi membutuhkan lebih banyak upaya manual dalam siklus pengembangan lokal.

Geser dan muat ulang

Saat mengembangkan secara lokal dengan pekerja layanan aktif tanpa memerlukan fungsi yang disediakan oleh update saat refresh atau abaikan untuk jaringan, ada baiknya Anda juga menahan Shift dan menekan tombol muat ulang.

Tindakan ini disebut refresh paksa, yang mengabaikan cache HTTP untuk jaringan. Saat pekerja layanan aktif, refresh paksa juga akan mengabaikan pekerja layanan sepenuhnya.

Fungsi ini sangat efektif jika ada ketidakpastian terkait apakah strategi penyimpanan dalam cache tertentu berfungsi sebagaimana mestinya, dan akan berguna untuk mengambil semuanya dari jaringan untuk membandingkan perilaku dengan dan tanpa pekerja layanan. Lebih baik lagi, ini adalah perilaku yang telah ditentukan, sehingga semua browser yang mendukung pekerja layanan akan mengamatinya.

Memeriksa konten cache

Sulit untuk mengetahui apakah strategi penyimpanan dalam cache berfungsi sebagaimana mestinya jika cache tidak dapat diperiksa. Tentu, cache dapat diperiksa dalam kode, tetapi itulah proses yang melibatkan debugger dan/atau pernyataan console ketika alat visual lebih cocok untuk tugas tersebut. Panel Application di Chrome DevTools menawarkan subpanel untuk memeriksa konten instance Cache.

Subpanel ini mempermudah pengembangan pekerja layanan dengan menawarkan fungsi seperti:

• Lihat nama instance Cache.
• Kemampuan untuk memeriksa isi respons aset yang di-cache, dan header respons yang terkait.
• Keluarkan satu atau beberapa item dari cache, atau bahkan hapus seluruh instance Cache.

Antarmuka pengguna grafis (GUI) ini memudahkan pemeriksaan cache pekerja layanan untuk melihat apakah item ditambahkan, diperbarui, atau dihapus sama sekali dari cache pekerja layanan. Firefox menawarkan penampil cache-nya sendiri dengan fungsi serupa, meskipun berada di panel Penyimpanan yang terpisah.

Menyimulasikan kuota penyimpanan

Di {i>website<i} dengan banyak aset statis berukuran besar (seperti gambar beresolusi tinggi), Anda dapat mencapai kuota penyimpanan. Ketika ini terjadi, browser akan mengeluarkan item dari cache yang dianggap tidak berlaku, atau layak untuk dikorbankan untuk memberikan ruang bagi aset baru.

Menangani kuota penyimpanan harus menjadi bagian dari pengembangan pekerja layanan, dan Workbox membuat proses itu lebih sederhana daripada mengelolanya sendiri. Namun, dengan atau tanpa Workbox, menyimulasikan kuota penyimpanan kustom untuk menguji logika pengelolaan cache mungkin ide yang bagus.

Panel Application di DevTools Chrome memiliki subpanel Storage yang menawarkan informasi tentang jumlah kuota penyimpanan saat ini yang digunakan oleh halaman. Hal ini juga memungkinkan kuota kustom ditentukan dalam megabyte. Saat diterapkan, Chrome akan menerapkan kuota penyimpanan kustom agar dapat diuji.

Secara kebetulan, subpanel ini juga berisi tombol Hapus data situs dan seluruh susunan kotak centang terkait untuk hal yang harus dihapus saat tombol diklik. Di antara item tersebut adalah instance Cache yang terbuka, dan kemampuan untuk membatalkan pendaftaran pekerja layanan aktif yang mengontrol halaman.

Pengembangan yang lebih mudah, produktivitas lebih baik

Ketika developer tidak terbebani, mereka dapat bekerja dengan lebih percaya diri dan menjadi lebih produktif. Pengembangan lokal dengan pekerja layanan dapat berbeda, tetapi tidak harus menyakitkan. Dengan tips dan trik ini, pengembangan dengan pekerja layanan yang aktif seharusnya jauh lebih transparan dan mudah diprediksi, yang mengarah pada pengalaman developer yang lebih baik.