Esirakenduse PWA taustaülesannete ajastamine: võrguühenduseta töö haldamine

Progressiivsed veebirakendused (PWA-d) on veebimaailma revolutsiooniliselt muutnud, pakkudes natiivrakendustega sarnaseid kogemusi, sealhulgas võrguühenduseta võimekust. Hästi disainitud PWA oluline aspekt on võime hallata ülesandeid taustal, isegi kui kasutaja on võrguühenduseta. See blogipostitus uurib erinevaid tehnikaid taustaülesannete ajastamise rakendamiseks esirakenduse PWA-des, võimaldades töökindlat võrguühenduseta töö haldamist ja paremat kasutajakogemust.

Taustaülesannete ajastamise vajaduse mõistmine

Ühendatud maailmas peame internetiühendust sageli iseenesestmõistetavaks. Ühenduvus võib aga olla ebausaldusväärne, katkendlik või puududa täielikult, eriti teatud geograafilistes asukohtades või reisimise ajal. PWA-d lahendavad selle probleemi, võimaldades kasutajatel rakendusega edasi suhelda isegi võrguühenduseta. Taustaülesannete ajastamine on hädavajalik järgmistel põhjustel:

• Andmete sünkroonimine: Andmete sünkroonimine PWA ja serveri vahel, kui kasutaja taas ühenduse saab. See hõlmab võrguühenduseta kogutud andmete (nt vormide esitamised, pildid) üleslaadimist ja uuendatud sisu allalaadimist.
• Edasilükatud ülesanded: Ülesannete täitmine, mis ei nõua kohest kasutaja sekkumist, näiteks analüütikaandmete saatmine või keerukate arvutuste tegemine.
• Sisu eelnev toomine: Ressursside allalaadimine taustal jõudluse parandamiseks ja sisu võrguühenduseta kättesaadavuse tagamiseks.

Taustaülesannete ajastamise põhitehnoloogiad

Taustaülesannete ajastamise rakendamisel PWA-des on abiks mitmed tehnoloogiad ja API-d:

1. Service Worker

Service Worker on PWA võrguühenduseta võimekuse süda. See toimib puhverserverina veebirakenduse ja võrgu vahel, püüdes kinni võrgupäringuid ja pakkudes võrguühenduseta olles vahemälus olevaid vastuseid. See võimaldab ka taustaülesandeid läbi:

• Sündmuste kuulajad: Sündmuste nagu install, activate, fetch ja sync kuulamine.
• Cache API: Varade salvestamine ja toomine brauseri vahemälust.
• Background Sync API: Ülesannete ajastamine, mis täidetakse, kui kasutaja taas ühenduse saab.

2. IndexedDB

IndexedDB on kliendipoolne NoSQL-andmebaas, mis võimaldab PWA-del salvestada struktureeritud andmeid võrguühenduseta. See on ideaalne andmete salvestamiseks, mis tuleb hiljem serveriga sünkroonida.

3. Background Sync API

Background Sync API võimaldab Service Workeril registreerida ülesandeid, mis tuleks täita, kui brauser tuvastab võrguühenduse. See on eriti kasulik andmete sünkroonimiseks, mis loodi või mida muudeti võrguühenduseta olekus.

4. Periodic Background Sync API

Periodic Background Sync API, mis on Background Sync API laiendus, võimaldab ajastada perioodilisi ülesandeid, mis täidetakse taustal, isegi kui rakendust aktiivselt ei kasutata. See on kasulik selliste ülesannete jaoks nagu viimaste uudiste pealkirjade toomine või ilmateate uuendamine.

5. Background Fetch API

Background Fetch API laseb Service Workeril suuri faile taustal alla laadida, isegi kui kasutaja lehelt lahkub. See on kasulik sisu eelnevaks toomiseks või varade allalaadimiseks võrguühenduseta kasutamiseks.

Taustaülesannete ajastamise rakendamine: samm-sammuline juhend

Siin on praktiline juhend taustaülesannete ajastamise rakendamiseks PWA-s, kasutades Background Sync API-t:

1. samm: registreerige Service Worker

Esmalt registreerige Service Worker oma peamises JavaScripti failis:

            
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(function(err) {
      console.log('Service Worker registration failed:', err);
    });
}

            

              
                Copy
              
            
          

2. samm: püüdke Service Workeris kinni võrgupäringud

Oma `service-worker.js` failis püüdke kinni võrgupäringud ja serveerige võrguühenduseta olles vahemälus olevaid vastuseid:

            
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Vahemälus olemas - tagasta vastus
        if (response) {
          return response;
        }

        // Pole vahemälus - hangi võrgust
        return fetch(event.request).then(
          function(response) {
            // Kontrolli, kas saime kehtiva vastuse
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // TÄHTIS: Klooni vastus. Vastus on voog
            // ja kuna tahame, et nii vahemälu kui ka rakendus seda kasutaksid,
            // peame selle kloonima.
            var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
  );
});

            

              
                Copy
              
            
          

3. samm: salvestage andmed võrguühenduseta IndexedDB-sse

Kui kasutaja on võrguühenduseta, salvestage andmed IndexedDB-sse. Näiteks salvestame vormi esitamised:

            
function saveFormDataOffline(formData) {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('offline-data', 1);

    request.onerror = (event) => {
      reject('Viga andmebaasi avamisel');
    };

    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      const objectStore = db.createObjectStore('submissions', { autoIncrement: true });
      objectStore.createIndex('timestamp', 'timestamp', { unique: false });
    };

    request.onsuccess = (event) => {
      const db = event.target.result;
      const transaction = db.transaction(['submissions'], 'readwrite');
      const objectStore = transaction.objectStore('submissions');
      const submission = {
        data: formData,
        timestamp: Date.now()
      };
      const addRequest = objectStore.add(submission);

      addRequest.onsuccess = () => {
        resolve('Andmed salvestati võrguühenduseta');
      };

      addRequest.onerror = () => {
        reject('Viga andmete võrguühenduseta salvestamisel');
      };

      transaction.oncomplete = () => {
        db.close();
      };
    };
  });
}

            

              
                Copy
              
            
          

4. samm: registreerige taustsünkroonimise ülesanne

Registreerige taustsünkroonimise ülesanne, et sünkroonida andmed, kui kasutaja taas ühenduse saab:

            
function registerSync() {
  navigator.serviceWorker.ready.then(function(registration) {
    return registration.sync.register('sync-form-data');
  }).then(function() {
    console.log('Taustsünkroonimine registreeritud!');
  }).catch(function(error) {
    console.log('Taustsünkroonimise registreerimine ebaõnnestus: ', error);
  });
}

            

              
                Copy
              
            
          

5. samm: kuulake Service Workeris sünkroonimissündmust

Oma `service-worker.js` failis kuulake `sync`-sündmust ja sünkroonige andmed:

            
self.addEventListener('sync', function(event) {
  if (event.tag === 'sync-form-data') {
    event.waitUntil(syncFormData());
  }
});

function syncFormData() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('offline-data', 1);

    request.onerror = (event) => {
      reject('Viga andmebaasi avamisel');
    };

    request.onsuccess = (event) => {
      const db = event.target.result;
      const transaction = db.transaction(['submissions'], 'readwrite');
      const objectStore = transaction.objectStore('submissions');
      const getAllRequest = objectStore.getAll();

      getAllRequest.onsuccess = () => {
        const submissions = getAllRequest.result;
        if (submissions.length > 0) {
          // Saada andmed serverisse
          Promise.all(submissions.map(submission => sendDataToServer(submission.data)))
            .then(() => {
              // Tühjenda IndexedDB
              const clearRequest = objectStore.clear();
              clearRequest.onsuccess = () => {
                resolve('Andmed sünkroonitud ja kustutatud');
              };
              clearRequest.onerror = () => {
                reject('Viga IndexedDB tühjendamisel');
              };
            })
            .catch(error => {
              reject('Viga andmete serverisse saatmisel: ' + error);
            });
        } else {
          resolve('Sünkroonitavaid andmeid pole');
        }
      };

      getAllRequest.onerror = () => {
        reject('Viga andmete hankimisel IndexedDB-st');
      };

      transaction.oncomplete = () => {
        db.close();
      };
    };
  });
}

function sendDataToServer(data) {
  // Asenda oma tegeliku API lõpp-punktiga
  const apiUrl = '/api/submit-form';

  return fetch(apiUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  }).then(response => {
    if (!response.ok) {
      throw new Error('Võrguvastus ei olnud korras');
    }
    return response.json();
  });
}

            

              
                Copy
              
            
          

Periodic Background Sync API kasutamine

Periodic Background Sync API on kasulik ülesannete jaoks, mida tuleb regulaarselt täita, näiteks värskete uudiste toomiseks või ilmateate uuendamiseks. Siin on, kuidas seda kasutada:

1. samm: kontrollige tuge

Esmalt kontrollige, kas brauser toetab Periodic Background Sync API-t:

            
if ('periodicSync' in registration) {
  // Periodic Background Sync API on toetatud
} else {
  console.log('Periodic Background Sync API ei ole toetatud');
}

            

              
                Copy
              
            
          

2. samm: küsige luba

Periodic Background Sync API kasutamiseks peate kasutajalt luba küsima:

            
navigator.permissions.query({ name: 'periodic-background-sync' })
  .then((status) => {
    if (status.state === 'granted') {
      // Perioodilist taustsünkroonimist saab kasutada
    } else {
      console.log('Perioodilise taustsünkroonimise luba pole antud');
    }
  });

            

              
                Copy
              
            
          

3. samm: registreerige perioodiline sünkroonimisülesanne

Registreerige perioodiline sünkroonimisülesanne Service Workeris:

            
registration.periodicSync.register('update-news', {
  minInterval: 24 * 60 * 60 * 1000, // 1 päev
}).then(() => {
  console.log('Perioodiline taustsünkroonimine uudiste uuendamiseks on registreeritud');
}).catch((error) => {
  console.error('Perioodilise taustsünkroonimise registreerimine ebaõnnestus: ', error);
});

            

              
                Copy
              
            
          

4. samm: käsitlege perioodilist sünkroonimissündmust

Käsitlege Service Workeris `sync`-sündmust, et täita perioodiline ülesanne:

            
self.addEventListener('sync', (event) => {
  if (event.tag === 'update-news') {
    event.waitUntil(updateNews());
  }
});

function updateNews() {
  // Hangi värskeimad uudised serverist
  return fetch('/api/news')
    .then(response => response.json())
    .then(news => {
      // Salvesta uudised IndexedDB-sse
      return storeNewsInIndexedDB(news);
    })
    .catch(error => {
      console.error('Viga uudiste uuendamisel: ', error);
    });
}

            

              
                Copy
              
            
          

Vigade käsitlemine ja parimad tavad

Taustaülesannete ajastamise rakendamine nõuab hoolikat vigade käsitlemist ja parimate tavade arvestamist:

• Korduskatsete mehhanismid: rakendage ebaõnnestunud ülesannete jaoks eksponentsiaalse ooteajaga korduskatsete mehhanisme.
• Idempotentsus: veenduge, et ülesanded on idempotentsed, mis tähendab, et nende mitmekordne täitmine annab sama tulemuse kui ühekordne täitmine. See on oluline, et vältida andmete rikkumist korduskatsete korral.
• Aku optimeerimine: olge taustaülesannete ajastamisel tähelepanelik akutarbimise suhtes. Vältige sagedasi ülesandeid, mis võivad aku kiiresti tühjendada.
• Kasutaja teavitamine: andke kasutajale tagasisidet taustaülesannete oleku kohta, eriti kui need hõlmavad andmete sünkroonimist.
• Turvakaalutlused: salvestage tundlikke andmeid IndexedDB-s turvaliselt ja kaitske saidiülese skriptimise (XSS) haavatavuste eest.
• Testimine: testige oma taustaülesannete ajastamise rakendust põhjalikult erinevates võrgutingimustes ja brauserikeskkondades.

Rahvusvahelistamise ja lokaliseerimise kaalutlused

Globaalsele sihtrühmale PWA-sid arendades on oluline arvestada rahvusvahelistamise (i18n) ja lokaliseerimisega (l10n):

• Keeletugi: toetage mitut keelt ja lubage kasutajatel valida eelistatud keel.
• Kuupäeva ja kellaaja vormindamine: kasutage erinevate piirkondade jaoks sobivaid kuupäeva- ja kellaajavorminguid.
• Numbrite vormindamine: kasutage erinevate piirkondade jaoks sobivaid numbrivorminguid, sealhulgas kümnendkoha- ja tuhandete eraldajaid.
• Valuuta vormindamine: kuvage valuutaväärtusi erinevate piirkondade jaoks õigete sümbolite ja vorminguga.
• Tõlge: tõlkige kogu kasutajale nähtav tekst toetatud keeltesse.
• Paremalt vasakule (RTL) tugi: toetage RTL-keeli nagu araabia ja heebrea keel.

Teegid nagu i18next ja Moment.js võivad aidata teie PWA-s i18n ja l10n lihtsustada.

Näited reaalsetest PWA-dest, mis kasutavad taustaülesannete ajastamist

Mitmed reaalsed PWA-d kasutavad taustaülesannete ajastamist, et pakkuda sujuvat võrguühenduseta kogemust:

• Google Docs: võimaldab kasutajatel luua ja redigeerida dokumente võrguühenduseta, sünkroonides muudatused, kui ühendus taastub.
• Twitter Lite: võimaldab kasutajatel koostada ja saata säutse võrguühenduseta, laadides need üles, kui ollakse taas võrgus.
• Starbucks: laseb kasutajatel esitada tellimusi võrguühenduseta, mis seejärel saadetakse, kui ühendus on saadaval.
• AliExpress: võimaldab tooteid sirvida ja neid ostukorvi lisada võrguühenduseta, sünkroonides need uuesti ühenduse loomisel.

Kokkuvõte

Taustaülesannete ajastamine on kaasaegsete PWA-de kriitiline komponent, mis võimaldab töökindlat võrguühenduseta töö haldamist ja parandab kasutajakogemust. Kasutades tehnoloogiaid nagu Service Workerid, IndexedDB ja Background Sync API, saavad arendajad luua PWA-sid, mis pakuvad sujuvat ja usaldusväärset funktsionaalsust isegi võrguühenduse puudumisel. Kuna PWA-d arenevad jätkuvalt, on taustaülesannete ajastamise valdamine oluline tõeliselt kaasahaaravate ja globaalselt kättesaadavate veebirakenduste loomiseks. Ärge unustage seada esikohale vigade käsitlemist, aku optimeerimist ja kasutajate tagasisidet, et luua lihvitud ja kasutajasõbralik kogemus mitmekesisele ülemaailmsele publikule.