Frontend Web Lock API: Primitiver för resurssynkronisering

Den moderna webben blir alltmer komplex, där applikationer ofta körs i flera flikar eller fönster. Detta introducerar utmaningen att hantera samtidig åtkomst till delade resurser, som data lagrad i localStorage, IndexedDB, eller till och med serverresurser som nås via API:er. Web Lock API erbjuder en standardiserad mekanism för att koordinera åtkomst till dessa resurser, förhindra datakorruption och säkerställa datakonsistens.

Att förstå behovet av resurssynkronisering

Föreställ dig ett scenario där en användare har din webbapplikation öppen i två olika flikar. Båda flikarna försöker uppdatera samma post i localStorage. Utan korrekt synkronisering kan den ena flikens ändringar skriva över den andras, vilket leder till dataförlust eller inkonsekvenser. Det är här Web Lock API kommer in i bilden.

Traditionell webbutveckling förlitar sig på tekniker som optimistisk låsning (att kontrollera efter ändringar innan man sparar) eller låsning på serversidan. Dessa metoder kan dock vara komplexa att implementera och passar inte alltid för alla situationer. Web Lock API erbjuder ett enklare, mer direkt sätt att hantera samtidig åtkomst från frontend.

Introduktion till Web Lock API

Web Lock API är ett webbläsar-API som låter webbapplikationer förvärva och frigöra lås på resurser. Dessa lås hålls inom webbläsaren och kan begränsas till ett specifikt ursprung (origin), vilket säkerställer att de inte stör andra webbplatser. API:et erbjuder två huvudtyper av lås: exklusiva lås och delade lås.

Exklusiva lås

Ett exklusivt lås ger exklusiv åtkomst till en resurs. Endast en flik eller ett fönster kan hålla ett exklusivt lås på ett visst namn åt gången. Detta är lämpligt för operationer som modifierar resursen, som att skriva data till localStorage eller uppdatera en databas på serversidan.

Delade lås

Ett delat lås tillåter flera flikar eller fönster att hålla ett lås på en resurs samtidigt. Detta är lämpligt för operationer som endast läser resursen, som att visa data för användaren. Delade lås kan hållas samtidigt av flera klienter, men ett exklusivt lås kommer att blockera alla delade lås, och vice versa.

Använda Web Lock API: En praktisk guide

Web Lock API nås via egenskapen navigator.locks. Denna egenskap ger tillgång till metoderna request() och query().

Begära ett lås

Metoden request() används för att begära ett lås. Den tar namnet på låset, ett valfritt optionsobjekt och en callback-funktion. Callback-funktionen exekveras först efter att låset har förvärvats. Optionsobjektet kan specificera låsläget ('exclusive' eller 'shared') och en valfri ifAvailable-flagga.

Här är ett grundläggande exempel på hur man begär ett exklusivt lås:

            navigator.locks.request('my-resource', { mode: 'exclusive' }, async lock => {
  try {
    // Utför operationer som kräver exklusiv åtkomst till resursen
    console.log('Låset förvärvat!');

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

    console.log('Frigör låset.');
  } finally {
    // Låset frigörs automatiskt när callback-funktionen returnerar eller kastar ett fel
    // Men du kan också frigöra det manuellt (även om det vanligtvis inte är nödvändigt).
    // lock.release();
  }
});

            

              
                Copy
              
            
          

I detta exempel försöker request()-metoden förvärva ett exklusivt lås med namnet 'my-resource'. Om låset är tillgängligt exekveras callback-funktionen. Inuti callbacken kan du utföra operationer som kräver exklusiv åtkomst till resursen. Låset frigörs automatiskt när callback-funktionen returnerar eller kastar ett fel. finally-blocket säkerställer att all uppstädningskod körs, även om ett fel inträffar.

Här är ett exempel som använder ifAvailable-alternativet:

            navigator.locks.request('my-resource', { mode: 'exclusive', ifAvailable: true }, lock => {
  if (lock) {
    console.log('Låset förvärvades omedelbart!');
    // Utför operationer med låset

  } else {
    console.log('Låset var inte omedelbart tillgängligt, gör något annat.');
    // Utför alternativa operationer
  }
}).catch(error => {
  console.error('Fel vid begäran av lås:', error);
});

            

              
                Copy
              
            
          

Om ifAvailable är satt till true, resolverar request-promiset omedelbart med låsobjektet om låset är tillgängligt. Om låset inte är tillgängligt resolverar promiset med undefined. Callback-funktionen exekveras oavsett om ett lås förvärvades, vilket låter dig hantera båda fallen. Det är viktigt att notera att låsobjektet som skickas till callback-funktionen är null eller undefined när låset inte är tillgängligt.

Att begära ett delat lås fungerar på liknande sätt:

            navigator.locks.request('my-resource', { mode: 'shared' }, async lock => {
  try {
    // Utför skrivskyddade operationer på resursen
    console.log('Delat lås förvärvat!');

    // Simulera en asynkron läsoperation
    await new Promise(resolve => setTimeout(resolve, 1000));

    console.log('Frigör det delade låset.');
  } finally {
    // Låset frigörs automatiskt
  }
});

            

              
                Copy
              
            
          

Kontrollera låsstatus

Metoden query() låter dig kontrollera den nuvarande statusen för lås. Den returnerar ett promise som resolverar med ett objekt som innehåller information om de aktiva låsen för det nuvarande ursprunget (origin).

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

  if (lockInfo.held) {
    console.log('Lås hålls för närvarande:');
    lockInfo.held.forEach(lock => {
      console.log(`  Namn: ${lock.name}, Läge: ${lock.mode}`);
    });
  } else {
    console.log('Inga lås hålls för närvarande.');
  }

  if (lockInfo.pending) {
      console.log('Väntande låsförfrågningar:');
      lockInfo.pending.forEach(request => {
          console.log(` Namn: ${request.name}, Läge: ${request.mode}`);
      });
  } else {
      console.log('Inga väntande låsförfrågningar.');
  }
});

            

              
                Copy
              
            
          

lockInfo-objektet innehåller två egenskaper: held och pending. Egenskapen held är en array av objekt, där varje objekt representerar ett lås som för närvarande hålls av ursprunget. Varje objekt innehåller låsets name och mode. Egenskapen pending är en array av låsförfrågningar som ligger i kö och väntar på att beviljas.

Felhantering

Metoden request() returnerar ett promise som kan rejectas om ett fel inträffar. Vanliga fel inkluderar:

• AbortError: Låsförfrågan avbröts.
• SecurityError: Låsförfrågan nekades på grund av säkerhetsrestriktioner.

Det är viktigt att hantera dessa fel för att förhindra oväntat beteende. Du kan använda ett try...catch-block för att fånga fel:

            navigator.locks.request('my-resource', { mode: 'exclusive' }, lock => {
  // ...
}).catch(error => {
  console.error('Fel vid begäran av lås:', error);
  // Hantera felet på lämpligt sätt
});

            

              
                Copy
              
            
          

Användningsfall och exempel

Web Lock API kan användas i en mängd olika scenarier för att hantera samtidig åtkomst till delade resurser. Här är några exempel:

Förhindra samtidiga formulärinskickningar

Föreställ dig ett scenario där en användare råkar klicka på skicka-knappen i ett formulär flera gånger. Detta kan leda till att flera identiska inskickningar behandlas. Web Lock API kan användas för att förhindra detta genom att förvärva ett lås innan formuläret skickas och frigöra det efter att inskickningen är klar.

            async function submitForm(formData) {
  try {
    await navigator.locks.request('form-submission', { mode: 'exclusive' }, async lock => {
      console.log('Skickar formulär...');
      // Simulera formulärinskickning
      await new Promise(resolve => setTimeout(resolve, 3000));
      console.log('Formuläret har skickats!');
    });
  } catch (error) {
    console.error('Fel vid inskickning av formulär:', error);
  }
}

// Koppla submitForm-funktionen till formulärets submit-händelse
const form = document.getElementById('myForm');
form.addEventListener('submit', async (event) => {
  event.preventDefault(); // Förhindra standardhanteringen för formulärinskickning
  const formData = new FormData(form);
  await submitForm(formData);
});

            

              
                Copy
              
            
          

Hantera data i localStorage

Som nämnts tidigare kan Web Lock API användas för att förhindra datakorruption när flera flikar eller fönster använder samma data i localStorage. Här är ett exempel på hur man uppdaterar ett värde i localStorage med ett exklusivt lås:

            async function updateLocalStorage(key, newValue) {
  try {
    await navigator.locks.request(key, { mode: 'exclusive' }, async lock => {
      console.log(`Uppdaterar localStorage-nyckeln '${key}' till '${newValue}'...`);
      localStorage.setItem(key, newValue);
      console.log(`localStorage-nyckeln '${key}' har uppdaterats!`);
    });
  } catch (error) {
    console.error(`Fel vid uppdatering av localStorage-nyckeln '${key}':`, error);
  }
}

// Exempelanvändning:
updateLocalStorage('my-data', 'new value');

            

              
                Copy
              
            
          

Koordinera åtkomst till serverresurser

Web Lock API kan också användas för att koordinera åtkomst till serverresurser. Du kan till exempel förvärva ett lås innan du gör en API-förfrågan som modifierar data på servern. Detta kan förhindra race conditions och säkerställa datakonsistens. Du kan implementera detta för att serialisera skrivoperationer till en delad databaspost.

            async function updateServerData(data) {
  try {
    await navigator.locks.request('server-update', { mode: 'exclusive' }, async lock => {
      console.log('Uppdaterar 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('Misslyckades med att uppdatera serverdata');
      }
      console.log('Serverdata har uppdaterats!');
    });
  } catch (error) {
    console.error('Fel vid uppdatering av serverdata:', error);
  }
}

// Exempelanvändning:
updateServerData({ value: 'updated value' });

            

              
                Copy
              
            
          

Webbläsarkompatibilitet

I slutet av 2023 har Web Lock API bra stöd i moderna webbläsare, inklusive Chrome, Firefox, Safari och Edge. Det är dock alltid en bra idé att kontrollera den senaste informationen om webbläsarkompatibilitet på resurser som Can I use... innan du använder API:et i produktion.

Du kan använda funktionsdetektering (feature detection) för att kontrollera om Web Lock API stöds av användarens webbläsare:

            if ('locks' in navigator) {
  // Web Lock API stöds
  console.log('Web Lock API stöds!');
} else {
  // Web Lock API stöds inte
  console.warn('Web Lock API stöds inte i denna webbläsare.');
}

            

              
                Copy
              
            
          

Fördelar med att använda Web Lock API

• Förbättrad datakonsistens: Förhindrar datakorruption och säkerställer att data är konsekvent över flera flikar eller fönster.
• Förenklad hantering av samtidighet: Ger en enkel och standardiserad mekanism för att hantera samtidig åtkomst till delade resurser.
• Minskad komplexitet: Eliminerar behovet av komplexa, anpassade synkroniseringsmekanismer.
• Förbättrad användarupplevelse: Förhindrar oväntat beteende och förbättrar den övergripande användarupplevelsen.

Begränsningar och överväganden

• Begränsat till ursprung (Origin): Lås är begränsade till ursprunget, vilket innebär att de endast gäller för flikar eller fönster från samma domän, protokoll och port.
• Risk för deadlock (dödläge): Även om det är mindre troligt än med andra synkroniseringsprimitiver, är det fortfarande möjligt att skapa deadlock-situationer om det inte hanteras varsamt. Strukturera logiken för att förvärva och frigöra lås noggrant.
• Begränsat till webbläsaren: Lås hålls inom webbläsaren och ger inte synkronisering mellan olika webbläsare eller enheter. För serverresurser måste även servern implementera låsmekanismer.
• Asynkron natur: API:et är asynkront, vilket kräver noggrann hantering av promises och callbacks.

Bästa praxis

• Håll lås korta: Minimera den tid ett lås hålls för att minska sannolikheten för konkurrens.
• Använd specifika låsnamn: Använd beskrivande och specifika låsnamn för att undvika konflikter med andra delar av din applikation eller tredjepartsbibliotek.
• Hantera fel: Hantera fel på lämpligt sätt för att förhindra oväntat beteende.
• Överväg alternativ: Utvärdera om Web Lock API är den bästa lösningen för ditt specifika användningsfall. I vissa fall kan andra tekniker som optimistisk låsning eller låsning på serversidan vara mer lämpliga.
• Testa noggrant: Testa din kod noggrant för att säkerställa att den hanterar samtidig åtkomst korrekt. Använd flera webbläsarflikar och fönster för att simulera samtidig användning.

Sammanfattning

Frontend Web Lock API erbjuder ett kraftfullt och bekvämt sätt att hantera samtidig åtkomst till delade resurser i webbapplikationer. Genom att använda exklusiva och delade lås kan du förhindra datakorruption, säkerställa datakonsistens och förbättra den övergripande användarupplevelsen. Även om det har sina begränsningar är Web Lock API ett värdefullt verktyg för alla webbutvecklare som arbetar med komplexa applikationer som behöver hantera samtidig åtkomst till delade resurser. Kom ihåg att ta hänsyn till webbläsarkompatibilitet, hantera fel på lämpligt sätt och testa din kod noggrant för att säkerställa att den fungerar som förväntat.

Genom att förstå de koncept och tekniker som beskrivs i denna guide kan du effektivt utnyttja Web Lock API för att bygga robusta och pålitliga webbapplikationer som kan hantera kraven från den moderna webben.