Pekerja layanan bisa mempercepat kunjungan berulang ke aplikasi web, namun Anda harus mengambil langkah-langkah untuk memastikan bahwa instalasi awal pekerja layanan tidak mengurangi kualitas pengalaman kunjungan pertama pengguna.
Umumnya, menangguhkan pendaftaran pekerja layanan hingga setelah halaman awal dimuat akan memberikan pengalaman terbaik untuk pengguna, khususnya mereka yang menggunakan perangkat seluler dengan koneksi jaringan yang lebih lambat.
Boilerplate pendaftaran umum
Jika Anda pernah membaca tentang pekerja layanan, mungkin Anda pernah menemukan boilerplate yang secara substansial mirip dengan berikut ini:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
}
Ini mungkin kadang-kadang disertai beberapa pernyataan console.log(), atau
kode
yang mendeteksi update ke pendaftaran pekerja layanan sebelumnya, sebagai cara
memberi tahu pengguna untuk memuat ulang halaman. Namun semua itu hanya variasi minor pada
beberapa baris kode standar.
Jadi, adakah perbedaan kecil pada navigator.serviceWorker.register? Adakah
praktik terbaik untuk diikuti? Tidak mengejutkan (asalkan artikel ini tidak langsung
berhenti di sini), jawaban terhadap keduanya adalah "ya!"
Kunjungan pertama pengguna
Mari kita perhatikan kunjungan pertama pengguna ke aplikasi web. Belum ada pekerja layanan, dan browser tidak memiliki cara untuk mengetahui lebih dini apakah nantinya akan ada pekerja layanan yang diinstal.
Sebagai developer, prioritas Anda adalah memastikan bahwa browser dengan cepat mendapatkan set minimal resource penting yang dibutuhkan untuk menampilkan halaman interaktif. Apa saja yang memperlambat pengambilan resource tersebut adalah musuh bagi pengalaman waktu-ke-interaktif yang cepat.
Sekarang bayangkan bahwa dalam proses download JavaScript atau gambar yang perlu dirender oleh halaman, browser Anda memutuskan untuk memulai thread atau proses latar belakang (untuk meringkasnya, kita asumsikan ini thread). Anggaplah Anda tidak sedang menggunakan mesin desktop yang canggih, melainkan tipe ponsel kelas bawah yang banyak dijadikan perangkat utama oleh orang di seluruh dunia. Memulai thread ekstra ini menambah kontensi bagi CPU dan memori yang seharusnya digunakan oleh browser Anda untuk merender halaman web interaktif.
Thread latar belakang yang menganggur mungkin tidak akan menghasilkan perbedaan signifikan. Namun bagaimana jika thread itu tidak menganggur, melainkan memutuskan juga akan mulai mendownload resource dari jaringan? Semua persoalan tentang perebutan CPU atau memori harus disisihkan dulu untuk memikirkan tentang keterbatasan bandwidth yang ditemukan pada banyak perangkat seluler. Bandwidth berperan sangat penting, jadi jangan meremehkan resource penting dengan mendownload resource sekunder pada waktu yang sama.
Maksud semua ini adalah bahwa mengerjakan thread baru pekerja layanan untuk mendownload dan meng-cache resource di latar belakang bisa membantu tujuan Anda untuk menyediakan pengalaman waktu-ke-interaktif tersingkat saat pertama kali pengguna mengunjungi situs Anda.
Memperbaiki boilerplate
Solusinya adalah mengontrol mulainya pekerja layanan dengan memilih kapan memanggil
navigator.serviceWorker.register(). Aturan sederhananya adalah menunda
pendaftaran hingga setelah peristiwa
pemuatan
dipicu pada window, sehingga:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}
Namun waktu yang tepat untuk memulai pendaftaran pekerja layanan juga bisa bergantung pada apakah aplikasi web Anda berjalan dengan baik setelah dimuat. Misalnya, aplikasi web Google I/O 2016 menyediakan animasi singkat sebelum beralih ke layar utama. Tim kami menemukan bahwa memulai pendaftaran pekerja layanan selama animasi bisa menyebabkan kelambatan pada perangkat seluler low-end. Alih-alih memberikan pengalaman buruk kepada pengguna, lebih baik kita menunda pendaftaran pekerja layanan hingga setelah animasi, jika browser kemungkinan besar memiliki beberapa detik waktu menganggur.
Demikian pula, jika aplikasi web Anda menggunakan kerangka kerja yang melakukan penyiapan tambahan setelah halaman dimuat, carilah kejadian spesifik kerangka kerja yang memberi petunjuk kapan pekerjaan itu selesai.
Kunjungan selanjutnya
Hingga sekarang kita sedang memfokuskan pada pengalaman kunjungan pertama, namun bagaimana dampak penundaan pendaftaran pekerja layanan pada kunjungan berulang ke situs Anda? Walaupun hal ini mungkin mengejutkan sebagian orang, seharusnya tidak ada dampaknya sama sekali.
Jika pekerja layanan telah terdaftar, ia akan melalui install dan
activate peristiwa
siklus proses.
Setelah pekerja layanan diaktifkan, maka bisa menangani peristiwa fetch untuk
kunjungan selanjutnya ke aplikasi web Anda. Pekerja layanan akan dimulai sebelum
membuat permintaan untuk halaman apa pun yang berada dalam cakupannya, yang memang sesuai bila
dipikirkan. Jika pekerja layanan yang ada belum dijalankan sebelum
mengunjungi halaman, maka tidak ada kesempatan untuk memenuhi kejadian fetch untuk
permintaan navigasi.
Dengan demikian, setelah ada pekerja layanan yang aktif, maka tidak penting kapan Anda memanggil
navigator.serviceWorker.register(), atau sebenarnya, apakah Anda memanggilnya.
Kecuali jika Anda mengubah URL skrip pekerja layanan,
navigator.serviceWorker.register() secara efektif menjadi
no-op selama kunjungan selanjutnya. Tidak relevan
kapan memanggilnya.
Alasan untuk mendaftar dini
Adakah skenario yang membuat pendaftaran pekerja layanan sedini mungkin
menjadi hal yang masuk akal? Skenario yang terlintas di benak adalah jika pekerja layanan menggunakan
clients.claim()
untuk mengontrol halaman selama kunjungan pertama, dan pekerja layanan
secara agresif melakukan caching
waktu proses
di dalam pengendali fetch-nya. Dalam situasi itu, ada
manfaat membuat pekerja layanan aktif secepat mungkin, untuk mencoba
mengisi cache waktu prosesnya dengan resource mungkin nanti akan masuk. Jika
aplikasi web Anda termasuk dalam kategori ini, ada baiknya mengambil langkah mundur untuk memastikan
pengendali install pekerja layanan Anda tidak meminta
resource yang berebut bandwidth dengan permintaan halaman utama.
Menguji berbagai hal
Cara yang bagus untuk menyimulasikan kunjungan pertama adalah membuka aplikasi web Anda di jendela Samaran Chrome, dan mengamati traffic jaringan di DevTools Chrome. Sebagai developer web, Anda mungkin akan memuat ulang instance lokal aplikasi web puluhan kali sehari. Namun dengan mengunjungi ulang situs Anda bila sudah ada pekerja layanan dan cache telah terisi penuh, Anda tidak mendapatkan pengalaman yang sama dengan yang akan didapat pengguna baru, dan masalah potensial mudah terabaikan.
Inilah contoh yang mengilustrasikan perbedaan yang bisa dihasilkan oleh pengaturan waktu pendaftaran. Kedua screenshot diambil saat mengunjungi sebuah aplikasi contoh dalam mode Penyamaran dengan menggunakan throttling jaringan untuk menyimulasikan koneksi yang lambat.
Screenshot di atas mencerminkan traffic jaringan bila contoh dimodifikasi
untuk melakukan pendaftaran pekerja layanan sesegera mungkin. Anda bisa melihat
permintaan precaching (entri dengan ikon
roda gigi
di sebelahnya, berasal dari pengendali install pekerja layanan)
diselingi dengan permintaan akan resource lain yang dibutuhkan untuk menampilkan laman.
Dalam screenshot di atas, pendaftaran pekerja layanan ditunda hingga setelah
halaman dimuat. Anda bisa melihat bahwa permintaan precaching tidak dimulai hingga semua
sumber daya diambil dari jaringan, sehingga menghilangkan rebutan
bandwidth. Terlebih lagi, karena sebagian item precaching sudah ada dalam
cache HTTP browser—item dengan (from disk cache) di kolom Size
—kita bisa mengisi cache pekerja layanan tanpa harus masuk lagi ke
jaringan.
Anda akan dapat bonus jika menjalankan pengujian semacam ini dari perangkat low-end sungguhan pada jaringan seluler sesungguhnya. Anda bisa memanfaatkan kemampuan debug dari jauh di Chrome dengan menghubungkan ponsel Android ke mesin desktop lewat USB, dan memastikan pengujian yang dijalankan benar-benar mencerminkan pengalaman sesungguhnya dari banyak pengguna Anda.
Kesimpulan
Untuk merangkum, memastikan pengguna Anda mendapatkan pengalaman kunjungan pertama yang terbaik harus menjadi prioritas utama. Menunda pendaftaran pekerja layanan hingga setelah laman dimuat selama kunjungan pertama bisa membantu memastikannya. Anda tetap akan mendapatkan semua manfaat memiliki pekerja layanan untuk kunjungan berulang.
Cara praktis untuk memastikan penundaan pendaftaran pertama pekerja layanan Anda hingga setelah laman pertama dimuat adalah menggunakan yang berikut ini:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}