Pendaftaran pekerja layanan

Praktik terbaik untuk pengaturan waktu pendaftaran pekerja layanan Anda.

Jeff Posnick

Pekerja layanan dapat mempercepat kunjungan berulang ke aplikasi web Anda 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 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');
}

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 kecil 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 download JavaScript atau gambar yang perlu dirender, browser memutuskan untuk memulai thread atau proses latar belakang (untuk singkatnya, kita asumsikan itu thread). Asumsikan bahwa Anda tidak menggunakan mesin desktop yang canggih, melainkan jenis ponsel yang tidak canggih yang dianggap banyak orang di dunia sebagai perangkat utama. 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 aktivitas cenderung tidak membuat 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.

Artinya, menjalankan thread pekerja layanan baru untuk mendownload dan meng-cache resource di latar belakang dapat bertentangan dengan sasaran Anda, yaitu memberikan pengalaman waktu interaktif tersingkat saat pertama kali pengguna mengunjungi situs Anda.

Meningkatkan kualitas boilerplate

Solusinya adalah mengontrol mulainya pekerja layanan dengan memilih kapan harus memanggil navigator.serviceWorker.register(). Aturan sederhananya 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 apakah aplikasi web Anda berfungsi dengan baik setelah dimuat. Misalnya, aplikasi web Google I/O 2016 menampilkan animasi pendek 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() pada dasarnya adalah tanpa pengoperasian selama kunjungan berikutnya. Tidak relevan kapan dipanggil.

Alasan untuk mendaftar lebih awal

Apakah ada skenario yang membuat pendaftaran pekerja layanan sedini mungkin menjadi langkah yang masuk akal? Salah satu yang terlintas dalam pikiran 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 itu, ada manfaat membuat pekerja layanan aktif secepat mungkin, untuk mencoba mengisi cache runtime-nya dengan resource yang mungkin 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 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 menggambarkan perbedaan yang dapat dihasilkan oleh 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 precaching (entri dengan ikon roda gigi di sampingnya, berasal dari pengendali install pekerja layanan) yang diselingi dengan permintaan untuk resource lain yang diperlukan untuk menampilkan halaman.

Dalam 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 untuk bandwidth. Selain itu, karena beberapa item yang dipra-cache sudah ada di cache HTTP browser—item dengan (from disk cache) dalam kolom Ukuran—kita dapat mengisi cache pekerja layanan tanpa harus masuk ke 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 mudah untuk memastikan penundaan pendaftaran awal pekerja layanan hingga setelah halaman pertama dimuat adalah dengan menggunakan hal berikut:

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