API Web Lock Frontend: Primitif Sinkronisasi Sumber Daya

Web modern menjadi semakin kompleks, dengan aplikasi yang sering beroperasi di beberapa tab atau jendela. Hal ini menimbulkan tantangan dalam mengelola akses bersamaan ke sumber daya bersama, seperti data yang disimpan di localStorage, IndexedDB, atau bahkan sumber daya sisi server yang diakses melalui API. API Web Lock menyediakan mekanisme terstandarisasi untuk mengoordinasikan akses ke sumber daya ini, mencegah kerusakan data, dan memastikan konsistensi data.

Memahami Kebutuhan Sinkronisasi Sumber Daya

Bayangkan sebuah skenario di mana pengguna membuka aplikasi web Anda di dua tab yang berbeda. Kedua tab tersebut mencoba memperbarui entri yang sama di localStorage. Tanpa sinkronisasi yang tepat, perubahan dari satu tab dapat menimpa perubahan dari tab lainnya, yang menyebabkan kehilangan atau inkonsistensi data. Di sinilah API Web Lock berperan.

Pengembangan web tradisional mengandalkan teknik seperti penguncian optimistis (memeriksa perubahan sebelum menyimpan) atau penguncian sisi server. Namun, pendekatan ini bisa rumit untuk diimplementasikan dan mungkin tidak cocok untuk semua situasi. API Web Lock menawarkan cara yang lebih sederhana dan lebih langsung untuk mengelola akses bersamaan dari sisi frontend.

Memperkenalkan API Web Lock

API Web Lock adalah API browser yang memungkinkan aplikasi web untuk memperoleh dan melepaskan kunci pada sumber daya. Kunci ini dipegang di dalam browser dan dapat dilingkupi ke origin tertentu, memastikan bahwa mereka tidak mengganggu situs web lain. API ini menyediakan dua jenis kunci utama: kunci eksklusif dan kunci bersama.

Kunci Eksklusif

Kunci eksklusif memberikan akses eksklusif ke suatu sumber daya. Hanya satu tab atau jendela yang dapat memegang kunci eksklusif pada nama tertentu pada satu waktu. Ini cocok untuk operasi yang memodifikasi sumber daya, seperti menulis data ke localStorage atau memperbarui basis data sisi server.

Kunci Bersama

Kunci bersama memungkinkan beberapa tab atau jendela untuk memegang kunci pada sumber daya secara bersamaan. Ini cocok untuk operasi yang hanya membaca sumber daya, seperti menampilkan data kepada pengguna. Kunci bersama dapat dipegang secara bersamaan oleh beberapa klien, tetapi kunci eksklusif akan memblokir semua kunci bersama, dan sebaliknya.

Menggunakan API Web Lock: Panduan Praktis

API Web Lock diakses melalui properti navigator.locks. Properti ini menyediakan akses ke metode request() dan query().

Meminta Kunci

Metode request() digunakan untuk meminta kunci. Metode ini menerima nama kunci, objek opsi opsional, dan fungsi callback. Fungsi callback dieksekusi hanya setelah kunci berhasil diperoleh. Objek opsi dapat menentukan mode kunci ('exclusive' atau 'shared') dan flag ifAvailable opsional.

Berikut adalah contoh dasar meminta kunci eksklusif:

            navigator.locks.request('my-resource', { mode: 'exclusive' }, async lock => {
  try {
    // Lakukan operasi yang memerlukan akses eksklusif ke sumber daya
    console.log('Kunci diperoleh!');

    // Simulasikan operasi asinkron
    await new Promise(resolve => setTimeout(resolve, 2000));

    console.log('Melepaskan kunci.');
  } finally {
    // Kunci secara otomatis dilepaskan ketika fungsi callback selesai atau melempar kesalahan
    // Tetapi Anda juga bisa melepaskannya secara manual (meskipun umumnya tidak perlu).
    // lock.release();
  }
});

            

              
                Copy
              
            
          

Dalam contoh ini, metode request() mencoba untuk memperoleh kunci eksklusif bernama 'my-resource'. Jika kunci tersedia, fungsi callback akan dieksekusi. Di dalam callback, Anda dapat melakukan operasi yang memerlukan akses eksklusif ke sumber daya. Kunci secara otomatis dilepaskan ketika fungsi callback selesai atau melempar kesalahan. Blok finally memastikan bahwa kode pembersihan apa pun dieksekusi, bahkan jika terjadi kesalahan.

Berikut adalah contoh menggunakan opsi `ifAvailable`:

            navigator.locks.request('my-resource', { mode: 'exclusive', ifAvailable: true }, lock => {
  if (lock) {
    console.log('Kunci segera diperoleh!');
    // Lakukan operasi dengan kunci

  } else {
    console.log('Kunci tidak segera tersedia, melakukan hal lain.');
    // Lakukan operasi alternatif
  }
}).catch(error => {
  console.error('Kesalahan saat meminta kunci:', error);
});

            

              
                Copy
              
            
          

Jika `ifAvailable` diatur ke `true`, promise `request` akan segera selesai dengan objek kunci jika kunci tersedia. Jika kunci tidak tersedia, promise akan selesai dengan `undefined`. Fungsi callback dieksekusi terlepas dari apakah kunci diperoleh, memungkinkan Anda menangani kedua kasus tersebut. Penting untuk dicatat bahwa objek kunci yang diteruskan ke fungsi callback adalah `null` atau `undefined` ketika kunci tidak tersedia.

Meminta kunci bersama serupa:

            navigator.locks.request('my-resource', { mode: 'shared' }, async lock => {
  try {
    // Lakukan operasi hanya-baca pada sumber daya
    console.log('Kunci bersama diperoleh!');

    // Simulasikan operasi baca asinkron
    await new Promise(resolve => setTimeout(resolve, 1000));

    console.log('Melepaskan kunci bersama.');
  } finally {
    // Kunci dilepaskan secara otomatis
  }
});

            

              
                Copy
              
            
          

Memeriksa Status Kunci

Metode query() memungkinkan Anda untuk memeriksa status kunci saat ini. Metode ini mengembalikan promise yang akan selesai dengan sebuah objek yang berisi informasi tentang kunci aktif untuk origin saat ini.

            navigator.locks.query().then(lockInfo => {
  console.log('Informasi kunci:', lockInfo);

  if (lockInfo.held) {
    console.log('Kunci yang sedang dipegang:');
    lockInfo.held.forEach(lock => {
      console.log(`  Nama: ${lock.name}, Mode: ${lock.mode}`);
    });
  } else {
    console.log('Tidak ada kunci yang sedang dipegang.');
  }

  if (lockInfo.pending) {
      console.log('Permintaan kunci yang tertunda:');
      lockInfo.pending.forEach(request => {
          console.log(` Nama: ${request.name}, Mode: ${request.mode}`);
      });
  } else {
      console.log('Tidak ada permintaan kunci yang tertunda.');
  }
});

            

              
                Copy
              
            
          

Objek lockInfo berisi dua properti: held dan pending. Properti held adalah array objek, masing-masing mewakili kunci yang saat ini dipegang oleh origin. Setiap objek berisi name dan mode dari kunci. Properti `pending` adalah array permintaan kunci yang sedang dalam antrean, menunggu untuk diberikan.

Penanganan Kesalahan

Metode request() mengembalikan sebuah promise yang dapat ditolak jika terjadi kesalahan. Kesalahan umum meliputi:

• AbortError: Permintaan kunci dibatalkan.
• SecurityError: Permintaan kunci ditolak karena pembatasan keamanan.

Penting untuk menangani kesalahan ini untuk mencegah perilaku yang tidak terduga. Anda dapat menggunakan blok try...catch untuk menangkap kesalahan:

            navigator.locks.request('my-resource', { mode: 'exclusive' }, lock => {
  // ...
}).catch(error => {
  console.error('Kesalahan saat meminta kunci:', error);
  // Tangani kesalahan dengan tepat
});

            

              
                Copy
              
            
          

Kasus Penggunaan dan Contoh

API Web Lock dapat digunakan dalam berbagai skenario untuk mengelola akses bersamaan ke sumber daya bersama. Berikut adalah beberapa contohnya:

Mencegah Pengiriman Formulir Bersamaan

Bayangkan sebuah skenario di mana pengguna secara tidak sengaja mengklik tombol kirim pada formulir beberapa kali. Ini dapat mengakibatkan beberapa pengiriman identik diproses. API Web Lock dapat digunakan untuk mencegah hal ini dengan memperoleh kunci sebelum mengirimkan formulir dan melepaskannya setelah pengiriman selesai.

            async function submitForm(formData) {
  try {
    await navigator.locks.request('form-submission', { mode: 'exclusive' }, async lock => {
      console.log('Mengirim formulir...');
      // Simulasikan pengiriman formulir
      await new Promise(resolve => setTimeout(resolve, 3000));
      console.log('Formulir berhasil dikirim!');
    });
  } catch (error) {
    console.error('Kesalahan saat mengirim formulir:', error);
  }
}

// Lampirkan fungsi submitForm ke event submit formulir
const form = document.getElementById('myForm');
form.addEventListener('submit', async (event) => {
  event.preventDefault(); // Mencegah pengiriman formulir default
  const formData = new FormData(form);
  await submitForm(formData);
});

            

              
                Copy
              
            
          

Mengelola Data di localStorage

Seperti yang disebutkan sebelumnya, API Web Lock dapat digunakan untuk mencegah kerusakan data ketika beberapa tab atau jendela mengakses data yang sama di localStorage. Berikut adalah contoh cara memperbarui nilai di localStorage menggunakan kunci eksklusif:

            async function updateLocalStorage(key, newValue) {
  try {
    await navigator.locks.request(key, { mode: 'exclusive' }, async lock => {
      console.log(`Memperbarui kunci localStorage '${key}' menjadi '${newValue}'...`);
      localStorage.setItem(key, newValue);
      console.log(`Kunci localStorage '${key}' berhasil diperbarui!`);
    });
  } catch (error) {
    console.error(`Kesalahan saat memperbarui kunci localStorage '${key}':`, error);
  }
}

// Contoh penggunaan:
updateLocalStorage('my-data', 'new value');

            

              
                Copy
              
            
          

Mengoordinasikan Akses ke Sumber Daya Sisi Server

API Web Lock juga dapat digunakan untuk mengoordinasikan akses ke sumber daya sisi server. Misalnya, Anda dapat memperoleh kunci sebelum membuat permintaan API yang memodifikasi data di server. Ini dapat mencegah kondisi balapan dan memastikan konsistensi data. Anda mungkin menerapkan ini untuk membuat serial operasi tulis ke catatan basis data bersama.

            async function updateServerData(data) {
  try {
    await navigator.locks.request('server-update', { mode: 'exclusive' }, async lock => {
      console.log('Memperbarui data server...');
      const response = await fetch('/api/update-data', {
        method: 'POST',
        body: JSON.stringify(data),
        headers: {
          'Content-Type': 'application/json'
        }
      });
      if (!response.ok) {
        throw new Error('Gagal memperbarui data server');
      }
      console.log('Data server berhasil diperbarui!');
    });
  } catch (error) {
    console.error('Kesalahan saat memperbarui data server:', error);
  }
}

// Contoh penggunaan:
updateServerData({ value: 'updated value' });

            

              
                Copy
              
            
          

Kompatibilitas Browser

Hingga akhir tahun 2023, API Web Lock memiliki dukungan browser yang baik di browser modern, termasuk Chrome, Firefox, Safari, dan Edge. Namun, selalu merupakan ide yang baik untuk memeriksa informasi kompatibilitas browser terbaru di sumber daya seperti Can I use... sebelum menggunakan API ini di lingkungan produksi.

Anda dapat menggunakan deteksi fitur untuk memeriksa apakah API Web Lock didukung oleh browser pengguna:

            if ('locks' in navigator) {
  // API Web Lock didukung
  console.log('API Web Lock didukung!');
} else {
  // API Web Lock tidak didukung
  console.warn('API Web Lock tidak didukung di browser ini.');
}

            

              
                Copy
              
            
          

Manfaat Menggunakan API Web Lock

• Peningkatan Konsistensi Data: Mencegah kerusakan data dan memastikan bahwa data konsisten di beberapa tab atau jendela.
• Manajemen Konkurensi yang Disederhanakan: Menyediakan mekanisme yang sederhana dan terstandarisasi untuk mengelola akses bersamaan ke sumber daya bersama.
• Mengurangi Kompleksitas: Menghilangkan kebutuhan akan mekanisme sinkronisasi kustom yang kompleks.
• Pengalaman Pengguna yang Ditingkatkan: Mencegah perilaku yang tidak terduga dan meningkatkan pengalaman pengguna secara keseluruhan.

Batasan dan Pertimbangan

• Lingkup Origin: Kunci dilingkupi ke origin, yang berarti mereka hanya berlaku untuk tab atau jendela dari domain, protokol, dan port yang sama.
• Potensi Deadlock: Meskipun lebih kecil kemungkinannya dibandingkan primitif sinkronisasi lainnya, masih mungkin untuk menciptakan situasi deadlock jika tidak ditangani dengan hati-hati. Susun logika perolehan dan pelepasan kunci dengan cermat.
• Terbatas pada Browser: Kunci dipegang di dalam browser dan tidak menyediakan sinkronisasi di berbagai browser atau perangkat. Untuk sumber daya sisi server, server juga harus menerapkan mekanisme penguncian.
• Sifat Asinkron: API ini bersifat asinkron, yang memerlukan penanganan promise dan callback yang cermat.

Praktik Terbaik

• Jaga Durasi Kunci Tetap Singkat: Minimalkan jumlah waktu kunci dipegang untuk mengurangi kemungkinan pertentangan.
• Gunakan Nama Kunci yang Spesifik: Gunakan nama kunci yang deskriptif dan spesifik untuk menghindari konflik dengan bagian lain dari aplikasi Anda atau pustaka pihak ketiga.
• Tangani Kesalahan: Tangani kesalahan dengan tepat untuk mencegah perilaku yang tidak terduga.
• Pertimbangkan Alternatif: Evaluasi apakah API Web Lock adalah solusi terbaik untuk kasus penggunaan spesifik Anda. Dalam beberapa kasus, teknik lain seperti penguncian optimistis atau penguncian sisi server mungkin lebih sesuai.
• Uji Secara Menyeluruh: Uji kode Anda secara menyeluruh untuk memastikan bahwa kode tersebut menangani akses bersamaan dengan benar. Gunakan beberapa tab dan jendela browser untuk mensimulasikan penggunaan bersamaan.

Kesimpulan

API Web Lock Frontend menyediakan cara yang kuat dan nyaman untuk mengelola akses bersamaan ke sumber daya bersama dalam aplikasi web. Dengan menggunakan kunci eksklusif dan bersama, Anda dapat mencegah kerusakan data, memastikan konsistensi data, dan meningkatkan pengalaman pengguna secara keseluruhan. Meskipun memiliki batasan, API Web Lock adalah alat yang berharga bagi setiap pengembang web yang mengerjakan aplikasi kompleks yang perlu menangani akses bersamaan ke sumber daya bersama. Ingatlah untuk mempertimbangkan kompatibilitas browser, menangani kesalahan dengan tepat, dan menguji kode Anda secara menyeluruh untuk memastikan bahwa itu berfungsi seperti yang diharapkan.

Dengan memahami konsep dan teknik yang dijelaskan dalam panduan ini, Anda dapat secara efektif memanfaatkan API Web Lock untuk membangun aplikasi web yang kuat dan andal yang dapat menangani tuntutan web modern.