Meningkatkan pengalaman pengembangan pekerja layanan

Meskipun siklus proses pekerja layanan memastikan proses penginstalan dan update yang dapat diprediksi, siklus pengembangan lokal dapat sedikit lebih bernuansa.

Dalam siklus pengembangan lokal umumnya, developer menyimpan perubahan pada file di editor teks, lalu beralih ke browser untuk memverifikasi perubahan, dan prosesnya berulang. Ketika pekerja layanan terlibat, siklus ini hampir sama, tetapi mungkin ada perbedaan antara apa yang diharapkan developer dan 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 jika API tersebut mungkin tersedia melalui HTTP. Salah satu pengecualian yang penting adalah untuk halaman yang ditayangkan melalui localhost, yang berfungsi dengan baik untuk pengembangan lokal.

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

Solusi yang lebih nyaman adalah memerintahkan browser membuat pengecualian untuk pengujian pekerja layanan. Untuk Chrome, buka chrome://flags/#unsafely-treat-insecure-origin-as-secure dan tentukan origin yang tidak aman agar 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.

Bantuan pengembangan pekerja layanan

Pengembangan lokal dengan pekerja layanan dalam campuran dapat menyebabkan perilaku yang tampaknya tidak terduga. Misalnya, strategi khusus cache diterapkan untuk aset statis tanpa versi, atau halaman "Anda sedang offline" yang telah disimpan dalam cache dan diperkirakan akan diperbarui saat dimuat ulang setelah melakukan perubahan. Karena versi lama aset tersebut selalu ditayangkan dari instance Cache, aset tersebut tampaknya tidak pernah diupdate. Merasa frustrasi karena ini, pekerja layanan hanya melakukan apa yang dibuatnya, tetapi ada beberapa cara untuk membuat pengujian menjadi 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 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. Membuka 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 meniru siklus proses pekerja layanan secara tepat.

Alat pengujian lain yang tersedia di panel Aplikasi Chrome DevTools dapat membantu, meskipun alat tersebut dapat mengubah siklus proses pekerja layanan dengan beberapa cara.

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

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

Ini adalah tombol alih yang berguna, terutama Abaikan untuk jaringan, yang sangat bagus jika Anda mengembangkan project dengan pekerja layanan aktif, tetapi juga ingin memastikan bahwa pengalaman berfungsi seperti yang diharapkan tanpa pekerja layanan.

Firefox memiliki panel aplikasi serupa pada alat developernya, tetapi fungsinya dibatasi untuk menampilkan pekerja layanan yang terinstal, serta kemampuan untuk membatalkan pendaftaran pekerja layanan aktif secara manual pada halaman saat ini. Hal ini sama membantunya, tetapi memang memerlukan lebih banyak upaya manual dalam siklus pengembangan lokal.

Geser dan muat ulang

Saat melakukan pengembangan secara lokal dengan pekerja layanan aktif tanpa memerlukan fungsi yang disediakan oleh update saat refresh atau bypass untuk jaringan, sebaiknya tahan Shift dan tekan tombol refresh.

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

Fungsi ini sangat bagus jika ada ketidakpastian seputar apakah strategi caching tertentu berfungsi sebagaimana mestinya, dan berguna untuk mengambil semuanya dari jaringan untuk membandingkan perilaku dengan dan tanpa pekerja layanan. Yang lebih baik lagi, ini adalah perilaku yang ditentukan, sehingga semua browser yang mendukung pekerja layanan akan mengamatinya.

Memeriksa konten cache

Sulit untuk mengetahui apakah strategi caching berfungsi sebagaimana mestinya jika cache tidak dapat diperiksa. Tentu, cache dapat diperiksa dalam kode, tetapi itu adalah proses yang melibatkan debugger dan/atau pernyataan console ketika alat visual akan 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 terkaitnya.
• Keluarkan satu atau beberapa item dari cache, atau bahkan hapus seluruh instance Cache.

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

Menyimulasikan kuota penyimpanan

Di situs yang memiliki banyak aset statis besar (seperti gambar beresolusi tinggi), Anda dapat mencapai kuota penyimpanan. Jika hal ini terjadi, browser akan mengeluarkan item dari cache yang dianggap usang, atau layak untuk dikorbankan guna memberikan ruang bagi aset baru.

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

Panel Aplikasi di DevTools Chrome memiliki subpanel Storage yang menawarkan informasi tentang berapa banyak kuota penyimpanan saat ini yang digunakan oleh halaman. Tindakan ini juga memungkinkan kuota kustom ditentukan dalam megabyte. Saat diberlakukan, Chrome akan menerapkan kuota penyimpanan kustom agar dapat diuji.

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

Pengembangan yang lebih mudah, produktivitas lebih baik

Saat developer tidak terbebani, mereka dapat bekerja dengan lebih percaya diri dan menjadi lebih produktif. Pengembangan lokal dengan pekerja layanan dapat dibedakan, tetapi tidak harus menyusahkan. Dengan tips dan trik ini, pengembangan dengan pekerja layanan aktif akan jauh lebih transparan dan dapat diprediksi, yang mengarah pada pengalaman developer yang lebih baik.