Pendaftaran pekerja layanan

Praktik terbaik untuk pengaturan waktu pendaftaran pekerja layanan Anda.

Jeff Posnick

Pekerja layanan dapat mempercepat kunjungan berulang ke aplikasi web secara signifikan, tetapi Anda harus mengambil langkah-langkah untuk memastikan bahwa penginstalan awal pekerja layanan tidak menurunkan kualitas pengalaman kunjungan pertama pengguna.

Umumnya, 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 pernah membaca tentang pekerja layanan, Anda mungkin pernah menemukan boilerplate yang secara substansial 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. Namun, semua itu hanya variasi minor pada beberapa baris kode standar.

Jadi, apakah ada perbedaan kecil pada navigator.serviceWorker.register? Adakah praktik terbaik yang harus 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 pun yang memperlambat pengambilan respons tersebut adalah musuh bagi pengalaman waktu-ke-interaktif yang cepat.

Sekarang bayangkan bahwa dalam proses mendownload 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 menggunakan mesin desktop yang canggih, melainkan jenis ponsel kelas bawah yang banyak dijadikan perangkat utama oleh orang di seluruh dunia. Memulai thread tambahan ini akan menambah pertentangan untuk waktu CPU dan memori yang seharusnya digunakan oleh browser Anda untuk merender halaman web interaktif.

Thread latar belakang yang tidak ada aktivitasnya mungkin tidak akan menghasilkan perbedaan yang signifikan. Namun, bagaimana jika thread tersebut tidak menganggur, tetapi 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.

Meningkatkan boilerplate

Solusinya adalah mengontrol mulainya pekerja layanan dengan memilih kapan akan memanggil navigator.serviceWorker.register(). Aturan mudahnya 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 tepat 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 di perangkat seluler low-end. Alih-alih memberikan pengalaman buruk kepada pengguna, kami menunda pendaftaran pekerja layanan hingga setelah animasi, saat browser kemungkinan besar memiliki beberapa detik waktu menganggur.

Demikian pula, jika aplikasi web Anda menggunakan framework yang melakukan penyiapan tambahan setelah halaman dimuat, cari peristiwa khusus framework yang memberi sinyal saat pekerjaan tersebut selesai.

Kunjungan berikutnya

Hingga sekarang kita sedang memfokuskan pada pengalaman kunjungan pertama, namun bagaimana dampak penundaan pendaftaran pekerja layanan pada kunjungan berulang ke situs Anda? Meskipun hal ini mungkin mengejutkan sebagian orang, seharusnya tidak ada dampaknya sama sekali.

Saat 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 dimulai sebelum permintaan untuk halaman apa pun dalam cakupannya dibuat, yang memang sesuai jika Anda memikirkannya. Jika pekerja layanan yang ada belum berjalan sebelum mengunjungi halaman, pekerja layanan tersebut 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 sebenarnya, apakah Anda memanggilnya. Kecuali jika Anda mengubah URL skrip pekerja layanan, navigator.serviceWorker.register() secara efektif menjadi tidak ada operasi selama kunjungan berikutnya. Kapan dipanggil tidak relevan.

Alasan untuk mendaftar lebih awal

Adakah skenario yang membuat pendaftaran pekerja layanan sedini mungkin menjadi hal yang masuk akal? Salah satu yang terlintas di benak adalah saat pekerja layanan Anda menggunakan clients.claim() untuk mengontrol halaman selama kunjungan pertama, dan pekerja layanan secara agresif melakukan caching runtime di dalam pengendali fetch-nya. Dalam situasi itu, ada manfaat membuat pekerja layanan aktif secepat mungkin, untuk mencoba mengisi cache runtime-nya dengan resource yang mungkin akan berguna nanti. 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 melihat traffic jaringan di Chrome DevTools. Sebagai developer web, Anda mungkin memuat ulang instance lokal aplikasi web puluhan dan puluhan kali sehari. Namun, dengan mengunjungi ulang situs Anda saat sudah ada pekerja layanan dan cache yang terisi penuh, Anda tidak mendapatkan pengalaman yang sama dengan yang akan didapat pengguna baru, dan masalah potensial mudah terabaikan.

Berikut adalah contoh yang mengilustrasikan perbedaan yang dapat dihasilkan oleh pengaturan waktu pendaftaran. Kedua screenshot diambil saat mengunjungi aplikasi contoh dalam mode Samaran menggunakan throttling jaringan untuk menyimulasikan koneksi yang lambat.

Screenshot di atas mencerminkan traffic jaringan saat sampel diubah untuk melakukan pendaftaran pekerja layanan sesegera mungkin. Anda dapat melihat permintaan pra-caching (entri dengan ikon gear di sampingnya, yang berasal dari pengendali install pekerja layanan) diselingi dengan permintaan untuk resource lain yang diperlukan untuk menampilkan halaman.

Dalam screenshot di atas, pendaftaran pekerja layanan ditunda hingga setelah halaman dimuat. Anda dapat melihat bahwa permintaan pra-caching tidak dimulai hingga semua resource diambil dari jaringan, sehingga menghilangkan pertentangan untuk bandwidth. Selain itu, karena beberapa item yang kita pra-cache sudah ada dalam cache HTTP browser—item dengan (from disk cache) di kolom Ukuran—kita dapat mengisi cache pekerja layanan tanpa harus membuka jaringan lagi.

Anda akan dapat bonus jika menjalankan pengujian semacam ini dari perangkat low-end sungguhan pada jaringan seluler sesungguhnya. Anda dapat memanfaatkan kemampuan proses debug jarak jauh Chrome untuk menghubungkan ponsel Android ke mesin desktop melalui USB, dan memastikan bahwa pengujian yang Anda jalankan benar-benar mencerminkan pengalaman sebenarnya 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 halaman dimuat selama kunjungan awal dapat membantu memastikannya. Anda tetap akan mendapatkan semua manfaat memiliki pekerja layanan untuk kunjungan berulang.

Cara praktis untuk memastikan penundaan pendaftaran awal pekerja layanan Anda hingga setelah halaman pertama dimuat adalah menggunakan yang berikut ini:

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js');
    });
}