M

MLOG

Eesti

Õppige, kuidas kasutada service workereid, et luua esmajärjekorras võrguühenduseta töötavaid veebirakendusi, mis on kiired, usaldusväärsed ja kaasahaaravad kasutajatele üle maailma.

Service Workerid: Esmajärjekorras võrguühenduseta töötavate veebirakenduste loomine

Tänapäeva maailmas ootavad kasutajad, et veebirakendused oleksid kiired, usaldusväärsed ja kättesaadavad isegi siis, kui võrguühendus on piiratud või puudub. Siin tulebki mängu "esmajärjekorras võrguühenduseta" disaini kontseptsioon. Service workerid on võimas tehnoloogia, mis võimaldab arendajatel luua veebirakendusi, mis töötavad sujuvalt ka võrguühenduseta, pakkudes seeläbi paremat kasutajakogemust.

Mis on Service Workerid?

Service worker on JavaScripti fail, mis töötab taustal, eraldi brauseri põhilõimest. See toimib proksina veebirakenduse ja võrgu vahel, püüdes kinni võrgupäringuid ja hallates vahemällu salvestamist. Service workerid saavad hakkama selliste ülesannetega nagu:

Oluline on märkida, et service workereid kontrollib brauser, mitte veebileht. See võimaldab neil toimida isegi siis, kui kasutaja on vahelehe või brauseriakna sulgenud.

Miks esmajärjekorras võrguühenduseta?

Esmajärjekorras võrguühenduseta veebirakenduse loomine pakub mitmeid eeliseid:

Kuidas Service Workerid töötavad

Service workeri elutsükkel koosneb mitmest etapist:

  1. Registreerimine: Service worker registreeritakse brauseris, määrates rakenduse ulatuse, mida see kontrollib.
  2. Paigaldamine: Service worker paigaldatakse, mille käigus see tavaliselt salvestab staatilised varad vahemällu.
  3. Aktiveerimine: Service worker aktiveeritakse ja võtab veebirakenduse üle kontrolli. See võib hõlmata vanade service workerite eemaldamist ja vanade vahemälude puhastamist.
  4. Ooteseisund: Service worker jääb ooteseisundisse, oodates võrgupäringuid või muid sündmusi.
  5. Pärimine (Fetch): Kui tehakse võrgupäring, püüab service worker selle kinni ja võib serveerida kas vahemälus olevat sisu või pärida ressursi võrgust.

Võrguühenduseta funktsionaalsuse rakendamine Service Workeritega: Samm-sammuline juhend

Siin on põhiline näide, kuidas rakendada esmajärjekorras võrguühenduseta funktsionaalsust service workerite abil:

Samm 1: Registreeri Service Worker

Oma peamises JavaScripti failis (nt `app.js`): 


if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker on registreeritud ulatusega:', registration.scope);
    })
    .catch(function(error) {
      console.log('Service Workeri registreerimine ebaõnnestus:', error);
    });
}

See kood kontrollib, kas brauser toetab service workereid ja registreerib faili `service-worker.js`. Ulatus määratleb, milliseid URL-e service worker kontrollib.

Samm 2: Loo Service Workeri fail (service-worker.js)

Loo fail nimega `service-worker.js` järgmise koodiga:


const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/style.css',
  '/app.js',
  '/images/logo.png'
];

self.addEventListener('install', function(event) {
  // Teosta paigaldamise sammud
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Vahemälu avatud');
        return cache.addAll(urlsToCache);
      })
  );
});

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

        // TÄHTIS: Klooni päring.
        // Päring on voog ja seda saab tarbida vaid ühe korra. Kuna me tarbime seda
        // nii vahemälu kui ka brauseri fetch-käsuga, peame päringu kloonima.
        var fetchRequest = event.request.clone();

        return fetch(fetchRequest).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 seda tuleb tarbida vaid ühe korra.
            var responseToCache = response.clone();

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

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

self.addEventListener('activate', function(event) {

  var cacheWhitelist = [CACHE_NAME];

  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

See kood teeb järgmist:

Samm 3: Testi oma võrguühenduseta funktsionaalsust

Oma võrguühenduseta funktsionaalsuse testimiseks saad kasutada brauseri arendaja tööriistu. Chrome'is ava DevTools, mine vahekaardile "Application" ja vali "Service Workers". Seejärel saad simuleerida võrguühenduseta režiimi, märkides ruudu "Offline".

Service Workerite täiustatud tehnikad

Kui oled saanud service workeritest põhiteadmised, saad uurida täiustatud tehnikaid oma esmajärjekorras võrguühenduseta rakenduse täiustamiseks:

Vahemällu salvestamise strateegiad

Sõltuvalt ressursi tüübist ja rakenduse nõuetest on mitmeid vahemällu salvestamise strateegiaid, mida saad kasutada:

Õige vahemällu salvestamise strateegia valik sõltub konkreetsest ressursist ja teie rakenduse nõuetest. Näiteks staatilisi varasid nagu pildid ja CSS-failid on sageli kõige parem serveerida "Kõigepealt vahemälu" strateegiaga, samas kui dünaamiline sisu võib kasu saada "Kõigepealt võrk" või "Vahemälu, seejärel võrk" strateegiast.

Taustasünkroniseerimine

Taustasünkroniseerimine võimaldab lükata ülesandeid edasi, kuni kasutajal on stabiilne võrguühendus. See on kasulik selliste ülesannete jaoks nagu vormide esitamine või failide üleslaadimine. Näiteks võib kasutaja Indoneesia kauges piirkonnas täita vormi võrguühenduseta olles. Seejärel saab service worker oodata, kuni ühendus on saadaval, enne kui andmed edastab.

Tõuketeatised

Service workereid saab kasutada kasutajatele tõuketeatiste saatmiseks, isegi kui rakendus pole avatud. Seda saab kasutada kasutajate uuesti kaasamiseks ja õigeaegsete uuenduste pakkumiseks. Kujutage ette uudisterakendust, mis edastab värskeid uudiseid kasutajatele reaalajas, olenemata sellest, kas rakendus on aktiivselt töös.

Workbox

Workbox on JavaScripti teekide kogum, mis muudab service workerite loomise lihtsamaks. See pakub abstraktsioone tavaliste ülesannete jaoks, nagu vahemällu salvestamine, marsruutimine ja taustasünkroniseerimine. Workboxi kasutamine võib lihtsustada teie service workeri koodi ja muuta selle hooldatavamaks. Paljud ettevõtted kasutavad nüüd Workboxi standardkomponendina PWA-de ja esmajärjekorras võrguühenduseta kogemuste arendamisel.

Kaalutlused globaalsele publikule

Esmajärjekorras võrguühenduseta veebirakenduste loomisel globaalsele publikule on oluline arvestada järgmiste teguritega:

Näited esmajärjekorras võrguühenduseta rakendustest

Mitmed populaarsed veebirakendused on edukalt rakendanud esmajärjekorras võrguühenduseta funktsionaalsust service workerite abil:

Kokkuvõte

Service workerid on võimas tööriist esmajärjekorras võrguühenduseta veebirakenduste loomiseks, mis on kiired, usaldusväärsed ja kaasahaaravad. Varade vahemällu salvestamise, võrgupäringute kinnipüüdmise ja taustaülesannete haldamisega saavad service workerid pakkuda suurepärast kasutajakogemust isegi siis, kui võrguühendus on piiratud või puudub. Kuna võrgujuurdepääs on kogu maailmas endiselt ebaühtlane, on esmajärjekorras võrguühenduseta disainile keskendumine ülioluline, et tagada võrdne juurdepääs teabele ja teenustele veebis.

Järgides selles juhendis toodud samme ja arvestades eespool mainitud tegureid, saate luua veebirakendusi, mis töötavad sujuvalt võrguühenduseta ja pakuvad meeldivat kogemust kasutajatele üle maailma. Võtke omaks service workerite võimsus ja ehitage veebi tulevikku – tulevikku, kus veeb on kättesaadav kõigile, kõikjal, olenemata nende võrguühendusest.