Frontend Web Lock API: Resurssien synkronoinnin primitiivit

Nykyaikainen verkko on yhä monimutkaisempi, ja sovellukset toimivat usein monilla välilehdillä tai ikkunoissa. Tämä tuo mukanaan haasteen hallita samanaikaista pääsyä jaettuihin resursseihin, kuten localStorage- tai IndexedDB-tietokantaan tallennettuihin tietoihin tai jopa API-rajapintojen kautta käytettäviin palvelinpuolen resursseihin. Web Lock API tarjoaa standardoidun mekanismin näiden resurssien käytön koordinoimiseksi, estäen tietojen vioittumisen ja varmistaen tietojen yhdenmukaisuuden.

Resurssien synkronoinnin tarpeen ymmärtäminen

Kuvittele tilanne, jossa käyttäjällä on verkkosovelluksesi auki kahdella eri välilehdellä. Molemmat välilehdet yrittävät päivittää samaa merkintää localStorage-muistissa. Ilman asianmukaista synkronointia yhden välilehden muutokset voisivat korvata toisen, mikä johtaisi tietojen menetykseen tai epäjohdonmukaisuuksiin. Tässä Web Lock API tulee apuun.

Perinteinen web-kehitys nojaa tekniikoihin, kuten optimistiseen lukitukseen (muutosten tarkistaminen ennen tallennusta) tai palvelinpuolen lukitukseen. Nämä lähestymistavat voivat kuitenkin olla monimutkaisia toteuttaa eivätkä välttämättä sovi kaikkiin tilanteisiin. Web Lock API tarjoaa yksinkertaisemman ja suoremman tavan hallita samanaikaista käyttöä frontendistä käsin.

Esittelyssä Web Lock API

Web Lock API on selain-API, joka antaa verkkosovelluksille mahdollisuuden hankkia ja vapauttaa lukkoja resursseille. Nämä lukot pidetään selaimessa ja ne voidaan rajata tiettyyn alkuperään (origin), mikä varmistaa, etteivät ne häiritse muita verkkosivustoja. API tarjoaa kaksi päätyyppiä lukkoja: yksinomaiset lukot (exclusive locks) ja jaetut lukot (shared locks).

Yksinomaiset lukot

Yksinomainen lukko antaa yksinoikeuden resurssin käyttöön. Vain yksi välilehti tai ikkuna voi pitää hallussaan yksinomaista lukkoa tietylle nimelle kerrallaan. Tämä soveltuu toimenpiteisiin, jotka muokkaavat resurssia, kuten tietojen kirjoittamiseen localStorage-muistiin tai palvelinpuolen tietokannan päivittämiseen.

Jaetut lukot

Jaettu lukko antaa useiden välilehtien tai ikkunoiden pitää lukkoa resurssille samanaikaisesti. Tämä sopii toimenpiteisiin, jotka vain lukevat resurssia, kuten tietojen näyttämiseen käyttäjälle. Jaettuja lukkoja voi olla samanaikaisesti useilla asiakkailla, mutta yksinomainen lukko estää kaikki jaetut lukot ja päinvastoin.

Web Lock API:n käyttö: Käytännön opas

Web Lock API:a käytetään navigator.locks-ominaisuuden kautta. Tämä ominaisuus tarjoaa pääsyn request()- ja query()-metodeihin.

Lukon pyytäminen

request()-metodia käytetään lukon pyytämiseen. Se ottaa vastaan lukon nimen, valinnaisen asetusobjektin ja takaisinkutsufunktion. Takaisinkutsufunktio suoritetaan vasta, kun lukko on onnistuneesti hankittu. Asetusobjektilla voidaan määrittää lukon tila ('exclusive' tai 'shared') ja valinnainen ifAvailable-lippu.

Tässä on perusesimerkki yksinomaisen lukon pyytämisestä:

            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
              
            
          

Tässä esimerkissä request()-metodi yrittää hankkia yksinomaisen lukon nimeltä 'my-resource'. Jos lukko on saatavilla, takaisinkutsufunktio suoritetaan. Takaisinkutsun sisällä voit suorittaa toimenpiteitä, jotka vaativat yksinoikeuden resurssiin. Lukko vapautetaan automaattisesti, kun takaisinkutsufunktio palautuu tai heittää virheen. finally-lohko varmistaa, että mahdolliset siivouskoodit suoritetaan, vaikka virhe tapahtuisikin.

Tässä on esimerkki `ifAvailable`-asetuksen käytöstä:

            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
              
            
          

Jos `ifAvailable` on asetettu arvoon `true`, `request`-lupaus ratkeaa välittömästi lukko-objektilla, jos lukko on saatavilla. Jos lukko ei ole saatavilla, lupaus ratkeaa arvolla `undefined`. Takaisinkutsufunktio suoritetaan riippumatta siitä, hankittiinko lukko, jolloin voit käsitellä molemmat tapaukset. On tärkeää huomata, että takaisinkutsufunktiolle välitetty lukko-objekti on `null` tai `undefined`, kun lukko ei ole saatavilla.

Jaetun lukon pyytäminen on samankaltaista:

            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
              
            
          

Lukon tilan tarkistaminen

query()-metodilla voit tarkistaa lukkojen nykyisen tilan. Se palauttaa lupauksen, joka ratkeaa objektilla, joka sisältää tietoa nykyisen alkuperän aktiivisista lukoista.

            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
              
            
          

lockInfo-objekti sisältää kaksi ominaisuutta: held ja pending. held-ominaisuus on taulukko objekteista, joista kukin edustaa alkuperän tällä hetkellä hallussa olevaa lukkoa. Jokainen objekti sisältää lukon name- ja mode-ominaisuudet. `pending`-ominaisuus on taulukko lukkopyynnöistä, jotka ovat jonossa odottamassa myöntämistä.

Virheidenkäsittely

request()-metodi palauttaa lupauksen, joka voidaan hylätä, jos virhe tapahtuu. Yleisiä virheitä ovat:

• AbortError: Lukkopyyntö keskeytettiin.
• SecurityError: Lukkopyyntö hylättiin turvallisuusrajoitusten vuoksi.

On tärkeää käsitellä nämä virheet odottamattoman käytöksen estämiseksi. Voit käyttää try...catch-lohkoa virheiden nappaamiseen:

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

            

              
                Copy
              
            
          

Käyttötapaukset ja esimerkit

Web Lock API:a voidaan käyttää monenlaisissa tilanteissa jaettujen resurssien samanaikaisen käytön hallintaan. Tässä on muutamia esimerkkejä:

Samanaikaisten lomakelähetysten estäminen

Kuvittele tilanne, jossa käyttäjä vahingossa napsauttaa lomakkeen lähetyspainiketta useita kertoja. Tämä voi johtaa useiden identtisten lähetysten käsittelyyn. Web Lock API:n avulla tämä voidaan estää hankkimalla lukko ennen lomakkeen lähettämistä ja vapauttamalla se lähetyksen päätyttyä.

            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
              
            
          

Tietojen hallinta localStorage-muistissa

Kuten aiemmin mainittiin, Web Lock API:n avulla voidaan estää tietojen vioittuminen, kun useat välilehdet tai ikkunat käyttävät samoja tietoja localStorage-muistissa. Tässä on esimerkki siitä, kuinka arvo päivitetään localStorage-muistiin käyttämällä yksinomaista lukkoa:

            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
              
            
          

Palvelinpuolen resurssien käytön koordinointi

Web Lock API:a voidaan käyttää myös koordinoimaan pääsyä palvelinpuolen resursseihin. Voit esimerkiksi hankkia lukon ennen API-pyynnön tekemistä, joka muokkaa dataa palvelimella. Tämä voi estää kilpa-ajotilanteita ja varmistaa tietojen yhdenmukaisuuden. Voit toteuttaa tämän sarjoittaaksesi kirjoitustoiminnot jaettuun tietokantatietueeseen.

            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
              
            
          

Selainyhteensopivuus

Vuoden 2023 loppupuolella Web Lock API:lla on hyvä tuki moderneissa selaimissa, kuten Chromessa, Firefoxissa, Safarissa ja Edgessä. On kuitenkin aina hyvä tarkistaa ajantasaiset selainyhteensopivuustiedot resursseista, kuten Can I use..., ennen API:n käyttöä tuotannossa.

Voit käyttää ominaisuuksien tunnistusta (feature detection) tarkistaaksesi, tukeeko käyttäjän selain Web Lock API:a:

            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:n käytön edut

• Parempi tietojen yhdenmukaisuus: Estää tietojen vioittumisen ja varmistaa, että tiedot ovat yhdenmukaisia useiden välilehtien tai ikkunoiden välillä.
• Yksinkertaistettu samanaikaisuuden hallinta: Tarjoaa yksinkertaisen ja standardoidun mekanismin jaettujen resurssien samanaikaisen käytön hallintaan.
• Vähentynyt monimutkaisuus: Poistaa tarpeen monimutkaisille, räätälöidyille synkronointimekanismeille.
• Parannettu käyttäjäkokemus: Estää odottamattoman käytöksen ja parantaa yleistä käyttäjäkokemusta.

Rajoitukset ja huomiot

• Alkuperän laajuus (Origin Scope): Lukot on rajattu alkuperään, mikä tarkoittaa, että ne koskevat vain saman verkkotunnuksen, protokollan ja portin välilehtiä tai ikkunoita.
• Lukkiutumisen mahdollisuus (Deadlock): Vaikka se on vähemmän altis kuin muut synkronointiprimitiivit, on silti mahdollista luoda lukkiutumistilanteita, jos niitä ei käsitellä huolellisesti. Suunnittele lukkojen hankinta- ja vapautuslogiikka huolellisesti.
• Rajoittuu selaimeen: Lukot pidetään selaimen sisällä eivätkä ne tarjoa synkronointia eri selainten tai laitteiden välillä. Palvelinpuolen resursseille palvelimen on myös toteutettava lukitusmekanismit.
• Asynkroninen luonne: API on asynkroninen, mikä vaatii lupausten ja takaisinkutsujen huolellista käsittelyä.

Parhaat käytännöt

• Pidä lukot lyhyinä: Minimoi aika, jonka lukko on hallussa, vähentääksesi kiistatilanteiden todennäköisyyttä.
• Käytä tarkkoja lukkojen nimiä: Käytä kuvaavia ja tarkkoja lukkojen nimiä välttääksesi konflikteja sovelluksesi muiden osien tai kolmannen osapuolen kirjastojen kanssa.
• Käsittele virheet: Käsittele virheet asianmukaisesti odottamattoman käytöksen estämiseksi.
• Harkitse vaihtoehtoja: Arvioi, onko Web Lock API paras ratkaisu juuri sinun käyttötapaukseesi. Joissakin tapauksissa muut tekniikat, kuten optimistinen lukitus tai palvelinpuolen lukitus, voivat olla sopivampia.
• Testaa perusteellisesti: Testaa koodisi perusteellisesti varmistaaksesi, että se käsittelee samanaikaisen käytön oikein. Käytä useita selainvälilehtiä ja -ikkunoita simuloidaksesi samanaikaista käyttöä.

Yhteenveto

Frontend Web Lock API tarjoaa tehokkaan ja kätevän tavan hallita jaettujen resurssien samanaikaista käyttöä verkkosovelluksissa. Käyttämällä yksinomaisia ja jaettuja lukkoja voit estää tietojen vioittumisen, varmistaa tietojen yhdenmukaisuuden ja parantaa yleistä käyttäjäkokemusta. Vaikka sillä on rajoituksensa, Web Lock API on arvokas työkalu kaikille web-kehittäjille, jotka työskentelevät monimutkaisten sovellusten parissa, joiden on käsiteltävä jaettujen resurssien samanaikaista käyttöä. Muista ottaa huomioon selainyhteensopivuus, käsitellä virheet asianmukaisesti ja testata koodisi perusteellisesti varmistaaksesi, että se toimii odotetusti.

Ymmärtämällä tässä oppaassa kuvatut käsitteet ja tekniikat voit tehokkaasti hyödyntää Web Lock API:a rakentaaksesi vakaita ja luotettavia verkkosovelluksia, jotka kestävät nykyaikaisen verkon vaatimukset.