Can’t make the #ChromeDevSummit this year? Catch all the content (and more!) on the livestream, or join your peers for a CDS Extended event at a hosted location nearby. To learn more, check out the Chrome Dev Summit 2019 website.

Pendaftaran Pekerja Layanan

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.

Traffic jaringan pada pendaftaran dini.

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.

Traffic jaringan dengan pendaftaran terlambat.

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');
  });
}

Masukan

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.