Praktik terbaik untuk menentukan waktu pendaftaran pekerja layanan Anda.
Pekerja layanan dapat mempercepat kunjungan berulang ke aplikasi web Anda secara signifikan, tetapi Anda harus mengambil langkah-langkah untuk memastikan penginstalan awal pekerja layanan tidak menurunkan pengalaman kunjungan pertama pengguna.
Secara umum, menunda pendaftaran pekerja layanan hingga setelah halaman awal dimuat akan memberikan pengalaman terbaik bagi pengguna, terutama mereka yang menggunakan perangkat seluler dengan koneksi jaringan yang lebih lambat.
Boilerplate pendaftaran umum
Jika Anda pernah membaca tentang pekerja layanan, Anda mungkin pernah menemukan boilerplate yang sangat mirip dengan berikut ini:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
}
Hal ini terkadang disertai dengan beberapa pernyataan console.log()
, atau
kode
yang mendeteksi update pada pendaftaran pekerja layanan sebelumnya, sebagai cara
memberi tahu pengguna untuk memuat ulang halaman. Tapi itu hanya variasi minor pada
beberapa baris kode standar.
Jadi, adakah perbedaan kecil pada navigator.serviceWorker.register
? Apakah ada praktik
terbaik yang harus diikuti? Tidak mengherankan (mengingat artikel ini tidak berakhir
di sini), jawaban untuk keduanya adalah "ya!"
Kunjungan pertama pengguna
Mari kita pertimbangkan kunjungan pertama pengguna ke aplikasi web. Belum ada pekerja layanan, dan browser tidak memiliki cara untuk mengetahui sebelumnya apakah akan ada pekerja layanan yang akhirnya diinstal.
Sebagai developer, prioritas Anda adalah memastikan bahwa browser dengan cepat mendapatkan kumpulan resource penting minimal yang diperlukan untuk menampilkan halaman interaktif. Apa pun yang memperlambat pengambilan respons tersebut adalah musuh bagi pengalaman waktu-ke-interaktif yang cepat.
Sekarang bayangkan bahwa dalam proses download JavaScript atau gambar yang harus dirender oleh halaman Anda, browser Anda memutuskan untuk memulai thread atau proses latar belakang (agar lebih singkat, kami akan menganggap bahwa ini adalah thread). Asumsikan bahwa Anda tidak sedang menggunakan mesin desktop yang canggih, melainkan jenis ponsel dengan daya rendah yang dianggap oleh banyak orang di seluruh dunia sebagai perangkat utamanya. Memulai thread tambahan ini akan menambah pertentangan bagi waktu dan memori CPU yang mungkin dihabiskan browser Anda untuk merender halaman web interaktif.
Thread latar belakang yang tidak ada aktivitas kemungkinan tidak akan membuat perbedaan signifikan. Namun, bagaimana jika thread tersebut tidak menganggur, tetapi memutuskan bahwa thread juga akan mulai mendownload resource dari jaringan? Semua kekhawatiran tentang pertentangan CPU atau memori harus disisihkan dari kekhawatiran tentang terbatasnya bandwidth yang tersedia di banyak perangkat seluler. Bandwidth sangat berharga, jadi jangan merusak resource penting dengan mendownload resource sekunder secara bersamaan.
Semua ini berarti bahwa menjalankan thread pekerja layanan baru untuk mendownload dan meng-cache resource di latar belakang dapat membantu tujuan Anda dalam memberikan pengalaman waktu interaktif tersingkat saat pengguna pertama kali mengunjungi situs Anda.
Meningkatkan boilerplate
Solusinya adalah mengontrol awal pekerja layanan dengan memilih kapan harus memanggil navigator.serviceWorker.register()
. Aturan praktisnya adalah menunda
pendaftaran hingga setelah load
event
diaktifkan di window
, seperti ini:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}
Namun, waktu yang tepat untuk memulai pendaftaran pekerja layanan juga dapat bergantung pada apa yang dilakukan aplikasi web Anda dengan benar setelah dimuat. Misalnya, aplikasi web Google I/O 2016 menampilkan animasi singkat sebelum beralih ke layar utama. Tim kami menemukan bahwa memulai pendaftaran pekerja layanan selama animasi dapat menyebabkan jank pada perangkat seluler kelas bawah. Alih-alih memberikan pengalaman yang buruk kepada pengguna, kami menunda pendaftaran pekerja layanan hingga setelah animasi, saat browser kemungkinan besar memiliki beberapa detik tidak ada aktivitas.
Demikian pula, jika aplikasi web Anda menggunakan framework yang melakukan penyiapan tambahan setelah halaman dimuat, cari peristiwa khusus framework yang menunjukkan kapan pekerjaan tersebut selesai.
Kunjungan berikutnya
Hingga saat ini, kita telah berfokus pada pengalaman kunjungan pertama, tetapi apa dampak penundaan pendaftaran pekerja layanan pada kunjungan berulang ke situs Anda? Meskipun mungkin mengejutkan sebagian orang, seharusnya tidak ada dampak sama sekali.
Saat pekerja layanan didaftarkan, pekerja layanan akan melalui peristiwa
siklus proses install
dan
activate
.
Setelah diaktifkan, pekerja layanan dapat menangani peristiwa fetch
untuk
kunjungan berikutnya ke aplikasi web Anda. Pekerja layanan akan dimulai sebelum
permintaan untuk halaman apa pun dalam cakupannya dibuat, yang masuk akal jika Anda
memikirkan hal itu. Jika pekerja layanan yang ada belum berjalan sebelum mengunjungi halaman, pekerja layanan tidak akan memiliki kesempatan untuk memenuhi peristiwa fetch
untuk permintaan navigasi.
Jadi, setelah ada pekerja layanan yang aktif, tidak masalah kapan Anda memanggil navigator.serviceWorker.register()
, atau bahkan, apakah Anda memanggilnya.
Kecuali jika Anda mengubah URL skrip pekerja layanan, navigator.serviceWorker.register()
pada dasarnya menjadi tanpa pengoperasian selama kunjungan berikutnya. Tidak relevan
kapan panggilan itu dilakukan.
Alasan untuk mendaftar lebih awal
Apakah ada skenario yang membuat pendaftaran pekerja layanan sedini mungkin? Penting untuk diingat adalah saat pekerja layanan menggunakan clients.claim()
untuk mengontrol halaman selama kunjungan pertama, dan pekerja layanan secara agresif melakukan cache runtime di dalam pengendali fetch
-nya. Dalam situasi tersebut, ada
untungnya membuat pekerja layanan aktif secepat mungkin, yaitu mencoba
mengisi cache runtime-nya dengan resource yang mungkin akan berguna nanti. Jika aplikasi web Anda termasuk dalam kategori ini, ada baiknya untuk mundur sejenak untuk memastikan bahwa pengendali install
pekerja layanan tidak meminta resource yang berebut bandwidth dengan permintaan halaman utama.
Menguji berbagai hal
Cara yang tepat untuk menyimulasikan kunjungan pertama adalah dengan membuka aplikasi web Anda di jendela Samaran Chrome, dan melihat traffic jaringan di DevTools Chrome. Sebagai developer web, Anda mungkin memuat ulang instance lokal aplikasi web puluhan kali dalam sehari. Namun, dengan mengunjungi kembali situs Anda saat sudah ada pekerja layanan dan cache yang terisi penuh, Anda tidak mendapatkan pengalaman yang sama seperti yang akan didapat oleh pengguna baru, dan potensi masalah mudah diabaikan.
Berikut adalah contoh yang menggambarkan perbedaan yang dapat dihasilkan oleh waktu pendaftaran. Kedua screenshot diambil saat membuka aplikasi contoh dalam mode Samaran menggunakan throttling jaringan untuk menyimulasikan koneksi yang lambat.
![Traffic jaringan dengan pendaftaran awal.](https://web.dev/static/articles/service-workers-registration/image/network-traffic-early-re-63d00e80875ce.png?authuser=6&hl=id)
Screenshot di atas mencerminkan traffic jaringan saat sampel diubah untuk melakukan pendaftaran pekerja layanan sesegera mungkin. Anda dapat melihat permintaan precaching (entri dengan ikon roda gigi di sampingnya, yang berasal dari pengendali install
pekerja layanan) yang diselingi dengan permintaan resource lain yang diperlukan untuk menampilkan halaman.
![Traffic jaringan dengan pendaftaran terlambat.](https://web.dev/static/articles/service-workers-registration/image/network-traffic-late-reg-17e31ea5d01ab.png?authuser=6&hl=id)
Pada screenshot di atas, pendaftaran pekerja layanan ditunda hingga halaman dimuat. Anda dapat melihat bahwa permintaan precaching tidak dimulai hingga semua
resource diambil dari jaringan, sehingga menghilangkan pertentangan
bandwidth. Selain itu, karena beberapa item precache sudah ada di cache HTTP browser, yaitu item dengan (from disk cache)
di kolom Ukuran, kita dapat mengisi cache pekerja layanan tanpa harus membuka jaringan lagi.
Lebih bagus lagi jika Anda menjalankan pengujian semacam ini dari perangkat kelas bawah sungguhan pada jaringan seluler sungguhan. Anda dapat memanfaatkan kemampuan proses debug jarak jauh Chrome untuk menghubungkan ponsel Android ke komputer desktop melalui USB, dan memastikan pengujian yang Anda jalankan benar-benar mencerminkan pengalaman dunia nyata dari banyak pengguna Anda.
Kesimpulan
Singkatnya, memastikan pengguna mendapatkan pengalaman kunjungan pertama yang terbaik harus menjadi prioritas utama. Menunda pendaftaran pekerja layanan hingga setelah halaman dimuat selama kunjungan awal dapat membantu memastikannya. Anda akan tetap mendapatkan semua manfaat memiliki pekerja layanan untuk kunjungan berulang.
Cara mudah untuk memastikan penundaan pendaftaran awal pekerja layanan Anda hingga halaman pertama dimuat adalah dengan menggunakan cara berikut:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}