Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

Pendaftaran Service Worker

Service worker bisa mempercepat kunjungan berulang ke aplikasi web, namun Anda harus mengambil langkah-langkah untuk memastikan bahwa pemasangan pertama service worker tidak mengurangi kualitas pengalaman kunjungan pertama pengguna.

Umumnya, menangguhkan pendaftaran service worker hingga setelah laman pertama dimuat akan menyediakan pengalaman terbaik untuk pengguna, khususnya mereka yang menggunakan perangkat seluler dengan koneksi jaringan yang lebih lambat.

Boilerplate pendaftaran umum

Jika pernah membaca tentang service worker, barangkali 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 pembaruan ke pendaftaran service worker sebelumnya, sebagai cara memberi tahu pengguna untuk menyegarkan laman. Namun semua itu cuma variasi minor atas beberapa baris kode standar.

Jadi, adakah perbedaan kecil pada navigator.serviceWorker.register? Adakah praktik terbaik untuk diikuti? Tidaklah mengejutkan (asalkan artikel ini tidak langsung berhenti di sini) bila jawaban terhadap keduanya adalah "ya!"

Kunjungan pertama pengguna

Mari kita perhatikan kunjungan pertama pengguna ke aplikasi web. Belum ada service worker, dan browser tidak memiliki cara untuk mengetahui lebih dini apakah nanti akan dipasang service worker.

Sebagai developer, prioritas Anda adalah memastikan apakah browser dengan cepat mendapatkan rangkaian minimal sumber daya penting yang dibutuhkan untuk menampilkan laman interaktif. Apa saja yang memperlambat pengambilan sumber daya itu adalah musuh bagi pengalaman waktu-ke-interaktif yang cepat.

Sekarang bayangkan bahwa dalam proses pengunduhan JavaScript atau gambar yang perlu dirender oleh laman, browser Anda memutuskan untuk memulai sebuah thread atau proses latar belakang (untuk meringkasnya, anggaplah ini thread). Anggaplah Anda tidak sedang menggunakan mesin desktop yang berotot, melainkan tipe ponsel kelas bawah yang dijasikan perangkat utama oleh orang di seluruh dunia. Memulai thread ekstra ini menambah perebutan waktu CPU dan memori yang seharusnya digunakan oleh browser Anda untuk merender laman web interaktif.

Thread latar belakang yang menganggur mungkin tidak akan menghasilkan perbedaan signifikan. Namun bagaimana jika thread itu tidak menganggur, melainkan memutuskan bahwa ia juga akan mulai mengunduh sumber daya dari jaringan? Semua persoalan tentang perebutan CPU atau memori harus disisihkan dulu untuk memikirkan tentang keterbatasan bandwidth yang tersedia pada banyak perangkat seluler. Bandwidth itu berharga, jadi jangan meremehkan sumber daya penting dengan mengunduh sumber daya sekunder pada waktu yang sama.

Maksud semua ini adalah bahwa memulai thread baru service worker untuk mengunduh dan meng-cache sumber daya di latar belakang bisa membantu tujuan Anda untuk menyediakan pengalaman waktu-ke-interaktif yang tersingkat saat pertama pengguna mengunjungi situs Anda.

Memperbaiki boilerplate

Solusinya adalah mengontrol mulainya service worker dengan memilih kapan memanggil navigator.serviceWorker.register(). Aturan main sederhana adalah menunda pendaftaran hingga setelah load event 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 service worker bisa juga 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 service worker selama animasi bisa menyebabkan kelambatan pada perangkat seluler low-end. Daripada memberikan pengalaman buruk kepada pengguna, lebih baik kita tunda pendaftaran service worker hingga setelah animasi, bila browser kemungkinan besar memiliki beberapa detik waktu menganggur.

Demikian pula, jika aplikasi web Anda menggunakan kerangka kerja yang melakukan persiapan tambahan setelah laman 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 service worker pada kunjungan berulang ke situs Anda? Walaupun hal ini mungkin mengejutkan sebagian orang, seharusnya tidak ada dampaknya sama sekali.

Bila service worker telah didaftarkan, ia akan melalui kejadian daur hidup install dan activate. Setelah service worker diaktifkan, ia bisa menangani kejadian fetch untuk kunjungan selanjutnya ke aplikasi web Anda. Service worker akan dimulai sebelum membuat permintaan untuk laman apa pun yang berada dalam cakupannya, yang memang masuk akan bila dipikirkan. Jika service worker yang ada belum dijalankan sebelum mengunjungi laman, maka ia tidak akan memiliki kesempatan untuk memenuhi kejadian fetch untuk permintaan navigasi.

Jadi setelah ada service worker yang aktif, maka tidak penting kapan Anda memanggil navigator.serviceWorker.register(), atau sebenarnya, apakah Anda memanggilnya. Kecuali jika Anda mengubah URL skrip service worker, navigator.serviceWorker.register() secara efektif akan no-op selama kunjungan selanjutnya. Tidak relevan kapan memanggilnya.

Alasan untuk mendaftar dini

Adakah skenario yang membuat pendaftaran service worker sedini mungkin menjadi hal yang masuk akal? Skenario yang terlintas di benak adalah bila service worker Anda menggunakan clients.claim() untuk mengontrol laman selama kunjungan pertama, dan service worker secara agresif melakukan caching waktu proses di dalam penangan fetch -nya. Dalam situasi itu, ada untungnya membuat service worker aktif secepat mungkin, untuk mencoba mengisi cache waktu prosesnya dengan sumber daya mungkin nanti akan masuk. Jika aplikasi web Anda termasuk dalam kategori ini, ada baiknya mengambil langkah mundur untuk memastikan penangan install service worker Anda tidak meminta sumber daya yang berebut bandwidth dengan permintaan laman utama.

Menguji berbagai hal

Cara yang bagus untuk menyimulasikan kunjungan pertama adalah membuka aplikasi web Anda di jendela Samaran Chrome, dan mengamati lalu lintas 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 service worker dan cache telah terisi penuh, Anda tikdak 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 tangkapan layar diambil saat mengunjungi sebuah aplikasi contoh dalam mode Penyamaran dengan menggunakan throttling jaringan untuk menyimulasikan koneksi yang lambat.

Lalu lintas jaringan pada pendaftaran dini.

Tangkapan layar di atas mencerminkan lalu lintas jaringan bila contoh dimodifikasi untuk melakukan pendaftaran service worker sesegera mungkin. Anda bisa melihat permintaan precaching (entri dengan ikon roda gigi di sebelahnya, berasal dari penangan install service worker) diselingi dengan permintaan akan sumber daya lain yang dibutuhkan untuk menampilkan laman.

Lalu lintas jaringan dengan pendaftaran terlambat.

Dalam tangkapan layar di atas, pendaftaran service worker ditunda hingga setelah laman 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 service worker 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 service worker hingga setelah laman dimuat selama kunjungan pertama bisa membantu memastikannya. Anda tetap akan mendapatkan semua manfaat memiliki service worker untuk kunjungan berulang.

Cara praktis untuk memastikan penundaan pendaftaran pertama service worker 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');
  });
}