Cara web worker dan service worker dapat meningkatkan performa situs Anda, dan kapan harus menggunakan web worker versus service worker.
Ringkasan ini menjelaskan cara web worker dan pekerja layanan dapat meningkatkan performa situs Anda, serta kapan harus menggunakan web worker versus pekerja layanan. Lihat bagian lain dari seri ini untuk pola komunikasi jendela dan pekerja 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 memori. Menjalankan kode JavaScript yang berlebihan dapat memblokir thread utama, sehingga menunda browser dalam melakukan tugas-tugas ini dan menyebabkan pengalaman pengguna yang buruk.
Dalam pengembangan aplikasi iOS/Android, pola umum untuk memastikan bahwa thread utama aplikasi tetap bebas merespons peristiwa pengguna adalah dengan mengalihkan operasi ke thread tambahan. Bahkan, di versi terbaru Android, memblokir thread utama terlalu lama akan menyebabkan aplikasi error.
Di web, JavaScript dirancang berdasarkan konsep thread tunggal, 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 worker untuk menjalankan skrip di thread latar belakang, sehingga memungkinkan worker melakukan tugas tanpa mengganggu thread utama. Worker adalah cakupan JavaScript lengkap yang berjalan di thread terpisah, tanpa memori bersama.
Dalam postingan ini, Anda akan mempelajari dua jenis worker yang berbeda (web worker dan service worker), persamaan dan perbedaannya, serta pola paling umum untuk menggunakannya di situs produksi.
Pekerja web dan pekerja layanan
Persamaan
Web worker dan service worker adalah dua jenis worker 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.
- Skrip ini tidak memiliki akses ke objek
WindowdanDocument, sehingga tidak dapat berinteraksi dengan DOM secara langsung, dan memiliki akses terbatas ke API browser.
Perbedaan
Seseorang mungkin berpikir bahwa sebagian besar hal yang dapat didelegasikan ke web worker dapat dilakukan di service worker dan sebaliknya, tetapi ada perbedaan penting di antara keduanya:
- Tidak seperti web worker, pekerja layanan memungkinkan Anda mencegat permintaan jaringan (melalui
peristiwa
fetch) dan memproses peristiwa Push API di latar belakang (melalui peristiwapush). - Halaman dapat menghasilkan beberapa web worker, tetapi satu pekerja layanan mengontrol semua tab aktif di bawah cakupan tempatnya terdaftar.
- Masa aktif web worker terkait erat dengan tab tempatnya berada, sedangkan siklus proses service worker tidak bergantung padanya. Oleh karena itu, menutup tab tempat web worker berjalan akan menghentikannya, sedangkan pekerja layanan dapat terus berjalan di latar belakang, bahkan saat situs tidak memiliki tab aktif yang terbuka.
Kasus penggunaan
Perbedaan antara kedua jenis worker menunjukkan situasi yang mungkin memerlukan penggunaan salah satu atau keduanya:
Kasus penggunaan untuk web worker lebih sering terkait dengan pengalihan pekerjaan (seperti komputasi berat) ke thread sekunder, untuk menghindari pemblokiran UI.
- Contoh: tim yang membuat video game PROXX ingin membiarkan thread utama sebebas mungkin untuk menangani input dan animasi pengguna. Untuk mencapainya, mereka menggunakan web worker untuk menjalankan logika game dan pemeliharaan status di thread terpisah.
Tugas service worker umumnya lebih terkait dengan bertindak sebagai proxy jaringan, menangani tugas latar belakang, dan hal-hal seperti caching dan offline.
Contoh: Dalam PWA podcast, seseorang mungkin ingin mengizinkan pengguna mendownload episode lengkap untuk didengarkan saat offline. Service worker, dan, khususnya, Background Fetch API dapat digunakan untuk tujuan tersebut. Dengan begitu, jika pengguna menutup tab saat episode sedang didownload, tugas tidak akan terganggu.
Alat dan library
Komunikasi jendela dan worker dapat diimplementasikan menggunakan berbagai API level rendah. Untungnya, ada library yang mengabstraksi proses ini, yang menangani kasus penggunaan yang paling umum. Di bagian ini, kita akan membahas dua di antaranya yang menangani window ke web worker dan service worker: Comlink dan Workbox.
Comlink
Comlink adalah library RPC kecil (1,6k) yang menangani banyak detail mendasar saat membangun situs yang menggunakan Web Worker. Library ini telah digunakan di situs seperti PROXX dan Squoosh. Ringkasan motivasi dan contoh kodenya dapat ditemukan di sini.
Workbox
Workbox adalah library populer untuk membangun situs
yang menggunakan pekerja layanan. Modul ini mengemas serangkaian praktik terbaik seputar hal-hal seperti caching, offline,
sinkronisasi latar belakang, dll. Modul workbox-window menyediakan
cara yang mudah untuk bertukar pesan antara pekerja layanan dan halaman.
Langkah berikutnya
Bagian selanjutnya dari seri ini berfokus pada pola komunikasi jendela dan pekerja layanan:
- Panduan caching imperatif: Memanggil pekerja layanan dari halaman untuk meng-cache resource terlebih dahulu (misalnya, dalam skenario pengambilan data).
- Menyiarkan 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 berat), dan terus memberi tahu halaman tentang progresnya.
Untuk pola komunikasi jendela dan web worker, lihat: Menggunakan web worker untuk menjalankan JavaScript di luar thread utama browser.