Shared Workers: Membangun Aplikasi Web Multitab yang Efisien dan Konsisten

1. Pendahuluan

Di era aplikasi web modern, tidak jarang pengguna membuka aplikasi yang sama di beberapa tab browser sekaligus. Bayangkan Anda sedang berbelanja online, lalu membuka beberapa produk di tab berbeda. Atau, Anda menggunakan aplikasi chat, dan tanpa sengaja membuka dua jendela chat yang sama. Apa yang terjadi jika Anda melakukan sesuatu di satu tab, tapi tab lain tidak ikut terupdate? Atau bagaimana jika setiap tab harus melakukan fetching data yang sama berulang kali, menghabiskan resource dan bandwith?

Masalah konsistensi state, efisiensi resource, dan komunikasi antar tab adalah tantangan nyata dalam pengembangan aplikasi web multitab. Di sinilah Shared Workers datang sebagai pahlawan.

Shared Worker adalah jenis Web Worker khusus yang memungkinkan satu instance worker dibagikan (shared) di antara beberapa konteks penjelajahan (seperti tab, jendela, atau iframe) dari origin yang sama. Ini berarti Anda bisa memiliki satu “otak” di latar belakang yang mengelola logika atau state untuk semua tab aplikasi Anda, alih-alih setiap tab memiliki “otaknya” sendiri yang bekerja secara independen. Hasilnya? Aplikasi yang lebih efisien, konsisten, dan responsif.

Artikel ini akan membawa Anda menyelami Shared Workers, memahami cara kerjanya, kapan harus menggunakannya, dan bagaimana mengimplementasikannya dalam proyek Anda dengan contoh konkret. Mari kita mulai!

2. Apa Itu Shared Worker dan Bagaimana Cara Kerjanya?

Secara sederhana, Shared Worker adalah skrip JavaScript yang berjalan di latar belakang, terpisah dari thread utama browser (UI thread). Bedanya dengan Dedicated Worker, yang hanya bisa diakses oleh skrip yang membuatnya, Shared Worker bisa diakses oleh beberapa skrip dari origin yang sama.

📌 Analogi: Bayangkan Anda memiliki sebuah tim kerja.

• Tanpa Worker: Semua pekerjaan (UI dan logika berat) dilakukan oleh satu orang. Jika ada tugas berat, UI bisa nge-freeze.
• Dedicated Worker: Setiap tab browser punya asisten pribadinya sendiri. Asisten ini mengerjakan tugas berat di balik layar, sehingga orang utama (UI) tetap responsif. Tapi kalau ada 5 tab, berarti ada 5 asisten yang mungkin mengerjakan hal yang sama.
• Shared Worker: Anda punya satu manajer pusat yang cerdas. Semua asisten dari berbagai tab bisa meminta bantuan atau memberikan informasi kepada manajer ini. Manajer ini bisa mengkoordinasikan tugas, menyimpan informasi penting yang perlu diketahui semua asisten, dan memastikan semua asisten bekerja dengan informasi yang sama.

Bagaimana cara kerjanya? Ketika sebuah halaman web membuat instance SharedWorker, browser akan memeriksa apakah ada Shared Worker yang sudah aktif dengan URL skrip yang sama dan origin yang sama.

• Jika belum ada, browser akan membuat instance Shared Worker baru dan menjalankannya.
• Jika sudah ada, browser akan menggunakan instance yang sudah berjalan tersebut.

Komunikasi antara halaman web (atau konteks browsing lainnya) dan Shared Worker terjadi melalui objek MessagePort. Setiap kali sebuah konteks terhubung ke Shared Worker, sebuah MessagePort baru akan dibuat. Worker akan menerima event onconnect yang berisi port ini. Melalui port inilah pesan bisa dikirim (postMessage) dan diterima (onmessage) secara dua arah.

// shared-worker.js
let connectedPorts = []; // Menyimpan semua port yang terhubung

self.onconnect = function(e) {
  const port = e.ports[0];
  connectedPorts.push(port); // Tambahkan port baru ke daftar

  console.log(`Shared Worker: Sebuah tab baru terhubung. Total tab: ${connectedPorts.length}`);

  port.onmessage = function(event) {
    const message = event.data;
    console.log(`Shared Worker menerima pesan: ${message}`);

    // Contoh: Kirim pesan yang sama ke semua tab yang terhubung
    connectedPorts.forEach(p => {
      p.postMessage(`Pesan dari worker: ${message.toUpperCase()} (dikirim ke semua)`);
    });
  };

  // Kirim pesan inisial ke tab yang baru terhubung
  port.postMessage("Selamat datang! Anda terhubung ke Shared Worker.");
};

3. Shared Worker vs. Dedicated Worker vs. Broadcast Channel API

Memilih alat yang tepat adalah kunci