Frontend progressiivsed veebirakendused: Service Worker'i implementeerimise meisterlik valdamine

Progressiivsed veebirakendused (PWA-d) esindavad märkimisväärset arengut veebiarenduses, ületades lõhe traditsiooniliste veebisaitide ja natiivsete mobiilirakenduste vahel. Üks PWA-de aluseks olevatest põhitehnoloogiatest on Service Worker. See juhend pakub põhjalikku ülevaadet Service Worker'i implementeerimisest, hõlmates põhimõisteid, praktilisi näiteid ja parimaid tavasid robustsete ja kaasahaaravate PWA-de loomiseks globaalsele publikule.

Mis on Service Worker?

Service Worker on JavaScripti fail, mis töötab taustal, eraldi teie veebilehest. See toimib programmeeritava võrguproksina, püüdes kinni võrgupäringuid ja võimaldades teil kontrollida, kuidas teie PWA neid käsitleb. See võimaldab selliseid funktsioone nagu:

• Võrguühenduseta funktsionaalsus: Võimaldab kasutajatel sisule juurde pääseda ja teie rakendust kasutada isegi siis, kui nad on võrguühenduseta.
• Vahemällu salvestamine: Varade (HTML, CSS, JavaScript, pildid) salvestamine laadimisaegade parandamiseks.
• Tõuketeavitused: Õigeaegsete värskenduste edastamine ja kasutajatega suhtlemine isegi siis, kui nad teie rakendust aktiivselt ei kasuta.
• Taustsünkroonimine: Ülesannete edasilükkamine, kuni kasutajal on stabiilne internetiühendus.

Service Worker'id on ülioluline element tõeliselt rakenduselaadse kogemuse loomisel veebis, muutes teie PWA usaldusväärsemaks, kaasahaaravamaks ja jõudsamaks.

Service Worker'i elutsükkel

Service Worker'i elutsükli mõistmine on korrektseks implementeerimiseks hädavajalik. Elutsükkel koosneb mitmest etapist:

1. Registreerimine: Brauser registreerib Service Worker'i kindla ulatuse (URL-id, mida see kontrollib) jaoks.
2. Installimine: Service Worker installitakse. See on koht, kus tavaliselt salvestatakse olulised varad vahemällu.
3. Aktiveerimine: Service Worker muutub aktiivseks ja hakkab võrgupäringuid kontrollima.
4. Ooterežiim: Service Worker töötab taustal, oodates sündmusi.
5. Uuendamine: Tuvastatakse Service Worker'i uus versioon, mis käivitab uuendusprotsessi.
6. Lõpetamine: Brauser lõpetab Service Worker'i töö ressursside säästmiseks.

Service Worker'i implementeerimine: samm-sammuline juhend

1. Service Worker'i registreerimine

Esimene samm on registreerida oma Service Worker peamises JavaScripti failis (nt `app.js`).

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

            

              
                Copy
              
            
          

See kood kontrollib, kas `serviceWorker` API on brauseris toetatud. Kui on, registreerib see faili `service-worker.js`. Oluline on käsitleda võimalikke vigu registreerimise ajal, et pakkuda sujuvat tagavara brauseritele, mis Service Worker'eid ei toeta.

2. Service Worker'i faili (service-worker.js) loomine

Siin asub teie Service Worker'i põhiloogika. Alustame installimisfaasist.

Installimine

Installimisfaasi ajal salvestate tavaliselt vahemällu olulised varad, mis on vajalikud teie PWA võrguühenduseta toimimiseks. See hõlmab teie HTML-i, CSS-i, JavaScripti ja potentsiaalselt pilte ning fonte.

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

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('Vahemälu avatud');
        return cache.addAll(urlsToCache);
      })
  );
});

            

              
                Copy
              
            
          

See kood defineerib vahemälu nime (`CACHE_NAME`) ja massiivi URL-idest, mis tuleb vahemällu salvestada (`urlsToCache`). Sündmusekuulaja `install` käivitub, kui Service Worker installitakse. Meetod `event.waitUntil()` tagab, et installimisprotsess lõpetatakse enne, kui Service Worker muutub aktiivseks. Selle sees avame määratud nimega vahemälu ja lisame kõik URL-id vahemällu. Kaaluge versioonimise lisamist oma vahemälu nimele (`my-pwa-cache-v1`), et vahemälu rakenduse uuendamisel hõlpsasti tühistada.

Aktiveerimine

Aktiveerimisfaas on see, kui teie Service Worker muutub aktiivseks ja hakkab võrgupäringuid kontrollima. Selles faasis on hea tava kustutada kõik vanad vahemälud.

            self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

            

              
                Copy
              
            
          

See kood hangib kõigi vahemälude nimede loendi ja kustutab kõik vahemälud, mis ei kuulu `cacheWhitelist`'i. See tagab, et teie PWA kasutab alati teie varade uusimat versiooni.

Ressursside pärimine

Sündmusekuulaja `fetch` käivitub iga kord, kui brauser teeb võrgupäringu. Siin saate päringu kinni püüda ja serveerida vahemällu salvestatud sisu või pärida ressursi võrgust, kui see pole vahemälus.

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

        // Pole vahemälus - päri ja lisa vahemällu
        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 me tahame, et nii brauser kui ka vahemälu tarbiksid vastust,
            // peame selle kloonima, et meil oleks kaks sõltumatut koopiat.
            const responseToCache = response.clone();

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

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

            

              
                Copy
              
            
          

See kood kontrollib esmalt, kas nõutud ressurss on vahemälus. Kui on, tagastab see vahemälus oleva vastuse. Kui ei ole, pärib see ressursi võrgust. Kui võrgupäring on edukas, kloonib see vastuse ja lisab selle vahemällu enne brauserile tagastamist. Seda strateegiat tuntakse kui "vahemälu-enne, seejärel võrk".

Vahemällu salvestamise strateegiad

Erinevad vahemällu salvestamise strateegiad sobivad erinevat tüüpi ressurssidele. Siin on mõned levinud strateegiad:

• Vahemälu-enne, seejärel võrk: Service Worker kontrollib esmalt, kas ressurss on vahemälus. Kui on, tagastab see vahemälus oleva vastuse. Kui ei ole, pärib see ressursi võrgust ja lisab selle vahemällu. See on hea strateegia staatiliste varade, nagu HTML, CSS ja JavaScript, jaoks.
• Võrk-enne, seejärel vahemälu: Service Worker proovib esmalt ressurssi võrgust pärida. Kui võrgupäring on edukas, tagastab see võrguvastuse ja lisab selle vahemällu. Kui võrgupäring ebaõnnestub (nt võrguühenduseta režiimi tõttu), tagastab see vahemälus oleva vastuse. See on hea strateegia dünaamilise sisu jaoks, mis peab olema ajakohane.
• Ainult vahemälu: Service Worker tagastab ressursse ainult vahemälust. See on hea strateegia varadele, mis tõenäoliselt ei muutu.
• Ainult võrk: Service Worker pärib ressursse alati võrgust. See on hea strateegia ressurssidele, mis peavad alati olema ajakohased.
• Aegunud-kuni-uuesti-valideerimiseni (Stale-While-Revalidate): Service Worker tagastab kohe vahemälus oleva vastuse ja pärib seejärel ressursi taustal võrgust. Kui võrgupäring lõpeb, uuendab see vahemälu uue vastusega. See tagab kiire esmase laadimise ja kindlustab, et kasutaja näeb lõpuks uusimat sisu.

Õige vahemällu salvestamise strateegia valik sõltub teie PWA spetsiifilistest nõuetest ja päritava ressursi tüübist. Arvestage uuenduste sagedust, ajakohaste andmete olulisust ja soovitud jõudlusnäitajaid.

Uuenduste käsitlemine

Kui uuendate oma Service Worker'it, tuvastab brauser muudatused ja käivitab uuendusprotsessi. Uus Service Worker installitakse taustal ja see aktiveerub, kui kõik vana Service Worker'it kasutavad avatud vahelehed on suletud. Saate uuenduse sundida, kutsudes `skipWaiting()` `install`-sündmuse sees ja `clients.claim()` `activate`-sündmuse sees.

            self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('Vahemälu avatud');
        return cache.addAll(urlsToCache);
      }).then(() => self.skipWaiting())
  );
});

self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    }).then(() => self.clients.claim())
  );
});

            

              
                Copy
              
            
          

`skipWaiting()` sunnib ootava Service Worker'i muutuma aktiivseks Service Worker'iks. `clients.claim()` võimaldab Service Worker'il kontrollida kõiki kliente oma ulatuses, isegi neid, mis käivitusid ilma selleta.

Tõuketeavitused

Service Worker'id võimaldavad tõuketeavitusi, mis lubavad teil kasutajaid uuesti kaasata isegi siis, kui nad teie PWA-d aktiivselt ei kasuta. See nõuab Push API ja tõuketeenuse, nagu Firebase Cloud Messaging (FCM), kasutamist.

Märkus: Tõuketeavituste seadistamine on keerulisem ja nõuab serveripoolseid komponente. See jaotis annab üldise ülevaate.

1. Kasutaja tellimus: Küsige kasutajalt luba tõuketeavituste saatmiseks. Kui luba antakse, hankige brauserist tõuketellimus.
2. Saatke tellimus oma serverisse: Saatke tõuketellimus oma serverisse. See tellimus sisaldab teavet, mis on vajalik tõukesõnumite saatmiseks kasutaja brauserisse.
3. Saatke tõukesõnumeid: Kasutage tõuketeenust nagu FCM, et saata tõukesõnumeid kasutaja brauserisse, kasutades tõuketellimust.
4. Käsitlege tõukesõnumeid Service Worker'is: Oma Service Worker'is kuulake `push`-sündmust ja kuvage kasutajale teavitus.

Siin on lihtsustatud näide `push`-sündmuse käsitlemisest teie Service Worker'is:

            self.addEventListener('push', event => {
  const data = event.data.json();
  const options = {
    body: data.body,
    icon: '/images/icon.png'
  };

  event.waitUntil(
    self.registration.showNotification(data.title, options)
  );
});

            

              
                Copy
              
            
          

Taustsünkroonimine

Taustsünkroonimine võimaldab teil ülesandeid edasi lükata, kuni kasutajal on stabiilne internetiühendus. See on kasulik stsenaariumide puhul, nagu vormide esitamine või failide üleslaadimine, kui kasutaja on võrguühenduseta.

1. Registreeruge taustsünkroonimiseks: Oma peamises JavaScripti failis registreeruge taustsünkroonimiseks, kasutades `navigator.serviceWorker.ready.then(registration => registration.sync.register('my-sync'));`
2. Käsitlege sünkroonimissündmust Service Worker'is: Oma Service Worker'is kuulake `sync`-sündmust ja sooritage edasilükatud ülesanne.

Siin on lihtsustatud näide `sync`-sündmuse käsitlemisest teie Service Worker'is:

            self.addEventListener('sync', event => {
  if (event.tag === 'my-sync') {
    event.waitUntil(
      // Soorita edasilükatud ülesanne siin
      doSomething()
    );
  }
});

            

              
                Copy
              
            
          

Service Worker'i implementeerimise parimad tavad

• Hoidke oma Service Worker väike ja tõhus: Suur Service Worker võib teie PWA-d aeglustada.
• Kasutage vahemällu salvestamise strateegiat, mis sobib päritava ressursi tüübile: Erinevad ressursid nõuavad erinevaid vahemällu salvestamise strateegiaid.
• Käsitlege vigu sujuvalt: Pakkuge tagavarakogemust brauseritele, mis ei toeta Service Worker'eid või kui Service Worker ebaõnnestub.
• Testige oma Service Worker'it põhjalikult: Kasutage brauseri arendustööriistu oma Service Worker'i kontrollimiseks ja veendumaks, et see töötab korrektselt.
• Arvestage globaalse ligipääsetavusega: Kujundage oma PWA nii, et see oleks ligipääsetav puuetega kasutajatele, sõltumata nende asukohast või seadmest.
• Kasutage HTTPS-i: Service Worker'id nõuavad turvalisuse tagamiseks HTTPS-i.
• Jälgige jõudlust: Kasutage tööriistu nagu Lighthouse, et jälgida oma PWA jõudlust ja tuvastada parendusvaldkondi.

Service Worker'ite silumine

Service Worker'ite silumine võib olla keeruline, kuid brauseri arendustööriistad pakuvad mitmeid funktsioone, mis aitavad teil probleeme lahendada:

• Vahekaart "Application": Chrome DevTools'i vahekaart "Application" pakub teavet teie Service Worker'i kohta, sealhulgas selle staatust, ulatust ja sündmusi.
• Konsool: Kasutage konsooli oma Service Worker'ist sõnumite logimiseks.
• Vahekaart "Network": Vahekaart "Network" näitab kõiki teie PWA tehtud võrgupäringuid ja osutab, kas need serveeriti vahemälust või võrgust.

Internatsionaliseerimise ja lokaliseerimise kaalutlused

Globaalsele publikule PWA-sid ehitades arvestage järgmiste internatsionaliseerimise ja lokaliseerimise aspektidega:

• Keeletugi: Kasutage oma PWA keele määramiseks HTML-is atribuuti `lang`. Pakkuge tõlkeid kogu tekstisisule.
• Kuupäeva ja kellaaja vormindamine: Kasutage objekti `Intl`, et vormindada kuupäevi ja kellaaegu vastavalt kasutaja lokaadile.
• Numbrite vormindamine: Kasutage objekti `Intl`, et vormindada numbreid vastavalt kasutaja lokaadile.
• Valuuta vormindamine: Kasutage objekti `Intl`, et vormindada valuutasid vastavalt kasutaja lokaadile.
• Paremalt vasakule (RTL) tugi: Veenduge, et teie PWA toetab RTL-keeli nagu araabia ja heebrea keel.
• Sisu edastusvõrk (CDN): Kasutage CDN-i oma PWA varade edastamiseks üle maailma asuvatest serveritest, parandades jõudlust erinevates piirkondades asuvate kasutajate jaoks.

Näiteks kaaluge PWA-d, mis pakub e-kaubanduse teenuseid. Kuupäeva vorming peaks kohanduma kasutaja asukohaga. USAs on tavaline kasutada MM/DD/YYYY, samas kui Euroopas eelistatakse DD/MM/YYYY. Samamoodi peavad valuutasümbolid ja numbrite vormindamine vastavalt kohanema. Jaapani kasutaja ootaks hindu JPY-des koos vastava vormindusega.

Ligipääsetavuse kaalutlused

Ligipääsetavus on ülioluline, et muuta teie PWA kasutatavaks kõigile, sealhulgas puuetega kasutajatele. Arvestage järgmiste ligipääsetavuse aspektidega:

• Semantiline HTML: Kasutage semantilisi HTML-elemente, et anda oma sisule struktuur ja tähendus.
• ARIA atribuudid: Kasutage ARIA atribuute, et parandada oma PWA ligipääsetavust.
• Klaviatuuriga navigeerimine: Veenduge, et teie PWA on täielikult navigeeritav klaviatuuri abil.
• Ekraanilugeja ühilduvus: Testige oma PWA-d ekraanilugejaga, et tagada selle ligipääsetavus pimedatele või vaegnägijatele.
• Värvikontrastsus: Kasutage piisavat värvikontrasti teksti ja taustavärvide vahel, et muuta oma PWA loetavaks vaegnägijatele.

Näiteks veenduge, et kõigil interaktiivsetel elementidel oleksid korrektsed ARIA-sildid, et ekraanilugeja kasutajad mõistaksid nende eesmärki. Klaviatuuriga navigeerimine peaks olema intuitiivne, selge fookusjärjekorraga. Tekstil peaks olema piisav kontrastsus tausta suhtes, et see sobiks vaegnägijatele.

Kokkuvõte

Service Worker'id on võimas tööriist robustsete ja kaasahaaravate PWA-de ehitamiseks. Mõistes Service Worker'i elutsüklit, rakendades vahemällu salvestamise strateegiaid ja käsitledes uuendusi, saate luua PWA-sid, mis pakuvad sujuvat kasutajakogemust isegi võrguühenduseta. Globaalsele publikule ehitades ärge unustage arvestada internatsionaliseerimise, lokaliseerimise ja ligipääsetavusega, et tagada teie PWA kasutatavus kõigile, sõltumata nende asukohast, keelest või võimetest. Järgides selles juhendis toodud parimaid tavasid, saate Service Worker'i implementeerimise meisterlikult selgeks ja luua erakordseid PWA-sid, mis vastavad mitmekesise globaalse kasutajaskonna vajadustele.