ફ્રન્ટએન્ડ વેબ લૉક API: રિસોર્સ સિંક્રોનાઇઝેશન પ્રિમિટિવ્સ

આધુનિક વેબ વધુને વધુ જટિલ બની રહ્યું છે, જેમાં એપ્લિકેશન્સ ઘણીવાર બહુવિધ ટેબ્સ અથવા વિન્ડોઝમાં કાર્ય કરે છે. આનાથી localStorage, IndexedDB માં સંગ્રહિત ડેટા અથવા APIs દ્વારા એક્સેસ કરાયેલા સર્વર-સાઇડ રિસોર્સ જેવા શેર્ડ રિસોર્સ પર એકસાથે એક્સેસને મેનેજ કરવાનો પડકાર ઊભો થાય છે. વેબ લૉક API આ રિસોર્સના એક્સેસને સંકલિત કરવા, ડેટા કરપ્શન અટકાવવા અને ડેટાની સુસંગતતા સુનિશ્ચિત કરવા માટે એક પ્રમાણભૂત પદ્ધતિ પ્રદાન કરે છે.

રિસોર્સ સિંક્રોનાઇઝેશનની જરૂરિયાતને સમજવું

એક એવી પરિસ્થિતિની કલ્પના કરો કે જ્યાં વપરાશકર્તાએ તમારી વેબ એપ્લિકેશનને બે અલગ-અલગ ટેબમાં ખોલી હોય. બંને ટેબ localStorage માં સમાન એન્ટ્રીને અપડેટ કરવાનો પ્રયાસ કરી રહ્યાં છે. યોગ્ય સિંક્રોનાઇઝેશન વિના, એક ટેબના ફેરફારો બીજાના ફેરફારોને ઓવરરાઇટ કરી શકે છે, જેનાથી ડેટા લોસ અથવા અસંગતતા થઈ શકે છે. આ તે છે જ્યાં વેબ લૉક API કામ આવે છે.

પરંપરાગત વેબ ડેવલપમેન્ટ ઓપ્ટિમિસ્ટિક લૉકિંગ (સેવ કરતા પહેલા ફેરફારો તપાસવા) અથવા સર્વર-સાઇડ લૉકિંગ જેવી ટેકનિક પર આધાર રાખે છે. જોકે, આ અભિગમો અમલમાં મૂકવા માટે જટિલ હોઈ શકે છે અને બધી પરિસ્થિતિઓ માટે યોગ્ય ન પણ હોય. વેબ લૉક API ફ્રન્ટએન્ડથી એકસાથે એક્સેસને મેનેજ કરવા માટે એક સરળ, વધુ સીધો માર્ગ પ્રદાન કરે છે.

વેબ લૉક API નો પરિચય

વેબ લૉક API એ એક બ્રાઉઝર API છે જે વેબ એપ્લિકેશન્સને રિસોર્સ પર લૉક મેળવવા અને છોડવાની મંજૂરી આપે છે. આ લૉક બ્રાઉઝરની અંદર રાખવામાં આવે છે અને ચોક્કસ ઓરિજિન માટે સ્કોપ કરી શકાય છે, જેથી તે અન્ય વેબસાઇટ્સમાં દખલ ન કરે. આ API બે મુખ્ય પ્રકારના લૉક પ્રદાન કરે છે: એક્સક્લુઝિવ લૉક અને શેર્ડ લૉક.

એક્સક્લુઝિવ લૉક

એક્સક્લુઝિવ લૉક એક રિસોર્સ માટે વિશિષ્ટ એક્સેસ પ્રદાન કરે છે. એક સમયે આપેલ નામ પર માત્ર એક જ ટેબ અથવા વિન્ડો એક્સક્લુઝિવ લૉક રાખી શકે છે. આ તે ઓપરેશન્સ માટે યોગ્ય છે જે રિસોર્સમાં ફેરફાર કરે છે, જેમ કે localStorage માં ડેટા લખવો અથવા સર્વર-સાઇડ ડેટાબેઝને અપડેટ કરવો.

શેર્ડ લૉક

શેર્ડ લૉક બહુવિધ ટેબ્સ અથવા વિન્ડોઝને એક સાથે રિસોર્સ પર લૉક રાખવાની મંજૂરી આપે છે. આ તે ઓપરેશન્સ માટે યોગ્ય છે જે ફક્ત રિસોર્સને વાંચે છે, જેમ કે વપરાશકર્તાને ડેટા પ્રદર્શિત કરવો. શેર્ડ લૉક બહુવિધ ક્લાયંટ દ્વારા એકસાથે રાખી શકાય છે, પરંતુ એક્સક્લુઝિવ લૉક તમામ શેર્ડ લૉકને બ્લોક કરશે, અને ઊલટું.

વેબ લૉક API નો ઉપયોગ: એક વ્યવહારુ માર્ગદર્શિકા

વેબ લૉક API ને navigator.locks પ્રોપર્ટી દ્વારા એક્સેસ કરવામાં આવે છે. આ પ્રોપર્ટી request() અને query() મેથડ્સનો એક્સેસ પ્રદાન કરે છે.

લૉકની વિનંતી કરવી

request() મેથડનો ઉપયોગ લૉકની વિનંતી કરવા માટે થાય છે. તે લૉકનું નામ, એક વૈકલ્પિક ઓપ્શન્સ ઓબ્જેક્ટ અને એક કોલબેક ફંક્શન લે છે. કોલબેક ફંક્શન ત્યારે જ એક્ઝિક્યુટ થાય છે જ્યારે લૉક સફળતાપૂર્વક મેળવી લેવામાં આવે. ઓપ્શન્સ ઓબ્જેક્ટ લૉક મોડ ('exclusive' અથવા 'shared') અને વૈકલ્પિક ifAvailable ફ્લેગ સ્પષ્ટ કરી શકે છે.

અહીં એક્સક્લુઝિવ લૉકની વિનંતી કરવા માટેનું એક મૂળભૂત ઉદાહરણ છે:

            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
              
            
          

આ ઉદાહરણમાં, request() મેથડ 'my-resource' નામના એક્સક્લુઝિવ લૉકને મેળવવાનો પ્રયાસ કરે છે. જો લૉક ઉપલબ્ધ હોય, તો કોલબેક ફંક્શન એક્ઝિક્યુટ થાય છે. કોલબેકની અંદર, તમે એવા ઓપરેશન્સ કરી શકો છો જેને રિસોર્સ માટે એક્સક્લુઝિવ એક્સેસની જરૂર હોય. જ્યારે કોલબેક ફંક્શન રિટર્ન થાય અથવા એરર ફેંકે ત્યારે લૉક આપમેળે રિલીઝ થઈ જાય છે. finally બ્લોક ખાતરી કરે છે કે કોઈ પણ ક્લીનઅપ કોડ એક્ઝિક્યુટ થાય, ભલે એરર આવે.

અહીં `ifAvailable` વિકલ્પનો ઉપયોગ કરીને એક ઉદાહરણ છે:

            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
              
            
          

જો `ifAvailable` ને `true` પર સેટ કરેલ હોય, તો `request` પ્રોમિસ તરત જ લૉક ઓબ્જેક્ટ સાથે રિઝોલ્વ થાય છે જો લૉક ઉપલબ્ધ હોય. જો લૉક ઉપલબ્ધ ન હોય, તો પ્રોમિસ `undefined` સાથે રિઝોલ્વ થાય છે. કોલબેક ફંક્શન એક્ઝિક્યુટ થાય છે ભલે લૉક મેળવવામાં આવ્યું હોય કે ન હોય, જે તમને બંને કિસ્સાઓને હેન્ડલ કરવાની મંજૂરી આપે છે. એ નોંધવું અગત્યનું છે કે જ્યારે લૉક અનુપલબ્ધ હોય ત્યારે કોલબેક ફંક્શનમાં પાસ થયેલ લૉક ઓબ્જેક્ટ `null` અથવા `undefined` હોય છે.

શેર્ડ લૉકની વિનંતી કરવી પણ સમાન છે:

            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
              
            
          

લૉક સ્ટેટસ તપાસવું

query() મેથડ તમને લૉકની વર્તમાન સ્થિતિ તપાસવાની મંજૂરી આપે છે. તે એક પ્રોમિસ રિટર્ન કરે છે જે વર્તમાન ઓરિજિન માટે સક્રિય લૉક્સ વિશેની માહિતી ધરાવતા ઓબ્જેક્ટ સાથે રિઝોલ્વ થાય છે.

            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 ઓબ્જેક્ટમાં બે પ્રોપર્ટીઝ છે: held અને pending. held પ્રોપર્ટી એ ઓબ્જેક્ટ્સનો એરે છે, જેમાં દરેક ઓરિજિન દ્વારા હાલમાં રાખવામાં આવેલા લૉકનું પ્રતિનિધિત્વ કરે છે. દરેક ઓબ્જેક્ટમાં લૉકનું name અને mode હોય છે. pending પ્રોપર્ટી એ લૉક વિનંતીઓનો એરે છે જે કતારમાં છે, મંજૂરી મળવાની રાહ જોઈ રહી છે.

એરર હેન્ડલિંગ

request() મેથડ એક પ્રોમિસ રિટર્ન કરે છે જે એરર આવે તો રિજેક્ટ થઈ શકે છે. સામાન્ય એરરમાં શામેલ છે:

• AbortError: લૉક વિનંતી રદ કરવામાં આવી હતી.
• SecurityError: સુરક્ષા પ્રતિબંધોને કારણે લૉક વિનંતીને નકારવામાં આવી હતી.

અણધાર્યા વર્તનને રોકવા માટે આ એરર્સને હેન્ડલ કરવું મહત્વપૂર્ણ છે. તમે એરર્સને પકડવા માટે try...catch બ્લોકનો ઉપયોગ કરી શકો છો:

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

            

              
                Copy
              
            
          

ઉપયોગના કિસ્સાઓ અને ઉદાહરણો

વેબ લૉક API નો ઉપયોગ વિવિધ પરિસ્થિતિઓમાં શેર્ડ રિસોર્સ પર એકસાથે એક્સેસને મેનેજ કરવા માટે થઈ શકે છે. અહીં કેટલાક ઉદાહરણો છે:

એકસાથે ફોર્મ સબમિશન અટકાવવું

એવી પરિસ્થિતિની કલ્પના કરો જ્યાં વપરાશકર્તા ભૂલથી ફોર્મ પર સબમિટ બટનને ઘણી વખત ક્લિક કરે છે. આના પરિણામે બહુવિધ સમાન સબમિશન્સ પર પ્રક્રિયા થઈ શકે છે. વેબ લૉક API નો ઉપયોગ ફોર્મ સબમિટ કરતા પહેલા લૉક મેળવીને અને સબમિશન પૂર્ણ થયા પછી તેને રિલીઝ કરીને આને રોકવા માટે થઈ શકે છે.

            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
              
            
          

localStorage માં ડેટાનું સંચાલન કરવું

અગાઉ ઉલ્લેખ કર્યો તેમ, વેબ લૉક API નો ઉપયોગ ડેટા કરપ્શનને રોકવા માટે થઈ શકે છે જ્યારે બહુવિધ ટેબ્સ અથવા વિન્ડોઝ localStorage માં સમાન ડેટાને એક્સેસ કરી રહ્યાં હોય. અહીં એક્સક્લુઝિવ લૉકનો ઉપયોગ કરીને localStorage માં વેલ્યુને કેવી રીતે અપડેટ કરવી તેનું એક ઉદાહરણ છે:

            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
              
            
          

સર્વર-સાઇડ રિસોર્સના એક્સેસનું સંકલન કરવું

વેબ લૉક API નો ઉપયોગ સર્વર-સાઇડ રિસોર્સના એક્સેસનું સંકલન કરવા માટે પણ થઈ શકે છે. ઉદાહરણ તરીકે, તમે સર્વર પર ડેટામાં ફેરફાર કરતી API વિનંતી કરતા પહેલા લૉક મેળવી શકો છો. આ રેસ કન્ડિશન્સને અટકાવી શકે છે અને ડેટાની સુસંગતતા સુનિશ્ચિત કરી શકે છે. તમે આને શેર્ડ ડેટાબેઝ રેકોર્ડમાં રાઈટ ઓપરેશન્સને સિરિયલાઇઝ કરવા માટે અમલમાં મૂકી શકો છો.

            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
              
            
          

બ્રાઉઝર સુસંગતતા

2023 ના અંત સુધીમાં, વેબ લૉક API ને આધુનિક બ્રાઉઝર્સમાં સારો બ્રાઉઝર સપોર્ટ છે, જેમાં Chrome, Firefox, Safari, અને Edge શામેલ છે. જોકે, પ્રોડક્શનમાં API નો ઉપયોગ કરતા પહેલા Can I use... જેવા રિસોર્સ પર નવીનતમ બ્રાઉઝર સુસંગતતા માહિતી તપાસવી હંમેશા સારો વિચાર છે.

તમે ફીચર ડિટેક્શનનો ઉપયોગ કરીને ચકાસી શકો છો કે વેબ લૉક 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
              
            
          

વેબ લૉક API નો ઉપયોગ કરવાના ફાયદા

• સુધારેલી ડેટા સુસંગતતા: ડેટા કરપ્શનને અટકાવે છે અને ખાતરી કરે છે કે ડેટા બહુવિધ ટેબ્સ અથવા વિન્ડોઝમાં સુસંગત રહે.
• સરળ કોન્કરન્સી મેનેજમેન્ટ: શેર્ડ રિસોર્સ પર એકસાથે એક્સેસને મેનેજ કરવા માટે એક સરળ અને પ્રમાણભૂત પદ્ધતિ પ્રદાન કરે છે.
• જટિલતામાં ઘટાડો: જટિલ કસ્ટમ સિંક્રોનાઇઝેશન પદ્ધતિઓની જરૂરિયાતને દૂર કરે છે.
• ઉન્નત વપરાશકર્તા અનુભવ: અણધાર્યા વર્તનને અટકાવે છે અને સમગ્ર વપરાશકર્તા અનુભવમાં સુધારો કરે છે.

મર્યાદાઓ અને વિચારણાઓ

• ઓરિજિન સ્કોપ: લૉક્સ ઓરિજિન માટે સ્કોપ કરેલા હોય છે, જેનો અર્થ છે કે તે ફક્ત સમાન ડોમેન, પ્રોટોકોલ અને પોર્ટના ટેબ્સ અથવા વિન્ડોઝ પર જ લાગુ પડે છે.
• ડેડલોકની સંભાવના: અન્ય સિંક્રોનાઇઝેશન પ્રિમિટિવ્સ કરતાં ઓછી સંભાવના હોવા છતાં, જો કાળજીપૂર્વક હેન્ડલ ન કરવામાં આવે તો ડેડલોક પરિસ્થિતિઓ બનાવવી હજી પણ શક્ય છે. લૉક મેળવવા અને છોડવાના લોજિકને કાળજીપૂર્વક ગોઠવો.
• ફક્ત બ્રાઉઝર પૂરતું મર્યાદિત: લૉક્સ બ્રાઉઝરની અંદર રાખવામાં આવે છે અને વિવિધ બ્રાઉઝર્સ અથવા ઉપકરણોમાં સિંક્રોનાઇઝેશન પ્રદાન કરતા નથી. સર્વર-સાઇડ રિસોર્સ માટે, સર્વરે પણ લૉકિંગ મિકેનિઝમ્સનો અમલ કરવો આવશ્યક છે.
• એસિંક્રોનસ પ્રકૃતિ: આ API એસિંક્રોનસ છે, જેને પ્રોમિસ અને કોલબેક્સનું કાળજીપૂર્વક સંચાલન કરવાની જરૂર છે.

શ્રેષ્ઠ પ્રયાસો

• લૉક ટૂંકા રાખો: સ્પર્ધાની સંભાવના ઘટાડવા માટે લૉક રાખવાનો સમય ઓછો કરો.
• ચોક્કસ લૉક નામોનો ઉપયોગ કરો: તમારી એપ્લિકેશનના અન્ય ભાગો અથવા થર્ડ-પાર્ટી લાઇબ્રેરીઓ સાથેના સંઘર્ષને ટાળવા માટે વર્ણનાત્મક અને ચોક્કસ લૉક નામોનો ઉપયોગ કરો.
• એરર્સને હેન્ડલ કરો: અણધાર્યા વર્તનને રોકવા માટે એરર્સને યોગ્ય રીતે હેન્ડલ કરો.
• વિકલ્પો પર વિચાર કરો: મૂલ્યાંકન કરો કે શું વેબ લૉક API તમારા ચોક્કસ ઉપયોગના કિસ્સા માટે શ્રેષ્ઠ ઉકેલ છે. કેટલાક કિસ્સાઓમાં, ઓપ્ટિમિસ્ટિક લૉકિંગ અથવા સર્વર-સાઇડ લૉકિંગ જેવી અન્ય ટેકનિક વધુ યોગ્ય હોઈ શકે છે.
• સંપૂર્ણપણે પરીક્ષણ કરો: તમારા કોડનું સંપૂર્ણપણે પરીક્ષણ કરો જેથી ખાતરી થઈ શકે કે તે એકસાથે એક્સેસને યોગ્ય રીતે હેન્ડલ કરે છે. એકસાથે વપરાશનું અનુકરણ કરવા માટે બહુવિધ બ્રાઉઝર ટેબ્સ અને વિન્ડોઝનો ઉપયોગ કરો.

નિષ્કર્ષ

ફ્રન્ટએન્ડ વેબ લૉક API વેબ એપ્લિકેશન્સમાં શેર્ડ રિસોર્સ પર એકસાથે એક્સેસને મેનેજ કરવા માટે એક શક્તિશાળી અને અનુકૂળ માર્ગ પ્રદાન કરે છે. એક્સક્લુઝિવ અને શેર્ડ લૉકનો ઉપયોગ કરીને, તમે ડેટા કરપ્શનને અટકાવી શકો છો, ડેટાની સુસંગતતા સુનિશ્ચિત કરી શકો છો અને સમગ્ર વપરાશકર્તા અનુભવમાં સુધારો કરી શકો છો. તેની મર્યાદાઓ હોવા છતાં, વેબ લૉક API કોઈ પણ વેબ ડેવલપર માટે એક મૂલ્યવાન સાધન છે જે જટિલ એપ્લિકેશન્સ પર કામ કરે છે જેને શેર્ડ રિસોર્સ પર એકસાથે એક્સેસને હેન્ડલ કરવાની જરૂર હોય છે. બ્રાઉઝર સુસંગતતા ધ્યાનમાં લેવાનું, એરર્સને યોગ્ય રીતે હેન્ડલ કરવાનું અને તમારા કોડનું સંપૂર્ણ પરીક્ષણ કરવાનું યાદ રાખો જેથી ખાતરી થઈ શકે કે તે અપેક્ષા મુજબ કાર્ય કરે છે.

આ માર્ગદર્શિકામાં વર્ણવેલ વિભાવનાઓ અને તકનીકોને સમજીને, તમે આધુનિક વેબની માંગને પહોંચી વળવા માટે મજબૂત અને વિશ્વસનીય વેબ એપ્લિકેશન્સ બનાવવા માટે વેબ લૉક API નો અસરકારક રીતે લાભ લઈ શકો છો.