Pendaftaran pekerja layanan

Praktik terbaik untuk pengaturan waktu pendaftaran pekerja layanan Anda.

Jeff Posnick

Layanan pekerja dapat mempercepat kunjungan berulang ke aplikasi web Anda, tetapi Anda harus langkah untuk memastikan bahwa instalasi awal pekerja layanan tidak menurunkan pengalaman kunjungan pertama pengguna.

Umumnya, menangguhkan pekerja layanan pendaftaran 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 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 pembaruan 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 pada navigator.serviceWorker.register? Apakah ada praktik terbaik yang harus diikuti? Tidak mengherankan (asalkan 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 {i>browser<i} tidak memiliki cara untuk mengetahui lebih awal apakah akan ada layanan yang akan diinstal.

Sebagai developer, prioritas Anda adalah memastikan bahwa browser cepat mendapatkan serangkaian sumber daya penting minimal yang diperlukan untuk menampilkan kami. Apa pun yang memperlambat pengambilan respons tersebut adalah musuh pengalaman waktu-ke-interaktif yang cepat.

Sekarang bayangkan bahwa pada proses mengunduh JavaScript atau gambar yang halaman harus dirender, browser memutuskan untuk memulai thread latar belakang atau (untuk singkatnya, kita anggap itu adalah thread). Asumsikan bahwa Anda tidak menggunakan mesin {i>desktop<i} yang besar, melainkan jenis perangkat yang kurang bertenaga ponsel yang oleh banyak orang di dunia menganggap perangkat utama mereka. Berputar ke atas thread tambahan ini menambahkan pertentangan waktu CPU dan memori yang digunakan untuk merender halaman web interaktif.

Thread latar belakang yang tidak ada aktivitas cenderung tidak membuat perbedaan yang signifikan. Tapi apa yang jika thread tersebut tidak sedang tidak ada aktivitas, tetapi justru memutuskan bahwa thread tersebut juga akan dimulai mendownload resource dari jaringan? Masalah apa pun tentang CPU atau memori pertentangan harus mulai mengkhawatirkan tentang keterbatasan {i>bandwidth<i} tersedia di banyak perangkat seluler. Bandwidth sangat berharga, jadi jangan merusak sumber daya penting dengan mengunduh sumber daya sekunder pada saat bersamaan.

Semua ini menunjukkan bahwa menjalankan thread pekerja layanan baru untuk mendownload dan sumber daya {i>cache<i} di latar belakang dapat berfungsi terhadap tujuan Anda dalam menyediakan pengalaman waktu-interaktif tersingkat saat pengguna pertama kali mengunjungi situs Anda.

Meningkatkan kualitas boilerplate

Solusinya adalah dengan mengontrol start pekerja layanan dengan memilih kapan harus memanggil navigator.serviceWorker.register(). Aturan praktisnya adalah menunda pendaftaran hingga setelah load event diaktifkan pada window, seperti ini:

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

Tetapi waktu yang tepat untuk memulai pendaftaran pekerja layanan juga dapat bergantung pada mengetahui apa yang dilakukan aplikasi web Anda setelah dimuat. Misalnya, Google I/O Aplikasi web 2016 menampilkan animasi pendek sebelum beralih ke layar utama. Tim kami menemukan tendangan pendaftaran pekerja layanan selama animasi dapat menyebabkan jank pada perangkat seluler kelas bawah. Alih-alih memberikan pengalaman buruk kepada pengguna, kami terlambat pendaftaran pekerja layanan hingga setelah animasi, saat browser paling mungkin memiliki beberapa detik tidak ada aktivitas.

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

Kunjungan berikutnya

Hingga saat ini, kami berfokus pada pengalaman kunjungan pertama, tetapi apa dampaknya apakah pendaftaran pekerja layanan tertunda pada kunjungan berulang ke situs Anda? Meskipun mungkin mengejutkan sebagian orang, seharusnya tidak ada dampak sama sekali.

Setelah didaftarkan, pekerja layanan akan melalui install dan activate siklus proses peristiwa. Setelah diaktifkan, pekerja layanan dapat menangani peristiwa fetch untuk semua kunjungan selanjutnya ke aplikasi web Anda. Pekerja layanan dimulai sebelum untuk laman apa pun yang berada dalam cakupannya dibuat, yang masuk akal ketika Anda berpikir lebih lanjut. Jika pekerja layanan yang ada belum berjalan sebelum mengunjungi halaman, pengguna tidak akan berkesempatan memenuhi peristiwa fetch untuk terhadap permintaan navigasi.

Jadi setelah ada pekerja layanan yang aktif, tidak masalah kapan Anda memanggil navigator.serviceWorker.register(), atau sebenarnya, baik Anda memanggilnya. Kecuali Anda mengubah URL skrip pekerja layanan, navigator.serviceWorker.register() pada dasarnya adalah tanpa pengoperasian selama kunjungan berikutnya. Kapan tidak relevan.

Alasan mendaftar lebih awal

Apakah ada skenario ketika mendaftarkan pekerja layanan Anda sedini mungkin masuk akal? Salah satu yang terlintas dalam pikiran adalah ketika pekerja layanan Anda menggunakan clients.claim() untuk mengendalikan halaman selama kunjungan pertama, dan pekerja layanan menjalankan runtime secara agresif penyimpanan dalam cache di dalam pengendali fetch-nya. Dalam situasi tersebut, ada keuntungan untuk membuat pekerja layanan aktif secepat mungkin, untuk mencoba mengisi {i>cache<i} runtime-nya dengan sumber daya 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 memperebutkan bandwidth dengan permintaan halaman utama.

Menguji berbagai hal

Cara yang bagus untuk menyimulasikan kunjungan pertama adalah dengan membuka aplikasi web Anda di Chrome Samaran jendela, dan melihat traffic jaringan di halaman DevTools. Sebagai web Anda, Anda mungkin memuat ulang instance lokal lusinan aplikasi web Anda dan puluhan kali sehari. Tetapi dengan mengunjungi kembali situs Anda ketika sudah ada pekerja layanan dan cache yang terisi penuh, Anda tidak akan mendapatkan pengalaman yang sama dialami pengguna baru, dan masalah potensial mudah diabaikan.

Berikut ini contoh yang menggambarkan perbedaan waktu pendaftaran buat. Kedua screenshot diambil saat membuka contoh aplikasi di Mode Samaran menggunakan throttling jaringan untuk menyimulasikan koneksi yang lambat.

Screenshot di atas mencerminkan traffic jaringan saat contoh diubah untuk melakukan pendaftaran pekerja layanan sesegera mungkin. Anda dapat melihat permintaan precaching (entri dengan paket gear ikon di sampingnya, yang berasal dari pengendali install pekerja layanan) diselingi dengan permintaan sumber daya lain yang diperlukan untuk menampilkan halaman.

Dalam screenshot di atas, pendaftaran pekerja layanan ditunda sampai setelah halaman telah dimuat. Anda dapat melihat bahwa permintaan precaching tidak dimulai sampai sumber daya telah diambil dari jaringan, menghilangkan pertentangan {i>bandwidth<i}. Selain itu, karena beberapa item yang kita pra-cache sudah ada di cache HTTP browser—item dengan (from disk cache) dalam ukuran — kita dapat mengisi cache pekerja layanan tanpa harus membuka jaringan Anda lagi.

Anda akan mendapatkan bonus jika menjalankan pengujian semacam ini dari perangkat kelas bawah yang sebenarnya pada jaringan seluler yang sebenarnya. Anda dapat memanfaatkan proses debug jarak jauh di Chrome kemampuan memasang ponsel Android ke komputer desktop melalui USB, dan pastikan bahwa pengujian yang Anda jalankan sebenarnya mencerminkan pengalaman dunia nyata dari pengguna.

Kesimpulan

Ringkasnya, memastikan bahwa pengguna Anda memiliki pengalaman kunjungan pertama yang terbaik harus menjadi prioritas utama. Menunda pendaftaran pekerja layanan hingga setelah yang telah dimuat selama kunjungan awal dapat membantu memastikan hal tersebut. Anda masih akan mendapatkan semua manfaat memiliki pekerja layanan untuk kunjungan berulang Anda.

Cara mudah untuk memastikan penundaan awal pekerja layanan pendaftaran hingga halaman pertama dimuat adalah menggunakan:

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