Frontend Web Lock API: Primitiver for Ressource-synkronisering

Moderne webapplikationer bliver stadig mere komplekse og kører ofte på tværs af flere faner eller vinduer. Dette introducerer udfordringen med at administrere samtidig adgang til delte ressourcer, såsom data gemt i localStorage, IndexedDB eller endda server-side ressourcer, der tilgås via API'er. Web Lock API'et giver en standardiseret mekanisme til at koordinere adgang til disse ressourcer, forhindre datakorruption og sikre datakonsistens.

Forståelse af Behovet for Ressource-synkronisering

Forestil dig et scenarie, hvor en bruger har din webapplikation åben i to forskellige faner. Begge faner forsøger at opdatere den samme post i localStorage. Uden korrekt synkronisering kan den ene fanes ændringer overskrive den andens, hvilket fører til datatab eller inkonsistens. Det er her, Web Lock API'et kommer ind i billedet.

Traditionel webudvikling benytter sig af teknikker som optimistisk låsning (tjekker for ændringer før lagring) eller server-side låsning. Disse tilgange kan dog være komplekse at implementere og er måske ikke egnede til alle situationer. Web Lock API'et tilbyder en enklere og mere direkte måde at administrere samtidig adgang fra frontend.

Introduktion til Web Lock API

Web Lock API er et browser-API, der giver webapplikationer mulighed for at erhverve og frigive låse på ressourcer. Disse låse holdes i browseren og kan afgrænses til en specifik oprindelse (origin), hvilket sikrer, at de ikke forstyrrer andre websteder. API'et tilbyder to hovedtyper af låse: eksklusive låse og delte låse.

Eksklusive Låse

En eksklusiv lås giver eksklusiv adgang til en ressource. Kun én fane eller ét vindue kan holde en eksklusiv lås på et givent navn ad gangen. Dette er velegnet til operationer, der ændrer ressourcen, såsom at skrive data til localStorage eller opdatere en server-side database.

Delte Låse

En delt lås tillader flere faner eller vinduer at holde en lås på en ressource samtidigt. Dette er velegnet til operationer, der kun læser ressourcen, såsom at vise data til brugeren. Delte låse kan holdes samtidigt af flere klienter, men en eksklusiv lås vil blokere alle delte låse, og omvendt.

Brug af Web Lock API: En Praktisk Guide

Web Lock API tilgås via navigator.locks-egenskaben. Denne egenskab giver adgang til request()- og query()-metoderne.

Anmodning om en Lås

request()-metoden bruges til at anmode om en lås. Den tager navnet på låsen, et valgfrit options-objekt og en callback-funktion. Callback-funktionen udføres kun, efter at låsen er blevet erhvervet med succes. Options-objektet kan specificere låsetilstanden ('exclusive' eller 'shared') og et valgfrit ifAvailable-flag.

Her er et grundlæggende eksempel på anmodning om en eksklusiv lås:

            navigator.locks.request('my-resource', { mode: 'exclusive' }, async lock => {
  try {
    // Udfør operationer, der kræver eksklusiv adgang til ressourcen
    console.log('Lås erhvervet!');

    // Simuler en asynkron operation
    await new Promise(resolve => setTimeout(resolve, 2000));

    console.log('Frigiver låsen.');
  } finally {
    // Låsen frigives automatisk, når callback-funktionen returnerer eller kaster en fejl
    // Men du kan også frigive den manuelt (selvom det generelt ikke er nødvendigt).
    // lock.release();
  }
});

            

              
                Copy
              
            
          

I dette eksempel forsøger request()-metoden at erhverve en eksklusiv lås ved navn 'my-resource'. Hvis låsen er tilgængelig, udføres callback-funktionen. Inde i callback'en kan du udføre operationer, der kræver eksklusiv adgang til ressourcen. Låsen frigives automatisk, når callback-funktionen returnerer eller kaster en fejl. finally-blokken sikrer, at eventuel oprydningskode bliver udført, selvom der opstår en fejl.

Her er et eksempel, der bruger `ifAvailable`-optionen:

            navigator.locks.request('my-resource', { mode: 'exclusive', ifAvailable: true }, lock => {
  if (lock) {
    console.log('Lås erhvervet med det samme!');
    // Udfør operationer med låsen

  } else {
    console.log('Lås ikke umiddelbart tilgængelig, gør noget andet.');
    // Udfør alternative operationer
  }
}).catch(error => {
  console.error('Fejl ved anmodning om lås:', error);
});

            

              
                Copy
              
            
          

Hvis `ifAvailable` er sat til `true`, resolver request-promiset straks med låseobjektet, hvis låsen er tilgængelig. Hvis låsen ikke er tilgængelig, resolver promiset med `undefined`. Callback-funktionen udføres uanset om en lås blev erhvervet, hvilket giver dig mulighed for at håndtere begge tilfælde. Det er vigtigt at bemærke, at låseobjektet, der sendes til callback-funktionen, er `null` eller `undefined`, når låsen ikke er tilgængelig.

Anmodning om en delt lås er lignende:

            navigator.locks.request('my-resource', { mode: 'shared' }, async lock => {
  try {
    // Udfør skrivebeskyttede operationer på ressourcen
    console.log('Delt lås erhvervet!');

    // Simuler en asynkron læseoperation
    await new Promise(resolve => setTimeout(resolve, 1000));

    console.log('Frigiver den delte lås.');
  } finally {
    // Låsen frigives automatisk
  }
});

            

              
                Copy
              
            
          

Kontrol af Låsestatus

query()-metoden giver dig mulighed for at kontrollere den aktuelle status for låse. Den returnerer et promise, der resolver med et objekt, som indeholder information om de aktive låse for den aktuelle oprindelse.

            navigator.locks.query().then(lockInfo => {
  console.log('Låseinformation:', lockInfo);

  if (lockInfo.held) {
    console.log('Låse er i øjeblikket holdt:');
    lockInfo.held.forEach(lock => {
      console.log(`  Name: ${lock.name}, Mode: ${lock.mode}`);
    });
  } else {
    console.log('Ingen låse er i øjeblikket holdt.');
  }

  if (lockInfo.pending) {
      console.log('Ventende låseanmodninger:');
      lockInfo.pending.forEach(request => {
          console.log(` Name: ${request.name}, Mode: ${request.mode}`);
      });
  } else {
      console.log('Ingen ventende låseanmodninger.');
  }
});

            

              
                Copy
              
            
          

lockInfo-objektet indeholder to egenskaber: held og pending. held-egenskaben er et array af objekter, hvor hvert objekt repræsenterer en lås, der i øjeblikket holdes af oprindelsen. Hvert objekt indeholder låsens name og mode. `pending`-egenskaben er et array af låseanmodninger, der er i kø og venter på at blive tildelt.

Fejlhåndtering

request()-metoden returnerer et promise, der kan blive afvist, hvis der opstår en fejl. Almindelige fejl inkluderer:

• AbortError: Låseanmodningen blev afbrudt.
• SecurityError: Låseanmodningen blev afvist på grund af sikkerhedsbegrænsninger.

Det er vigtigt at håndtere disse fejl for at forhindre uventet adfærd. Du kan bruge en try...catch-blok til at fange fejl:

            navigator.locks.request('my-resource', { mode: 'exclusive' }, lock => {
  // ...
}).catch(error => {
  console.error('Fejl ved anmodning om lås:', error);
  // Håndter fejlen passende
});

            

              
                Copy
              
            
          

Anvendelsestilfælde og Eksempler

Web Lock API kan bruges i en række scenarier til at administrere samtidig adgang til delte ressourcer. Her er nogle eksempler:

Forebyggelse af Samtidige Formularindsendelser

Forestil dig et scenarie, hvor en bruger ved et uheld klikker på indsend-knappen på en formular flere gange. Dette kan resultere i, at flere identiske indsendelser bliver behandlet. Web Lock API kan bruges til at forhindre dette ved at erhverve en lås, før formularen indsendes, og frigive den, efter indsendelsen er fuldført.

            async function submitForm(formData) {
  try {
    await navigator.locks.request('form-submission', { mode: 'exclusive' }, async lock => {
      console.log('Indsender formular...');
      // Simuler formularindsendelse
      await new Promise(resolve => setTimeout(resolve, 3000));
      console.log('Formular indsendt med succes!');
    });
  } catch (error) {
    console.error('Fejl ved indsendelse af formular:', error);
  }
}

// Knyt submitForm-funktionen til formularens submit-event
const form = document.getElementById('myForm');
form.addEventListener('submit', async (event) => {
  event.preventDefault(); // Forhindr standard formularindsendelse
  const formData = new FormData(form);
  await submitForm(formData);
});

            

              
                Copy
              
            
          

Håndtering af Data i localStorage

Som tidligere nævnt kan Web Lock API bruges til at forhindre datakorruption, når flere faner eller vinduer tilgår de samme data i localStorage. Her er et eksempel på, hvordan man opdaterer en værdi i localStorage ved hjælp af en eksklusiv lås:

            async function updateLocalStorage(key, newValue) {
  try {
    await navigator.locks.request(key, { mode: 'exclusive' }, async lock => {
      console.log(`Opdaterer localStorage-nøgle '${key}' til '${newValue}'...`);
      localStorage.setItem(key, newValue);
      console.log(`localStorage-nøgle '${key}' opdateret med succes!`);
    });
  } catch (error) {
    console.error(`Fejl ved opdatering af localStorage-nøgle '${key}':`, error);
  }
}

// Eksempel på brug:
updateLocalStorage('my-data', 'new value');

            

              
                Copy
              
            
          

Koordinering af Adgang til Server-Side Ressourcer

Web Lock API kan også bruges til at koordinere adgang til server-side ressourcer. For eksempel kan du erhverve en lås, før du foretager en API-anmodning, der ændrer data på serveren. Dette kan forhindre 'race conditions' og sikre datakonsistens. Du kan implementere dette for at serialisere skriveoperationer til en delt databasepost.

            async function updateServerData(data) {
  try {
    await navigator.locks.request('server-update', { mode: 'exclusive' }, async lock => {
      console.log('Opdaterer serverdata...');
      const response = await fetch('/api/update-data', {
        method: 'POST',
        body: JSON.stringify(data),
        headers: {
          'Content-Type': 'application/json'
        }
      });
      if (!response.ok) {
        throw new Error('Kunne ikke opdatere serverdata');
      }
      console.log('Serverdata opdateret med succes!');
    });
  } catch (error) {
    console.error('Fejl ved opdatering af serverdata:', error);
  }
}

// Eksempel på brug:
updateServerData({ value: 'updated value' });

            

              
                Copy
              
            
          

Browserkompatibilitet

Fra slutningen af 2023 har Web Lock API god browserunderstøttelse i moderne browsere, herunder Chrome, Firefox, Safari og Edge. Det er dog altid en god idé at tjekke de seneste oplysninger om browserkompatibilitet på ressourcer som Can I use..., før du bruger API'et i produktion.

Du kan bruge funktionsdetektering (feature detection) til at kontrollere, om Web Lock API understøttes af brugerens browser:

            if ('locks' in navigator) {
  // Web Lock API understøttes
  console.log('Web Lock API understøttes!');
} else {
  // Web Lock API understøttes ikke
  console.warn('Web Lock API understøttes ikke i denne browser.');
}

            

              
                Copy
              
            
          

Fordele ved at Bruge Web Lock API

• Forbedret Datakonsistens: Forhindrer datakorruption og sikrer, at data er konsistente på tværs af flere faner eller vinduer.
• Forenklet Samtidighedsstyring: Giver en simpel og standardiseret mekanisme til at administrere samtidig adgang til delte ressourcer.
• Reduceret Kompleksitet: Eliminerer behovet for komplekse, specialbyggede synkroniseringsmekanismer.
• Forbedret Brugeroplevelse: Forhindrer uventet adfærd og forbedrer den samlede brugeroplevelse.

Begrænsninger og Overvejelser

• Origin-afgrænsning: Låse er afgrænset til oprindelsen (origin), hvilket betyder, at de kun gælder for faner eller vinduer fra samme domæne, protokol og port.
• Potentiale for Deadlock: Selvom det er mindre sandsynligt end med andre synkroniseringsprimitiver, er det stadig muligt at skabe deadlock-situationer, hvis det ikke håndteres omhyggeligt. Strukturer logikken for erhvervelse og frigivelse af låse omhyggeligt.
• Begrænset til Browseren: Låse holdes i browseren og giver ikke synkronisering på tværs af forskellige browsere eller enheder. For server-side ressourcer skal serveren også implementere låsemekanismer.
• Asynkron Natur: API'et er asynkront, hvilket kræver omhyggelig håndtering af promises og callbacks.

Bedste Praksis

• Hold Låse Kortvarigt: Minimer den tid, en lås holdes, for at reducere sandsynligheden for konflikter.
• Brug Specifikke Låsenavne: Brug beskrivende og specifikke låsenavne for at undgå konflikter med andre dele af din applikation eller tredjepartsbiblioteker.
• Håndter Fejl: Håndter fejl passende for at forhindre uventet adfærd.
• Overvej Alternativer: Evaluer, om Web Lock API er den bedste løsning til dit specifikke anvendelsestilfælde. I nogle tilfælde kan andre teknikker som optimistisk låsning eller server-side låsning være mere passende.
• Test Grundigt: Test din kode grundigt for at sikre, at den håndterer samtidig adgang korrekt. Brug flere browserfaner og -vinduer til at simulere samtidig brug.

Konklusion

Frontend Web Lock API giver en kraftfuld og bekvem måde at administrere samtidig adgang til delte ressourcer i webapplikationer. Ved at bruge eksklusive og delte låse kan du forhindre datakorruption, sikre datakonsistens og forbedre den samlede brugeroplevelse. Selvom det har begrænsninger, er Web Lock API et værdifuldt værktøj for enhver webudvikler, der arbejder på komplekse applikationer, som skal håndtere samtidig adgang til delte ressourcer. Husk at overveje browserkompatibilitet, håndtere fejl passende og teste din kode grundigt for at sikre, at den fungerer som forventet.

Ved at forstå de koncepter og teknikker, der er beskrevet i denne guide, kan du effektivt udnytte Web Lock API til at bygge robuste og pålidelige webapplikationer, der kan håndtere kravene fra det moderne web.