Ringkasan pekerja

Cara pekerja web dan pekerja layanan dapat meningkatkan performa situs Anda, dan kapan harus menggunakan pekerja web versus pekerja layanan.

Andrew Guan

Demián Renzulli

Ringkasan ini menjelaskan cara pekerja web dan pekerja layanan dapat meningkatkan performa situs Anda, dan kapan harus menggunakan pekerja web versus pekerja layanan. Lihat rangkaian ini selengkapnya untuk mengetahui pola komunikasi pekerja jendela dan layanan tertentu.

Cara pekerja dapat meningkatkan kualitas situs Anda

Browser menggunakan satu thread (thread utama) untuk menjalankan semua JavaScript di halaman web, serta untuk melakukan tugas seperti merender halaman dan melakukan pembersihan sampah. Menjalankan kode JavaScript yang berlebihan dapat memblokir thread utama, sehingga menunda browser untuk melakukan tugas ini dan menyebabkan pengalaman pengguna yang buruk.

Dalam pengembangan aplikasi iOS/Android, pola umum untuk memastikan bahwa thread utama aplikasi tetap bebas untuk merespons peristiwa pengguna adalah dengan men-offload operasi ke thread tambahan. Bahkan, di versi Android terbaru, memblokir thread utama terlalu lama akan menyebabkan error aplikasi.

Di web, JavaScript dirancang berdasarkan konsep satu thread, dan tidak memiliki kemampuan yang diperlukan untuk menerapkan model multithreading seperti yang dimiliki aplikasi, seperti memori bersama.

Meskipun ada batasan ini, pola serupa dapat dicapai di web dengan menggunakan pekerja untuk menjalankan skrip di thread latar belakang, sehingga memungkinkan mereka melakukan tugas tanpa mengganggu thread utama. Pekerja adalah seluruh cakupan JavaScript yang berjalan di thread terpisah, tanpa memori bersama.

Dalam postingan ini, Anda akan mempelajari dua jenis pekerja yang berbeda (web worker dan service worker), kesamaan dan perbedaannya, serta pola paling umum untuk menggunakannya di situs produksi.

Pekerja web dan pekerja layanan

Persamaan

Pekerja web dan pekerja layanan adalah dua jenis pekerja yang tersedia untuk situs. Keduanya memiliki beberapa kesamaan:

• Keduanya berjalan di thread sekunder, sehingga kode JavaScript dapat dieksekusi tanpa memblokir thread utama dan antarmuka pengguna.
• Objek ini tidak memiliki akses ke objek Window dan Document, sehingga tidak dapat berinteraksi dengan DOM secara langsung, dan memiliki akses terbatas ke API browser.

Perbedaan

Anda mungkin berpikir bahwa sebagian besar hal yang dapat didelegasikan ke pekerja web dapat dilakukan di pekerja layanan dan sebaliknya, tetapi ada perbedaan penting di antara keduanya:

• Tidak seperti pekerja web, pekerja layanan memungkinkan Anda mencegat permintaan jaringan (melalui peristiwa fetch) dan memproses peristiwa Push API di latar belakang (melalui peristiwa push).
• Halaman dapat membuat beberapa pekerja web, tetapi satu pekerja layanan mengontrol semua tab aktif di bawah cakupan tempat pekerja tersebut didaftarkan.
• Masa aktif pekerja web terikat erat dengan tab tempatnya berada, sedangkan siklus proses pekerja layanan tidak bergantung pada tab tersebut. Oleh karena itu, menutup tab tempat pekerja web berjalan akan menghentikannya, sedangkan pekerja layanan dapat terus berjalan di latar belakang, meskipun situs tidak memiliki tab aktif yang terbuka.

Kasus penggunaan

Perbedaan antara kedua jenis pekerja menunjukkan situasi yang mungkin ingin menggunakan salah satu pekerja tersebut:

Kasus penggunaan untuk pekerja web biasanya lebih terkait dengan pemindahan tugas (seperti komputasi berat) ke thread sekunder, untuk menghindari pemblokiran UI.

• Contoh: tim yang membuat videogame PROXX ingin membuat thread utama sekosong mungkin untuk menangani input dan animasi pengguna. Untuk mencapainya, mereka menggunakan pekerja web untuk menjalankan logika game dan pemeliharaan status di thread terpisah.

Tugas pekerja layanan umumnya lebih terkait dengan bertindak sebagai proxy jaringan, menangani tugas latar belakang, dan hal-hal seperti penyimpanan dalam cache dan offline.

Contoh: Di PWA podcast, Anda mungkin ingin mengizinkan pengguna mendownload episode lengkap untuk didengarkan saat offline. Pekerja layanan, dan, khususnya, Background Fetch API dapat digunakan untuk tujuan tersebut. Dengan demikian, jika pengguna menutup tab saat episode sedang didownload, tugas tidak akan terganggu.

Alat dan library

Komunikasi jendela dan pekerja dapat diimplementasikan menggunakan API level yang lebih rendah. Untungnya, ada library yang memisahkan proses ini, yang menangani kasus penggunaan yang paling umum. Di bagian ini, kita akan membahas dua di antaranya yang menangani window ke pekerja web dan pekerja layanan masing-masing: Comlink dan Workbox.

Comlink

Comlink adalah library RPC kecil (1,6 k) yang menangani banyak detail yang mendasari saat mem-build situs yang menggunakan Web Worker. Format ini telah digunakan di situs seperti PROXX dan Squoosh. Ringkasan motivasinya dan contoh kode dapat ditemukan di sini.

Workbox

Workbox adalah library populer untuk membuat situs yang menggunakan pekerja layanan. Library ini memaketkan serangkaian praktik terbaik seputar hal-hal seperti penyimpanan dalam cache, offline, sinkronisasi latar belakang, dll. Modul workbox-window menyediakan cara yang mudah untuk bertukar pesan antara pekerja layanan dan halaman.

Langkah berikutnya

Bagian lainnya dari seri ini berfokus pada pola untuk komunikasi pekerja jendela dan layanan:

• Panduan penyimpanan dalam cache imperatif: Memanggil pekerja layanan dari halaman untuk menyimpan resource dalam cache terlebih dahulu (misalnya, dalam skenario pengambilan data sebelumnya).
• Menyebarkan update: Memanggil halaman dari pekerja layanan untuk menginformasikan update penting (misalnya, versi baru situs tersedia).
• Komunikasi dua arah: Mendelegasikan tugas ke pekerja layanan (misalnya, download yang berat), dan terus memberi tahu halaman tentang progresnya.

Untuk pola komunikasi pekerja web dan jendela, lihat: Menggunakan pekerja web untuk menjalankan JavaScript dari thread utama browser.