Teenusetöötajate täiustatud strateegiad: vahemällu salvestamine ja taustal sünkroonimine

Teenusetöötajad on võimas tehnoloogia, mis võimaldab arendajatel luua progressiivseid veebirakendusi (PWA), millel on parem jõudlus, võrguühenduseta võimekus ja täiustatud kasutajakogemus. Need toimivad puhverserverina veebirakenduse ja võrgu vahel, võimaldades arendajatel võrgupäringuid kinni püüda ja vastata vahemällu salvestatud varadega või käivitada taustatoiminguid. See artikkel süveneb teenusetöötajate täiustatud vahemällu salvestamise strateegiatesse ja taustal sünkroonimise tehnikatesse, pakkudes praktilisi näiteid ja parimaid tavasid robustsete ja vastupidavate veebirakenduste loomiseks globaalsele publikule.

Teenusetöötajate mõistmine

Teenusetöötaja on JavaScripti fail, mis töötab taustal, eraldi brauseri põhilõimest. See suudab kinni püüda võrgupäringuid, salvestada ressursse vahemällu ja edastada tõukemärguandeid isegi siis, kui kasutaja veebirakendust aktiivselt ei kasuta. See võimaldab kiiremaid laadimisaegu, sisu võrguühenduseta juurdepääsu ja kaasahaaravamat kasutajakogemust.

Teenusetöötajate peamised omadused on järgmised:

• Vahemällu salvestamine: Varade lokaalne salvestamine jõudluse parandamiseks ja võrguühenduseta juurdepääsu võimaldamiseks.
• Taustal sünkroonimine: Toimingute edasilükkamine, kuni seadmel on võrguühendus.
• Tõukemärguanded: Kasutajate kaasamine õigeaegsete uuenduste ja teavitustega.
• Võrgupäringute kinnipüüdmine: Võrgupäringute käsitlemise kontrollimine.

Täiustatud vahemällu salvestamise strateegiad

Õige vahemällu salvestamise strateegia valimine on veebirakenduse jõudluse optimeerimiseks ja sujuva kasutajakogemuse tagamiseks ülioluline. Siin on mõned täiustatud vahemällu salvestamise strateegiad, mida kaaluda:

1. Esmalt vahemälu (Cache-First)

Esmalt vahemälu strateegia seab esikohale sisu serveerimise vahemälust, kui see on vähegi võimalik. See lähenemine on ideaalne staatiliste varade jaoks, nagu pildid, CSS-failid ja JavaScripti failid, mis muutuvad harva.

Kuidas see töötab:

1. Teenusetöötaja püüab võrgupäringu kinni.
2. See kontrollib, kas soovitud vara on vahemälus saadaval.
3. Kui see leitakse, serveeritakse vara otse vahemälust.
4. Kui seda ei leita, tehakse päring võrku ja vastus salvestatakse tulevaseks kasutamiseks vahemällu.

Näide:

            self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // Vahemälu tabamus - tagasta vastus
        if (response) {
          return response;
        }

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

            // OLULINE: Kloonige vastus. Vastus on voog
            // ja kuna me tahame, et brauser tarbiks vastust
            // ning ka vahemälu tarbiks vastust, peame
            // selle kloonima, et meil oleks kaks voogu.
            var responseToCache = response.clone();

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

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

            

              
                Copy
              
            
          

2. Esmalt võrk (Network-First)

Esmalt võrk strateegia seab esikohale sisu hankimise võrgust, kui see on vähegi võimalik. Kui võrgupäring ebaõnnestub, langeb teenusetöötaja tagasi vahemälule. See strateegia sobib sageli uuendatava sisu jaoks, kus värskus on ülioluline.

Kuidas see töötab:

1. Teenusetöötaja püüab võrgupäringu kinni.
2. See üritab vara võrgust hankida.
3. Kui võrgupäring õnnestub, serveeritakse ja salvestatakse vara vahemällu.
4. Kui võrgupäring ebaõnnestub (nt võrguvea tõttu), kontrollib teenusetöötaja vahemälu.
5. Kui vara leitakse vahemälust, serveeritakse see.
6. Kui vara ei leita vahemälust, kuvatakse veateade (või pakutakse varuvastust).

Näide:

            self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request)
      .then(response => {
        // Kontrolli, kas saime kehtiva vastuse
        if(!response || response.status !== 200 || response.type !== 'basic') {
          return response;
        }

        // OLULINE: Kloonige vastus. Vastus on voog
        // ja kuna me tahame, et brauser tarbiks vastust
        // ning ka vahemälu tarbiks vastust, peame
        // selle kloonima, et meil oleks kaks voogu.
        var responseToCache = response.clone();

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

        return response;
      })
      .catch(err => {
        // Võrgupäring ebaõnnestus, proovi seda vahemälust saada.
        return caches.match(event.request);
      })
  );
});

            

              
                Copy
              
            
          

3. Vananenud, samal ajal uuesti valideerides (Stale-While-Revalidate)

Strateegia „Vananenud, samal ajal uuesti valideerides“ tagastab kohe vahemällu salvestatud sisu, samal ajal hankides võrgust uusima versiooni. See tagab kiire esialgse laadimise koos vahemälu taustal värskendamise eelisega.

Kuidas see töötab:

1. Teenusetöötaja püüab võrgupäringu kinni.
2. See tagastab kohe vara vahemällu salvestatud versiooni (kui see on saadaval).
3. Taustal hangib see võrgust vara uusima versiooni.
4. Kui võrgupäring on edukas, värskendatakse vahemälu uue versiooniga.

Näide:

            self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(cachedResponse => {
        // Isegi kui vastus on vahemälus, hangime selle võrgust
        // ja värskendame vahemälu taustal.
        var fetchPromise = fetch(event.request).then(
          networkResponse => {
            caches.open(CACHE_NAME).then(cache => {
              cache.put(event.request, networkResponse.clone());
              return networkResponse;
            });
          })
        // Tagasta vahemällu salvestatud vastus, kui see on olemas, vastasel juhul tagasta võrguvastus
        return cachedResponse || fetchPromise;
      })
  );
});

            

              
                Copy
              
            
          

4. Vahemälu, seejärel võrk (Cache, then Network)

Strateegia „Vahemälu, seejärel võrk“ püüab esmalt serveerida sisu vahemälust. Samaaegselt hangib see võrgust uusima versiooni ja värskendab vahemälu. See strateegia on kasulik sisu kiireks kuvamiseks, tagades samal ajal, et kasutaja saab lõpuks kõige ajakohasemat teavet. See sarnaneb strateegiaga „Vananenud, samal ajal uuesti valideerides“, kuid tagab, et võrgupäring tehakse *alati* ja vahemälu värskendatakse, mitte ainult vahemälust möödalaskmisel.

Kuidas see töötab:

1. Teenusetöötaja püüab võrgupäringu kinni.
2. See tagastab kohe vara vahemällu salvestatud versiooni (kui see on saadaval).
3. See hangib alati võrgust vara uusima versiooni.
4. Kui võrgupäring on edukas, värskendatakse vahemälu uue versiooniga.

Näide:

            self.addEventListener('fetch', event => {
  // Esmalt vasta sellega, mis on juba vahemälus
  event.respondWith(caches.match(event.request));

  // Seejärel uuenda vahemälu võrguvastusega. See käivitab uue
  // 'fetch' sündmuse, mis vastab uuesti vahemällu salvestatud väärtusega
  // (kohe), samal ajal kui vahemälu taustal uuendatakse.
  event.waitUntil(
    fetch(event.request).then(response =>
      caches.open(CACHE_NAME).then(cache => cache.put(event.request, response))
    )
  );
});

            

              
                Copy
              
            
          

5. Ainult võrk (Network Only)

See strateegia sunnib teenusetöötajat alati ressurssi võrgust hankima. Kui võrk pole saadaval, ebaõnnestub päring. See on kasulik ressursside jaoks, mis on väga dünaamilised ja peavad alati olema ajakohased, näiteks reaalajas andmevood.

Kuidas see töötab:

1. Teenusetöötaja püüab võrgupäringu kinni.
2. See üritab vara võrgust hankida.
3. Kui see õnnestub, serveeritakse vara.
4. Kui võrgupäring ebaõnnestub, visatakse viga.

Näide:

            self.addEventListener('fetch', event => {
  event.respondWith(fetch(event.request));
});

            

              
                Copy
              
            
          

6. Ainult vahemälu (Cache Only)

See strateegia sunnib teenusetöötajat alati ressurssi vahemälust tooma. Kui ressurss pole vahemälus saadaval, ebaõnnestub päring. See sobib varadele, mis on selgesõnaliselt vahemällu salvestatud ja mida ei tohiks kunagi võrgust hankida, näiteks võrguühenduseta varuleheküljed.

Kuidas see töötab:

1. Teenusetöötaja püüab võrgupäringu kinni.
2. See kontrollib, kas vara on vahemälus saadaval.
3. Kui see leitakse, serveeritakse vara otse vahemälust.
4. Kui seda ei leita, visatakse viga.

Näide:

            self.addEventListener('fetch', event => {
  event.respondWith(caches.match(event.request));
});

            

              
                Copy
              
            
          

7. Dünaamiline vahemällu salvestamine

Dünaamiline vahemällu salvestamine hõlmab ressursside vahemällu salvestamist, mis ei ole teenusetöötaja installimise ajal teada. See on eriti kasulik API vastuste ja muu dünaamilise sisu vahemällu salvestamiseks. Saate kasutada 'fetch' sündmust, et püüda kinni võrgupäringuid ja salvestada vastused vahemällu nende saabumisel.

Näide:

            self.addEventListener('fetch', event => {
  if (event.request.url.startsWith('https://api.example.com/')) {
    event.respondWith(
      caches.open('dynamic-cache').then(cache => {
        return fetch(event.request).then(response => {
          cache.put(event.request, response.clone());
          return response;
        });
      })
    );
  }
});

            

              
                Copy
              
            
          

Taustal sünkroonimine

Taustal sünkroonimine võimaldab teil edasi lükata ülesandeid, mis nõuavad võrguühendust, kuni seadmel on stabiilne ühendus. See on eriti kasulik stsenaariumide puhul, kus kasutajad võivad olla võrguühenduseta või neil on katkendlik ühendus, näiteks vormide esitamine, sõnumite saatmine või andmete värskendamine. See parandab oluliselt kasutajakogemust ebausaldusväärse võrguga piirkondades (nt arengumaade maapiirkondades).

Taustal sünkroonimiseks registreerimine

Taustal sünkroonimise kasutamiseks peate oma teenusetöötaja registreerima `sync` sündmuse jaoks. Seda saab teha oma veebirakenduse koodis:

            navigator.serviceWorker.ready.then(function(swRegistration) {
  return swRegistration.sync.register('my-background-sync');
});

            

              
                Copy
              
            
          

Siin on `'my-background-sync'` silt, mis identifitseerib konkreetse sünkroonimissündmuse. Erinevat tüüpi taustaülesannete jaoks saate kasutada erinevaid silte.

Sünkroonimissündmuse käsitlemine

Oma teenusetöötajas peate kuulama `sync` sündmust ja käsitlema taustaülesannet. Näiteks:

            self.addEventListener('sync', event => {
  if (event.tag === 'my-background-sync') {
    event.waitUntil(
      doSomeBackgroundTask()
    );
  }
});

            

              
                Copy
              
            
          

Meetod `event.waitUntil()` annab brauserile teada, et teenusetöötaja tuleb hoida elus, kuni lubadus (promise) laheneb. See tagab, et taustaülesanne viiakse lõpule isegi siis, kui kasutaja veebirakenduse sulgeb.

Näide: Vormi esitamine taustal

Vaatleme näidet, kus kasutaja esitab vormi võrguühenduseta olekus. Vormi andmeid saab salvestada lokaalselt ja esitamise saab edasi lükata, kuni seadmel on võrguühendus.

1. Vormi andmete salvestamine:

Kui kasutaja esitab vormi, salvestage andmed IndexedDB-sse:

            function submitForm(formData) {
  // Salvesta vormi andmed IndexedDB-sse
  openDatabase().then(db => {
    const tx = db.transaction('submissions', 'readwrite');
    const store = tx.objectStore('submissions');
    store.add(formData);
    return tx.done;
  }).then(() => {
    // Registreeri taustal sünkroonimiseks
    return navigator.serviceWorker.ready;
  }).then(swRegistration => {
    return swRegistration.sync.register('form-submission');
  });
}

            

              
                Copy
              
            
          

2. Sünkroonimissündmuse käsitlemine:

Teenusetöötajas kuulake `sync` sündmust ja esitage vormi andmed serverile:

            self.addEventListener('sync', event => {
  if (event.tag === 'form-submission') {
    event.waitUntil(
      openDatabase().then(db => {
        const tx = db.transaction('submissions', 'readwrite');
        const store = tx.objectStore('submissions');
        return store.getAll();
      }).then(submissions => {
        // Esita iga vormi andmed serverile
        return Promise.all(submissions.map(formData => {
          return fetch('/submit-form', {
            method: 'POST',
            body: JSON.stringify(formData),
            headers: {
              'Content-Type': 'application/json'
            }
          }).then(response => {
            if (response.ok) {
              // Eemalda vormi andmed IndexedDB-st
              return openDatabase().then(db => {
                const tx = db.transaction('submissions', 'readwrite');
                const store = tx.objectStore('submissions');
                store.delete(formData.id);
                return tx.done;
              });
            }
            throw new Error('Failed to submit form');
          });
        }));
      }).catch(error => {
        console.error('Failed to submit forms:', error);
      })
    );
  }
});

            

              
                Copy
              
            
          

Teenusetöötaja rakendamise parimad tavad

Eduka teenusetöötaja rakendamise tagamiseks kaaluge järgmisi parimaid tavasid:

• Hoidke teenusetöötaja skript lihtsana: Vältige teenusetöötaja skriptis keerulist loogikat, et minimeerida vigu ja tagada optimaalne jõudlus.
• Testige põhjalikult: Testige oma teenusetöötaja rakendust erinevates brauserites ja võrgutingimustes, et tuvastada ja lahendada võimalikke probleeme. Kasutage brauseri arendajatööriistu (nt Chrome DevTools) teenusetöötaja käitumise kontrollimiseks.
• Käsitlege vigu sujuvalt: Rakendage veakäsitlust, et sujuvalt käsitleda võrguvigu, vahemälust möödalaskmisi ja muid ootamatuid olukordi. Pakkuge kasutajale informatiivseid veateateid.
• Kasutage versioonimist: Rakendage oma teenusetöötajale versioonimist, et tagada värskenduste korrektne rakendamine. Muudatuste tegemisel suurendage vahemälu nime või teenusetöötaja failinime.
• Jälgige jõudlust: Jälgige oma teenusetöötaja rakenduse jõudlust, et leida parenduskohti. Kasutage jõudlusmõõdikute mõõtmiseks tööriistu nagu Lighthouse.
• Kaaluge turvalisust: Teenusetöötajad töötavad turvalises kontekstis (HTTPS). Alati paigutage oma veebirakendus HTTPS-i kaudu, et kaitsta kasutajaandmeid ja vältida pealtkuulamisrünnakuid (man-in-the-middle).
• Pakkuge varusisu: Rakendage võrguühenduseta stsenaariumide jaoks varusisu, et pakkuda põhiline kasutajakogemus isegi siis, kui seade pole võrguga ühendatud.

Näiteid teenusetöötajaid kasutavatest globaalsetest rakendustest

• Google Maps Go: See Google Mapsi kerge versioon kasutab teenusetöötajaid, et pakkuda võrguühenduseta juurdepääsu kaartidele ja navigeerimisele, mis on eriti kasulik piiratud ühenduvusega piirkondades.
• Starbucksi PWA: Starbucksi progressiivne veebirakendus võimaldab kasutajatel menüüd sirvida, tellimusi esitada ja oma kontosid hallata isegi võrguühenduseta. See parandab kasutajakogemust kehva mobiilside või Wi-Fi-ga piirkondades.
• Twitter Lite: Twitter Lite kasutab teenusetöötajaid säutsude ja piltide vahemällu salvestamiseks, vähendades andmekasutust ja parandades jõudlust aeglastes võrkudes. See on eriti väärtuslik kasutajatele arengumaades, kus on kallid andmesideplaanid.
• AliExpressi PWA: AliExpressi PWA kasutab teenusetöötajaid kiiremaks laadimiseks ja tootekataloogide võrguühenduseta sirvimiseks, parandades ostukogemust kasutajatele üle maailma.

Kokkuvõte

Teenusetöötajad on võimas tööriist kaasaegsete veebirakenduste loomiseks, millel on parem jõudlus, võrguühenduseta võimekus ja täiustatud kasutajakogemus. Täiustatud vahemällu salvestamise strateegiate ja taustal sünkroonimise tehnikate mõistmise ja rakendamisega saavad arendajad luua robustseid ja vastupidavaid rakendusi, mis töötavad sujuvalt erinevates võrgutingimustes ja seadmetes, luues parema kogemuse kõigile kasutajatele, olenemata nende asukohast või võrgu kvaliteedist. Veebitehnoloogiate arenedes mängivad teenusetöötajad veebi tuleviku kujundamisel üha olulisemat rolli.