Sebagai pengembang web, salah satu yang harus kita lakukan adalah memastikan web yang kita bangun dapat berjalan dengan sangat baik dan berperforma tinggi, karena waktu dan pengalaman Pengguna adalah yang terpenting.
Tantangan untuk Pengembang web akan mulai terjadi ketika kita memiliki suatu fitur yang memang membutuhkan waktu pemrosesan yang panjang, misal: pengelolaan data yang sangat besar (import/export excel yang di dalamnya ada transformasi, validasi dll), pemrosesan gambar dan video (kompresi, penerapan filter, pengenalan object menggunakan Machine Learning), dll. Agar web kita masih bisa digunakan ketika proses tersebut sedang berlangsung, kita perlu menjalankan proses nya di belakang, untuk itu mari kita berkenalan dengan Web Worker.
Pengenalan
Web Worker adalah Web API yang dapat kita gunakan untuk menjalankan suatu script di belakang, script ini akan dijalankan di thread yang berbeda dari thread utama yang digunakan untuk menjalan aplikasi web.
Karena proses nya berjalan secara independent, worker thread dan main thread tidak akan saling mengganggu satu sama lain. Kita dapat memanfaatkan web worker ini untuk menjalankan task yang berat dan memakan waktu yang panjang untuk berjalan di belakang, jadi Pengguna tetap bisa menggunakan web kita seperti biasa tanpa perlu menunggu proses yang lama tersebut selesai.
Cara Menggunakan
Kita dapat menggunakan Web Worker dengan cara menginisiasi Worker Object Worker(/path/to/worker.js), worker.js berisi code yang akan kita jalankan di worker thread. Kita hampir bisa melakukan apapun di web worker, kecuali beberapa hal yaitu memanipulasi DOM secara langsung dan mengakses window Object, karena worker berjalan di global context yang berbeda (WorkerGlobalScope), sebagai gantinya, kita bisa menggunakan self. Untuk list function dan web api yang bisa digunakan bisa di cek di supported functions, and supported Web APIs.
Seperti yang sudah dibahas di paragraf sebelumnya, worker thread dan main thread berjalan secara independent, lalu bagaimana cara nya mereka berinteraksi? Mereka berinteraksi dengan cara bertukar pesan melalui function untuk mengirim pesan dan untuk menerima pesan.
Implementasi
Mari kita coba dengan contoh sederhana terlebih dahulu untuk tau konsep nya, berikut terlampir code dan .
Hasil nya seperti gambar di bawah ini, ketika button "Start Heavy Task" diklik, Web worker mulai mengerjakan task nya, pertama, di sebelah button akan muncul text bertuliskan "Starting the heavy task...", lalu 3 detik kemudian text akan berganti menjadi "Task finished".
Mari kita coba implementasi yang lebih "nyata", saya menggunakan React, Web Worker dan Zustand. saya menggunakan Zustand untuk menjalankan Worker (inisiasi, mengirim dan menerima message, download csv dan memunculkan notifikasi ke Pengguna), saya lakukan semuanya di store agar kita bisa trigger worker dan menerima notifikasi di halaman manapun. Berikut lampiran code nya. Full Code
Hasil nya seperti video di bawah ini, seperti yang kita lihat, saya bebas berpindah-pindah halaman atau melakukan apapun ketika proses Export CSV sedang berjalan, karena proses nya berjalan di belakang.
Sebuah pengalaman Pengguna yang bagus bukan? semoga bermanfaat.