Padziļinātas Service Worker stratēģijas: kešatmiņas izmantošana un fona sinhronizācija

Service Workers ir jaudīga tehnoloģija, kas ļauj izstrādātājiem veidot progresīvās tīmekļa lietotnes (PWA) ar uzlabotu veiktspēju, bezsaistes iespējām un labāku lietotāja pieredzi. Tie darbojas kā starpniekserveris starp tīmekļa lietotni un tīklu, ļaujot izstrādātājiem pārtvert tīkla pieprasījumus un atbildēt ar kešatmiņā saglabātiem resursiem vai iniciēt fona uzdevumus. Šis raksts iedziļinās padziļinātās Service Worker kešatmiņas stratēģijās un fona sinhronizācijas metodēs, sniedzot praktiskus piemērus un labāko praksi stabilu un noturīgu tīmekļa lietotņu izveidei globālai auditorijai.

Izpratne par Service Workers

Service Worker ir JavaScript fails, kas darbojas fonā, atsevišķi no pārlūkprogrammas galvenā pavediena. Tas var pārtvert tīkla pieprasījumus, kešot resursus un nosūtīt paziņojumus, pat ja lietotājs aktīvi neizmanto tīmekļa lietotni. Tas nodrošina ātrāku ielādes laiku, bezsaistes piekļuvi saturam un saistošāku lietotāja pieredzi.

Galvenās Service Workers funkcijas ietver:

• Kešatmiņas izmantošana: Resursu glabāšana lokāli, lai uzlabotu veiktspēju un nodrošinātu bezsaistes piekļuvi.
• Fona sinhronizācija: Uzdevumu atlikšana, lai tos izpildītu, kad ierīcei ir tīkla savienojums.
• Push paziņojumi: Lietotāju iesaistīšana ar savlaicīgiem atjauninājumiem un paziņojumiem.
• Tīkla pieprasījumu pārtveršana: Kontrole pār to, kā tiek apstrādāti tīkla pieprasījumi.

Padziļinātas kešatmiņas stratēģijas

Pareizas kešatmiņas stratēģijas izvēle ir būtiska, lai optimizētu tīmekļa lietotnes veiktspēju un nodrošinātu nevainojamu lietotāja pieredzi. Šeit ir dažas padziļinātas kešatmiņas stratēģijas, kuras vērts apsvērt:

1. Vispirms kešatmiņa (Cache-First)

Stratēģija "Vispirms kešatmiņa" dod priekšroku satura pasniegšanai no kešatmiņas, kad vien tas ir iespējams. Šī pieeja ir ideāli piemērota statiskiem resursiem, piemēram, attēliem, CSS failiem un JavaScript failiem, kas reti mainās.

Kā tas darbojas:

1. Service Worker pārtver tīkla pieprasījumu.
2. Tas pārbauda, vai pieprasītais resurss ir pieejams kešatmiņā.
3. Ja atrasts, resurss tiek pasniegts tieši no kešatmiņas.
4. Ja nav atrasts, pieprasījums tiek veikts tīklam, un atbilde tiek saglabāta kešatmiņā turpmākai lietošanai.

Piemērs:

            self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // Cache hit - return response
        if (response) {
          return response;
        }

        // Not in cache - return fetch
        return fetch(event.request).then(
          function(response) {
            // Check if we received a valid response
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // IMPORTANT: Clone the response. A response is a stream
            // and because we want the browser to consume the response
            // as well as the cache consuming the response, we need
            // to clone it so we have two streams.
            var responseToCache = response.clone();

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

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

            

              
                Copy
              
            
          

2. Vispirms tīkls (Network-First)

Stratēģija "Vispirms tīkls" dod priekšroku satura ielādei no tīkla, kad vien tas ir iespējams. Ja tīkla pieprasījums neizdodas, Service Worker atgriežas pie kešatmiņas. Šī stratēģija ir piemērota bieži atjauninātam saturam, kur svaigums ir būtisks.

Kā tas darbojas:

1. Service Worker pārtver tīkla pieprasījumu.
2. Tas mēģina ielādēt resursu no tīkla.
3. Ja tīkla pieprasījums ir veiksmīgs, resurss tiek pasniegts un saglabāts kešatmiņā.
4. Ja tīkla pieprasījums neizdodas (piem., tīkla kļūdas dēļ), Service Worker pārbauda kešatmiņu.
5. Ja resurss tiek atrasts kešatmiņā, tas tiek pasniegts.
6. Ja resurss nav atrodams kešatmiņā, tiek parādīts kļūdas ziņojums (vai tiek sniegta rezerves atbilde).

Piemērs:

            self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request)
      .then(response => {
        // Check if we received a valid response
        if(!response || response.status !== 200 || response.type !== 'basic') {
          return response;
        }

        // IMPORTANT: Clone the response. A response is a stream
        // and because we want the browser to consume the response
        // as well as the cache consuming the response, we need
        // to clone it so we have two streams.
        var responseToCache = response.clone();

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

        return response;
      })
      .catch(err => {
        // Network request failed, try to get it from the cache.
        return caches.match(event.request);
      })
  );
});

            

              
                Copy
              
            
          

3. Novecojis, kamēr tiek atkārtoti validēts (Stale-While-Revalidate)

Stratēģija "Novecojis, kamēr tiek atkārtoti validēts" nekavējoties atgriež kešatmiņā saglabāto saturu, vienlaikus fonā ielādējot jaunāko versiju no tīkla. Tas nodrošina ātru sākotnējo ielādi ar priekšrocību, ka kešatmiņa tiek atjaunināta fonā.

Kā tas darbojas:

1. Service Worker pārtver tīkla pieprasījumu.
2. Tas nekavējoties atgriež resursa kešoto versiju (ja pieejama).
3. Fonā tas ielādē jaunāko resursa versiju no tīkla.
4. Kad tīkla pieprasījums ir veiksmīgs, kešatmiņa tiek atjaunināta ar jauno versiju.

Piemērs:

            self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(cachedResponse => {
        // Even if the response is in the cache, we fetch it from the network
        // and update the cache in the background.
        var fetchPromise = fetch(event.request).then(
          networkResponse => {
            caches.open(CACHE_NAME).then(cache => {
              cache.put(event.request, networkResponse.clone());
              return networkResponse;
            });
          })
        // Return the cached response if we have it, otherwise return the network response
        return cachedResponse || fetchPromise;
      })
  );
});

            

              
                Copy
              
            
          

4. Kešatmiņa, tad tīkls (Cache, then Network)

Stratēģija "Kešatmiņa, tad tīkls" vispirms mēģina pasniegt saturu no kešatmiņas. Vienlaikus tā ielādē jaunāko versiju no tīkla un atjaunina kešatmiņu. Šī stratēģija ir noderīga, lai ātri parādītu saturu, vienlaikus nodrošinot, ka lietotājs galu galā saņem visjaunāko informāciju. Tā ir līdzīga "Stale-While-Revalidate", bet nodrošina, ka tīkla pieprasījums tiek veikts *vienmēr* un kešatmiņa tiek atjaunināta, nevis tikai tad, ja kešatmiņā nav atbilstības.

Kā tas darbojas:

1. Service Worker pārtver tīkla pieprasījumu.
2. Tas nekavējoties atgriež resursa kešoto versiju (ja pieejama).
3. Tas vienmēr ielādē jaunāko resursa versiju no tīkla.
4. Kad tīkla pieprasījums ir veiksmīgs, kešatmiņa tiek atjaunināta ar jauno versiju.

Piemērs:

            self.addEventListener('fetch', event => {
  // First respond with what's already in the cache
  event.respondWith(caches.match(event.request));

  // Then update the cache with the network response.  This will trigger a
  // new 'fetch' event, which will again respond with the cached value
  // (immediately) while the cache is updated in the background.
  event.waitUntil(
    fetch(event.request).then(response =>
      caches.open(CACHE_NAME).then(cache => cache.put(event.request, response))
    )
  );
});

            

              
                Copy
              
            
          

5. Tikai tīkls (Network Only)

Šī stratēģija liek Service Worker vienmēr ielādēt resursu no tīkla. Ja tīkls nav pieejams, pieprasījums neizdosies. Tas ir noderīgi resursiem, kas ir ļoti dinamiski un kuriem vienmēr jābūt aktuāliem, piemēram, reāllaika datu plūsmām.

Kā tas darbojas:

1. Service Worker pārtver tīkla pieprasījumu.
2. Tas mēģina ielādēt resursu no tīkla.
3. Ja veiksmīgi, resurss tiek pasniegts.
4. Ja tīkla pieprasījums neizdodas, tiek izmesta kļūda.

Piemērs:

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

            

              
                Copy
              
            
          

6. Tikai kešatmiņa (Cache Only)

Šī stratēģija liek Service Worker vienmēr izgūt resursu no kešatmiņas. Ja resurss nav pieejams kešatmiņā, pieprasījums neizdosies. Tas ir piemērots resursiem, kas ir skaidri saglabāti kešatmiņā un nekad nevajadzētu tikt ielādētiem no tīkla, piemēram, bezsaistes rezerves lapām.

Kā tas darbojas:

1. Service Worker pārtver tīkla pieprasījumu.
2. Tas pārbauda, vai resurss ir pieejams kešatmiņā.
3. Ja atrasts, resurss tiek pasniegts tieši no kešatmiņas.
4. Ja nav atrasts, tiek izmesta kļūda.

Piemērs:

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

            

              
                Copy
              
            
          

7. Dinamiskā kešatmiņas izmantošana

Dinamiskā kešatmiņas izmantošana ietver resursu kešošanu, kas nav zināmi Service Worker instalēšanas laikā. Tas ir īpaši noderīgi, lai kešotu API atbildes un citu dinamisku saturu. Jūs varat izmantot `fetch` notikumu, lai pārtvertu tīkla pieprasījumus un kešotu atbildes, kad tās tiek saņemtas.

Piemērs:

            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
              
            
          

Fona sinhronizācija

Fona sinhronizācija ļauj atlikt uzdevumus, kuriem nepieciešams tīkla savienojums, līdz brīdim, kad ierīcei ir stabils savienojums. Tas ir īpaši noderīgi situācijās, kad lietotāji var būt bezsaistē vai ar pārtrauktu savienojumu, piemēram, iesniedzot veidlapas, sūtot ziņojumus vai atjauninot datus. Tas dramatiski uzlabo lietotāja pieredzi vietās ar neuzticamiem tīkliem (piem., lauku apvidos jaunattīstības valstīs).

Reģistrēšanās fona sinhronizācijai

Lai izmantotu fona sinhronizāciju, jums jāreģistrē savs Service Worker `sync` notikumam. To var izdarīt jūsu tīmekļa lietotnes kodā:

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

            

              
                Copy
              
            
          

Šeit `'my-background-sync'` ir tags, kas identificē konkrēto sinhronizācijas notikumu. Jūs varat izmantot dažādus tagus dažādiem fona uzdevumu veidiem.

Sync notikuma apstrāde

Jūsu Service Worker ir jāklausās `sync` notikums un jāapstrādā fona uzdevums. Piemēram:

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

            

              
                Copy
              
            
          

`event.waitUntil()` metode norāda pārlūkprogrammai uzturēt Service Worker aktīvu, līdz solījums (promise) tiek izpildīts. Tas nodrošina, ka fona uzdevums tiek pabeigts, pat ja lietotājs aizver tīmekļa lietotni.

Piemērs: veidlapas iesniegšana fonā

Apskatīsim piemēru, kur lietotājs iesniedz veidlapu bezsaistē. Veidlapas datus var saglabāt lokāli, un iesniegšanu var atlikt, līdz ierīcei ir tīkla savienojums.

1. Veidlapas datu glabāšana:

Kad lietotājs iesniedz veidlapu, saglabājiet datus IndexedDB:

            function submitForm(formData) {
  // Store the form data in IndexedDB
  openDatabase().then(db => {
    const tx = db.transaction('submissions', 'readwrite');
    const store = tx.objectStore('submissions');
    store.add(formData);
    return tx.done;
  }).then(() => {
    // Register for background sync
    return navigator.serviceWorker.ready;
  }).then(swRegistration => {
    return swRegistration.sync.register('form-submission');
  });
}

            

              
                Copy
              
            
          

2. Sync notikuma apstrāde:

Service Worker klausieties `sync` notikumu un iesniedziet veidlapas datus serverim:

            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 => {
        // Submit each form data to the server
        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) {
              // Remove the form data from IndexedDB
              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
              
            
          

Labākā prakse Service Worker ieviešanai

Lai nodrošinātu veiksmīgu Service Worker ieviešanu, apsveriet šādas labākās prakses:

• Uzturiet Service Worker skriptu vienkāršu: Izvairieties no sarežģītas loģikas Service Worker skriptā, lai samazinātu kļūdas un nodrošinātu optimālu veiktspēju.
• Rūpīgi testējiet: Pārbaudiet savu Service Worker ieviešanu dažādās pārlūkprogrammās un tīkla apstākļos, lai identificētu un atrisinātu iespējamās problēmas. Izmantojiet pārlūkprogrammas izstrādātāju rīkus (piem., Chrome DevTools), lai pārbaudītu Service Worker darbību.
• Eleganti apstrādājiet kļūdas: Ieviesiet kļūdu apstrādi, lai eleganti apstrādātu tīkla kļūdas, kešatmiņas trūkumus un citas neparedzētas situācijas. Sniedziet lietotājam informatīvus kļūdu ziņojumus.
• Izmantojiet versiju kontroli: Ieviesiet versiju kontroli savam Service Worker, lai nodrošinātu, ka atjauninājumi tiek piemēroti pareizi. Veicot izmaiņas, palieliniet kešatmiņas nosaukumu vai Service Worker faila nosaukumu.
• Pārraugiet veiktspēju: Pārraugiet sava Service Worker ieviešanas veiktspēju, lai identificētu uzlabojumu jomas. Izmantojiet tādus rīkus kā Lighthouse, lai mērītu veiktspējas metriku.
• Apsveriet drošību: Service Workers darbojas drošā kontekstā (HTTPS). Vienmēr izvietojiet savu tīmekļa lietotni, izmantojot HTTPS, lai aizsargātu lietotāju datus un novērstu "man-in-the-middle" uzbrukumus.
• Nodrošiniet rezerves saturu: Ieviesiet rezerves saturu bezsaistes scenārijiem, lai nodrošinātu pamata lietotāja pieredzi pat tad, ja ierīce nav savienota ar tīklu.

Globālu lietotņu piemēri, kas izmanto Service Workers

• Google Maps Go: Šī vieglā Google Maps versija izmanto Service Workers, lai nodrošinātu bezsaistes piekļuvi kartēm un navigācijai, kas ir īpaši noderīgi apgabalos ar ierobežotu savienojamību.
• Starbucks PWA: Starbucks progresīvā tīmekļa lietotne ļauj lietotājiem pārlūkot ēdienkarti, veikt pasūtījumus un pārvaldīt savus kontus pat bezsaistē. Tas uzlabo lietotāja pieredzi apgabalos ar sliktu mobilo sakaru vai Wi-Fi pārklājumu.
• Twitter Lite: Twitter Lite izmanto Service Workers, lai kešotu tvītus un attēlus, samazinot datu patēriņu un uzlabojot veiktspēju lēnos tīklos. Tas ir īpaši vērtīgi lietotājiem jaunattīstības valstīs ar dārgiem datu plāniem.
• AliExpress PWA: AliExpress PWA izmanto Service Workers ātrākiem ielādes laikiem un produktu katalogu bezsaistes pārlūkošanai, uzlabojot iepirkšanās pieredzi lietotājiem visā pasaulē.

Noslēgums

Service Workers ir spēcīgs rīks mūsdienīgu tīmekļa lietotņu veidošanai ar uzlabotu veiktspēju, bezsaistes iespējām un labāku lietotāja pieredzi. Izprotot un ieviešot padziļinātas kešatmiņas stratēģijas un fona sinhronizācijas metodes, izstrādātāji var radīt stabilas un noturīgas lietotnes, kas nevainojami darbojas dažādos tīkla apstākļos un ierīcēs, radot labāku pieredzi visiem lietotājiem neatkarīgi no viņu atrašanās vietas vai tīkla kvalitātes. Tā kā tīmekļa tehnoloģijas turpina attīstīties, Service Workers spēlēs arvien nozīmīgāku lomu tīmekļa nākotnes veidošanā.