Cara pekerja web dan pekerja layanan dapat meningkatkan performa situs, dan kapan harus menggunakan pekerja web dibandingkan dengan pekerja layanan.
Ringkasan ini menjelaskan cara pekerja web dan pekerja layanan dapat meningkatkan performa situs, dan kapan harus menggunakan pekerja web dibandingkan dengan pekerja layanan. Lihat rangkaian ini lainnya untuk mengetahui pola komunikasi jendela dan pekerja layanan tertentu.
Cara pekerja meningkatkan kualitas situs Anda
Browser menggunakan satu thread (thread utama) untuk menjalankan semua JavaScript di halaman web, serta menjalankan tugas seperti merender halaman dan melakukan pembersihan sampah memori. Menjalankan kode JavaScript yang berlebihan dapat memblokir thread utama, sehingga menunda browser melakukan 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. Faktanya, di versi terbaru Android, memblokir thread utama terlalu lama menyebabkan error aplikasi.
Di web, JavaScript dirancang berdasarkan konsep thread tunggal, dan tidak memiliki kemampuan yang diperlukan untuk mengimplementasikan model multithreading seperti yang dimiliki aplikasi, seperti memori bersama.
Terlepas dari keterbatasan ini, pola serupa dapat dicapai di web 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 (pekerja web dan pekerja layanan), persamaan dan perbedaan mereka, serta pola yang paling umum untuk menggunakannya di {i>website<i} produksi.
Pekerja web dan pekerja layanan
Kesamaan
Pekerja web dan pekerja layanan adalah dua jenis pekerja yang tersedia untuk situs. Mereka memiliki beberapa kesamaan:
- Keduanya berjalan di thread sekunder, yang memungkinkan kode JavaScript untuk dieksekusi tanpa memblokir thread utama dan antarmuka pengguna.
- Objek tersebut tidak memiliki akses ke objek
WindowdanDocument, sehingga tidak dapat berinteraksi dengan DOM secara langsung, dan memiliki akses terbatas ke API browser.
Perbedaan
Orang mungkin berpikir bahwa sebagian besar hal yang dapat didelegasikan ke pekerja web dapat dilakukan pada pekerja layanan dan sebaliknya, tetapi ada perbedaan penting di antara mereka:
- Tidak seperti pekerja web, pekerja layanan memungkinkan Anda menangkap permintaan jaringan (melalui peristiwa
fetch) dan memproses peristiwa Push API di latar belakang (melalui peristiwapush). - Halaman dapat menghasilkan beberapa pekerja web, tetapi satu pekerja layanan mengontrol semua tab aktif dalam cakupan yang didaftarkan.
- Masa pakai pekerja web dikaitkan erat dengan tab yang memilikinya, sedangkan siklus proses pekerja layanan tidak bergantung padanya. Oleh karena itu, menutup tab tempat pekerja web sedang berjalan akan menghentikannya, sementara pekerja layanan dapat terus berjalan di latar belakang, meskipun situs tidak memiliki tab aktif yang terbuka.
Kasus penggunaan
Perbedaan antara kedua jenis pekerja ini mengindikasikan dalam situasi mana seseorang mungkin ingin menggunakan salah satunya:
Kasus penggunaan untuk pekerja web lebih sering terkait dengan memindahkan 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 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 caching dan offline.
Contoh: Di PWA podcast, seseorang mungkin ingin mengizinkan pengguna mendownload episode lengkap untuk mendengarkannya 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 perlu terganggu.
Alat dan library
Komunikasi jendela dan pekerja dapat diimplementasikan menggunakan API dengan tingkat yang lebih rendah yang berbeda. Untungnya, ada library yang memisahkan proses ini, yang menangani kasus penggunaan paling umum. Di bagian ini, kita akan membahas dua di antaranya yang menangani jendela untuk pekerja web dan pekerja layanan, masing-masing: Comlink dan Workbox.
Comlink
Comlink adalah library RPC (1,6 ribu) kecil yang menangani banyak detail dasar saat membuat situs yang menggunakan Pekerja Web. Metode ini telah digunakan di situs seperti PROXX dan Squoosh. Ringkasan motivasi dan contoh kodenya dapat ditemukan di sini.
Workbox
Workbox adalah library populer untuk membuat situs
yang menggunakan pekerja layanan. Modul ini mengemas serangkaian praktik terbaik untuk hal-hal seperti caching, offline,
sinkronisasi latar belakang, dll. Modul workbox-window memberikan
cara yang mudah untuk bertukar pesan antara pekerja layanan dan halaman.
Langkah berikutnya
Bagian selanjutnya dari rangkaian ini berfokus pada pola untuk komunikasi jendela dan pekerja layanan:
- Panduan penyimpanan cache implisit: Memanggil pekerja layanan dari halaman untuk meng-cache resource terlebih dahulu (mis. dalam skenario pengambilan data).
- Update siaran: Memanggil halaman dari pekerja layanan untuk menginformasikan update penting (mis., versi baru situs tersedia).
- Komunikasi dua arah: Mendelegasikan tugas kepada pekerja layanan (misalnya, download yang berat), dan memberi tahu halaman tentang progresnya.
Untuk pola komunikasi jendela dan pekerja web, lihat: Menggunakan pekerja web untuk menjalankan JavaScript di luar thread utama browser.