Frontend Web Lock API: Išteklių sinchronizavimo primityvai

Šiuolaikinis žiniatinklis tampa vis sudėtingesnis, o programos dažnai veikia keliuose skirtukuose ar languose. Dėl to kyla iššūkis valdyti vienalaikę prieigą prie bendrų išteklių, tokių kaip duomenys, saugomi localStorage, IndexedDB ar net serverio ištekliuose, pasiekiamuose per API. „Web Lock“ API suteikia standartizuotą mechanizmą, skirtą koordinuoti prieigą prie šių išteklių, užkertant kelią duomenų sugadinimui ir užtikrinant duomenų nuoseklumą.

Išteklių sinchronizavimo poreikio supratimas

Įsivaizduokite scenarijų, kai vartotojas jūsų žiniatinklio programą atidarė dviejuose skirtinguose skirtukuose. Abu skirtukai bando atnaujinti tą patį įrašą localStorage. Be tinkamo sinchronizavimo, vieno skirtuko pakeitimai galėtų perrašyti kito pakeitimus, o tai lemtų duomenų praradimą ar neatitikimus. Čia ir praverčia „Web Lock“ API.

Tradicinis žiniatinklio kūrimas remiasi metodais, tokiais kaip optimistinis užrakinimas (pakeitimų tikrinimas prieš išsaugant) ar serverio pusės užrakinimas. Tačiau šiuos metodus gali būti sudėtinga įgyvendinti ir jie gali būti netinkami visoms situacijoms. „Web Lock“ API siūlo paprastesnį, tiesioginį būdą valdyti vienalaikę prieigą iš „frontend“ pusės.

„Web Lock“ API pristatymas

„Web Lock“ API yra naršyklės API, leidžianti žiniatinklio programoms įgyti ir atleisti išteklių užraktus. Šie užraktai laikomi naršyklėje ir gali būti apriboti konkrečia kilme (angl. origin), užtikrinant, kad jie netrukdys kitoms svetainėms. API suteikia dviejų pagrindinių tipų užraktus: išskirtinius užraktus ir bendrinamus užraktus.

Išskirtiniai užraktai

Išskirtinis užraktas suteikia išskirtinę prieigą prie ištekliaus. Vienu metu tik vienas skirtukas ar langas gali turėti išskirtinį užraktą tam pačiam pavadinimui. Tai tinka operacijoms, kurios modifikuoja išteklių, pavyzdžiui, rašant duomenis į localStorage arba atnaujinant serverio duomenų bazę.

Bendrinami užraktai

Bendrinamas užraktas leidžia keliems skirtukams ar langams vienu metu turėti užraktą tam pačiam ištekliui. Tai tinka operacijoms, kurios tik skaito išteklių, pavyzdžiui, rodant duomenis vartotojui. Bendrinamus užraktus gali vienu metu turėti keli klientai, tačiau išskirtinis užraktas blokuos visus bendrinamus užraktus ir atvirkščiai.

„Web Lock“ API naudojimas: praktinis vadovas

„Web Lock“ API pasiekiama per navigator.locks savybę. Ši savybė suteikia prieigą prie request() ir query() metodų.

Užrakto užklausimas

Metodas request() naudojamas užrakto užklausimui. Jis priima užrakto pavadinimą, pasirinktinį parinkčių objektą ir atgalinio iškvietimo funkciją. Atgalinio iškvietimo funkcija vykdoma tik sėkmingai įgijus užraktą. Parinkčių objekte galima nurodyti užrakto režimą ('exclusive' arba 'shared') ir pasirinktinę ifAvailable vėliavėlę.

Štai pagrindinis išskirtinio užrakto užklausimo pavyzdys:

            navigator.locks.request('my-resource', { mode: 'exclusive' }, async lock => {
  try {
    // Perform operations that require exclusive access to the resource
    console.log('Lock acquired!');

    // Simulate an asynchronous operation
    await new Promise(resolve => setTimeout(resolve, 2000));

    console.log('Releasing the lock.');
  } finally {
    // The lock is automatically released when the callback function returns or throws an error
    // But you can also release it manually (although it's generally not necessary).
    // lock.release();
  }
});

            

              
                Copy
              
            
          

Šiame pavyzdyje metodas request() bando įgyti išskirtinį užraktą pavadinimu 'my-resource'. Jei užraktas yra prieinamas, vykdoma atgalinio iškvietimo funkcija. Atgalinio iškvietimo funkcijos viduje galite atlikti operacijas, kurioms reikalinga išskirtinė prieiga prie ištekliaus. Užraktas automatiškai atleidžiamas, kai atgalinio iškvietimo funkcija grąžina rezultatą arba išmeta klaidą. finally blokas užtikrina, kad bet koks valymo kodas bus įvykdytas, net jei įvyksta klaida.

Štai pavyzdys, naudojant ifAvailable parinktį:

            navigator.locks.request('my-resource', { mode: 'exclusive', ifAvailable: true }, lock => {
  if (lock) {
    console.log('Lock acquired immediately!');
    // Perform operations with the lock

  } else {
    console.log('Lock not immediately available, doing something else.');
    // Perform alternative operations
  }
}).catch(error => {
  console.error('Error requesting lock:', error);
});

            

              
                Copy
              
            
          

Jei ifAvailable nustatyta į true, request pažadas (angl. promise) iškart išsisprendžia su užrakto objektu, jei užraktas yra prieinamas. Jei užraktas neprieinamas, pažadas išsisprendžia su undefined. Atgalinio iškvietimo funkcija vykdoma nepriklausomai nuo to, ar užraktas buvo įgytas, leidžiant jums tvarkyti abu atvejus. Svarbu pažymėti, kad užrakto objektas, perduodamas atgalinio iškvietimo funkcijai, yra null arba undefined, kai užraktas neprieinamas.

Bendrinamo užrakto užklausimas yra panašus:

            navigator.locks.request('my-resource', { mode: 'shared' }, async lock => {
  try {
    // Perform read-only operations on the resource
    console.log('Shared lock acquired!');

    // Simulate an asynchronous read operation
    await new Promise(resolve => setTimeout(resolve, 1000));

    console.log('Releasing the shared lock.');
  } finally {
    // Lock is released automatically
  }
});

            

              
                Copy
              
            
          

Užrakto būsenos tikrinimas

Metodas query() leidžia patikrinti esamą užraktų būseną. Jis grąžina pažadą, kuris išsisprendžia su objektu, kuriame yra informacija apie aktyvius užraktus dabartinei kilmei.

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

  if (lockInfo.held) {
    console.log('Locks are currently held:');
    lockInfo.held.forEach(lock => {
      console.log(`  Name: ${lock.name}, Mode: ${lock.mode}`);
    });
  } else {
    console.log('No locks are currently held.');
  }

  if (lockInfo.pending) {
      console.log('Pending lock requests:');
      lockInfo.pending.forEach(request => {
          console.log(` Name: ${request.name}, Mode: ${request.mode}`);
      });
  } else {
      console.log('No pending lock requests.');
  }
});

            

              
                Copy
              
            
          

Objektas lockInfo turi dvi savybes: held ir pending. Savybė held yra objektų masyvas, kurių kiekvienas atspindi šiuo metu kilmės turimą užraktą. Kiekviename objekte yra užrakto name (pavadinimas) ir mode (režimas). Savybė `pending` yra užraktų užklausų, kurios yra eilėje ir laukia suteikimo, masyvas.

Klaidų apdorojimas

Metodas request() grąžina pažadą, kuris gali būti atmestas, jei įvyksta klaida. Dažniausios klaidos:

• AbortError: Užrakto užklausa buvo nutraukta.
• SecurityError: Užrakto užklausa buvo atmesta dėl saugumo apribojimų.

Svarbu apdoroti šias klaidas, kad būtų išvengta netikėto elgesio. Galite naudoti try...catch bloką klaidoms gaudyti:

            navigator.locks.request('my-resource', { mode: 'exclusive' }, lock => {
  // ...
}).catch(error => {
  console.error('Error requesting lock:', error);
  // Handle the error appropriately
});

            

              
                Copy
              
            
          

Naudojimo atvejai ir pavyzdžiai

„Web Lock“ API gali būti naudojama įvairiuose scenarijuose, siekiant valdyti vienalaikę prieigą prie bendrų išteklių. Štai keletas pavyzdžių:

Vienalaikių formų pateikimo prevencija

Įsivaizduokite scenarijų, kai vartotojas netyčia kelis kartus paspaudžia formos pateikimo mygtuką. Tai gali lemti kelių identiškų pateikimų apdorojimą. „Web Lock“ API gali būti naudojama tam išvengti, įgyjant užraktą prieš pateikiant formą ir atleidžiant jį po pateikimo pabaigos.

            async function submitForm(formData) {
  try {
    await navigator.locks.request('form-submission', { mode: 'exclusive' }, async lock => {
      console.log('Submitting form...');
      // Simulate form submission
      await new Promise(resolve => setTimeout(resolve, 3000));
      console.log('Form submitted successfully!');
    });
  } catch (error) {
    console.error('Error submitting form:', error);
  }
}

// Attach the submitForm function to the form's submit event
const form = document.getElementById('myForm');
form.addEventListener('submit', async (event) => {
  event.preventDefault(); // Prevent default form submission
  const formData = new FormData(form);
  await submitForm(formData);
});

            

              
                Copy
              
            
          

Duomenų valdymas localStorage

Kaip minėta anksčiau, „Web Lock“ API gali būti naudojama siekiant išvengti duomenų sugadinimo, kai keli skirtukai ar langai pasiekia tuos pačius duomenis localStorage. Štai pavyzdys, kaip atnaujinti reikšmę localStorage naudojant išskirtinį užraktą:

            async function updateLocalStorage(key, newValue) {
  try {
    await navigator.locks.request(key, { mode: 'exclusive' }, async lock => {
      console.log(`Updating localStorage key '${key}' to '${newValue}'...`);
      localStorage.setItem(key, newValue);
      console.log(`localStorage key '${key}' updated successfully!`);
    });
  } catch (error) {
    console.error(`Error updating localStorage key '${key}':`, error);
  }
}

// Example usage:
updateLocalStorage('my-data', 'new value');

            

              
                Copy
              
            
          

Prieigos prie serverio išteklių koordinavimas

„Web Lock“ API taip pat gali būti naudojama koordinuoti prieigą prie serverio išteklių. Pavyzdžiui, galite įgyti užraktą prieš pateikdami API užklausą, kuri modifikuoja duomenis serveryje. Tai gali užkirsti kelią lenktynių sąlygoms (angl. race conditions) ir užtikrinti duomenų nuoseklumą. Tai galite įgyvendinti norėdami serializuoti rašymo operacijas į bendrą duomenų bazės įrašą.

            async function updateServerData(data) {
  try {
    await navigator.locks.request('server-update', { mode: 'exclusive' }, async lock => {
      console.log('Updating server data...');
      const response = await fetch('/api/update-data', {
        method: 'POST',
        body: JSON.stringify(data),
        headers: {
          'Content-Type': 'application/json'
        }
      });
      if (!response.ok) {
        throw new Error('Failed to update server data');
      }
      console.log('Server data updated successfully!');
    });
  } catch (error) {
    console.error('Error updating server data:', error);
  }
}

// Example usage:
updateServerData({ value: 'updated value' });

            

              
                Copy
              
            
          

Naršyklių suderinamumas

2023 m. pabaigoje „Web Lock“ API turėjo gerą palaikymą šiuolaikinėse naršyklėse, įskaitant „Chrome“, „Firefox“, „Safari“ ir „Edge“. Tačiau visada verta patikrinti naujausią naršyklių suderinamumo informaciją ištekliuose, tokiuose kaip Can I use..., prieš naudojant API gamybinėje aplinkoje.

Galite naudoti funkcijos aptikimą (angl. feature detection), kad patikrintumėte, ar vartotojo naršyklė palaiko „Web Lock“ API:

            if ('locks' in navigator) {
  // Web Lock API is supported
  console.log('Web Lock API is supported!');
} else {
  // Web Lock API is not supported
  console.warn('Web Lock API is not supported in this browser.');
}

            

              
                Copy
              
            
          

„Web Lock“ API naudojimo privalumai

• Pagerintas duomenų nuoseklumas: Apsaugo nuo duomenų sugadinimo ir užtikrina, kad duomenys būtų nuoseklūs keliuose skirtukuose ar languose.
• Supaprastintas konkurencijos valdymas: Suteikia paprastą ir standartizuotą mechanizmą vienalaikei prieigai prie bendrų išteklių valdyti.
• Sumažintas sudėtingumas: Pašalina sudėtingų, individualių sinchronizavimo mechanizmų poreikį.
• Pagerinta vartotojo patirtis: Užkerta kelią netikėtam elgesiui ir pagerina bendrą vartotojo patirtį.

Apribojimai ir svarstymai

• Kilmės (Origin) apimtis: Užraktai yra apriboti kilme, o tai reiškia, kad jie taikomi tik to paties domeno, protokolo ir prievado skirtukams ar langams.
• Aklavietės (Deadlock) potencialas: Nors tikimybė mažesnė nei su kitais sinchronizavimo primityvais, vis tiek įmanoma sukurti aklavietės situacijas, jei elgiamasi neatsargiai. Atidžiai struktūrizuokite užrakto įgijimo ir atleidimo logiką.
• Apribota naršykle: Užraktai laikomi naršyklėje ir neužtikrina sinchronizavimo tarp skirtingų naršyklių ar įrenginių. Serverio ištekliams, serveris taip pat turi įgyvendinti užrakinimo mechanizmus.
• Asinchroninis pobūdis: API yra asinchroninė, todėl reikia atidžiai tvarkyti pažadus (promises) ir atgalinio iškvietimo funkcijas.

Gerosios praktikos

• Trumpai laikykite užraktus: Sumažinkite laiką, kurį laikomas užraktas, kad sumažintumėte ginčų tikimybę.
• Naudokite konkrečius užraktų pavadinimus: Naudokite aprašomuosius ir konkrečius užraktų pavadinimus, kad išvengtumėte konfliktų su kitomis jūsų programos dalimis ar trečiųjų šalių bibliotekomis.
• Apdorokite klaidas: Tinkamai apdorokite klaidas, kad išvengtumėte netikėto elgesio.
• Apsvarstykite alternatyvas: Įvertinkite, ar „Web Lock“ API yra geriausias sprendimas jūsų konkrečiam naudojimo atvejui. Kai kuriais atvejais kiti metodai, tokie kaip optimistinis užrakinimas ar serverio pusės užrakinimas, gali būti tinkamesni.
• Kruopščiai testuokite: Kruopščiai testuokite savo kodą, kad įsitikintumėte, jog jis teisingai tvarko vienalaikę prieigą. Naudokite kelis naršyklės skirtukus ir langus, kad imituotumėte vienalaikį naudojimą.

Išvada

„Frontend Web Lock“ API suteikia galingą ir patogų būdą valdyti vienalaikę prieigą prie bendrų išteklių žiniatinklio programose. Naudodami išskirtinius ir bendrinamus užraktus, galite užkirsti kelią duomenų sugadinimui, užtikrinti duomenų nuoseklumą ir pagerinti bendrą vartotojo patirtį. Nors ji turi apribojimų, „Web Lock“ API yra vertingas įrankis bet kuriam žiniatinklio kūrėjui, dirbančiam su sudėtingomis programomis, kurioms reikia tvarkyti vienalaikę prieigą prie bendrų išteklių. Nepamirškite atsižvelgti į naršyklių suderinamumą, tinkamai apdoroti klaidas ir kruopščiai išbandyti savo kodą, kad įsitikintumėte, jog jis veikia kaip tikėtasi.

Suprasdami šiame vadove aprašytas sąvokas ir metodus, galite efektyviai panaudoti „Web Lock“ API, kurdami patikimas ir stabilias žiniatinklio programas, galinčias atlaikyti šiuolaikinio žiniatinklio reikalavimus.