Progresivne spletne aplikacije za frontend: Obvladovanje implementacije Service Workerjev

Progresivne spletne aplikacije (PWA) predstavljajo pomemben evolucijski korak v spletnem razvoju, saj premoščajo vrzel med tradicionalnimi spletnimi stranmi in nativnimi mobilnimi aplikacijami. Ena izmed osrednjih tehnologij, ki podpirajo PWA, je Service Worker. Ta vodnik ponuja celovit pregled implementacije Service Workerja, ki zajema ključne koncepte, praktične primere in najboljše prakse za izgradnjo robustnih in privlačnih PWA za globalno občinstvo.

Kaj je Service Worker?

Service Worker je JavaScript datoteka, ki se izvaja v ozadju, ločeno od vaše spletne strani. Deluje kot programabilni omrežni posrednik (proxy), ki prestreza omrežne zahteve in vam omogoča nadzor nad tem, kako jih vaša PWA obravnava. To omogoča funkcije, kot so:

• Delovanje brez povezave: Uporabnikom omogoča dostop do vsebine in uporabo aplikacije tudi, ko niso povezani s spletom.
• Predpomnjenje: Shranjevanje sredstev (HTML, CSS, JavaScript, slike) za izboljšanje časov nalaganja.
• Potisna obvestila: Pošiljanje pravočasnih posodobitev in ohranjanje stika z uporabniki, tudi ko aktivno ne uporabljajo vaše aplikacije.
• Sinhronizacija v ozadju: Odlaganje nalog, dokler uporabnik nima stabilne internetne povezave.

Service Workerji so ključni element pri ustvarjanju izkušnje na spletu, ki je resnično podobna aplikaciji, saj naredijo vašo PWA bolj zanesljivo, privlačno in zmogljivo.

Življenjski cikel Service Workerja

Razumevanje življenjskega cikla Service Workerja je ključnega pomena za pravilno implementacijo. Življenjski cikel je sestavljen iz več faz:

1. Registracija: Brskalnik registrira Service Worker za določen obseg (URL-je, ki jih nadzoruje).
2. Namestitev: Service Worker se namesti. Tukaj običajno predpomnite ključna sredstva.
3. Aktivacija: Service Worker postane aktiven in začne nadzorovati omrežne zahteve.
4. Nedejavnost: Service Worker se izvaja v ozadju in čaka na dogodke.
5. Posodobitev: Zaznana je nova različica Service Workerja, kar sproži postopek posodobitve.
6. Prekinitev: Brskalnik prekine delovanje Service Workerja, da prihrani vire.

Implementacija Service Workerja: Vodnik po korakih

1. Registracija Service Workerja

Prvi korak je registracija vašega Service Workerja v vaši glavni JavaScript datoteki (npr. `app.js`).

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

            

              
                Copy
              
            
          

Ta koda preveri, ali brskalnik podpira API `serviceWorker`. Če ga, registrira datoteko `service-worker.js`. Pomembno je obravnavati morebitne napake med registracijo, da zagotovite nemoteno delovanje v brskalnikih, ki ne podpirajo Service Workerjev.

2. Ustvarjanje datoteke Service Worker (service-worker.js)

Tukaj se nahaja osrednja logika vašega Service Workerja. Začnimo s fazo namestitve.

Namestitev

Med fazo namestitve boste običajno predpomnili ključna sredstva, ki so potrebna za delovanje vaše PWA brez povezave. To vključuje vaš HTML, CSS, JavaScript in potencialno slike ter pisave.

            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('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

            

              
                Copy
              
            
          

Ta koda določi ime predpomnilnika (`CACHE_NAME`) in seznam URL-jev za predpomnjenje (`urlsToCache`). Poslušalec dogodka `install` se sproži, ko je Service Worker nameščen. Metoda `event.waitUntil()` zagotavlja, da se postopek namestitve zaključi, preden Service Worker postane aktiven. Znotraj odpremo predpomnilnik z določenim imenom in vanj dodamo vse URL-je. Razmislite o dodajanju različic v ime predpomnilnika (`my-pwa-cache-v1`), da boste lažje razveljavili predpomnilnik ob posodobitvi aplikacije.

Aktivacija

Faza aktivacije je, ko vaš Service Worker postane aktiven in začne nadzorovati omrežne zahteve. V tej fazi je dobra praksa, da počistite vse stare predpomnilnike.

            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
              
            
          

Ta koda pridobi seznam vseh imen predpomnilnikov in izbriše vse, ki niso na belem seznamu (`cacheWhitelist`). To zagotavlja, da vaša PWA vedno uporablja najnovejšo različico vaših sredstev.

Pridobivanje virov

Poslušalec dogodka `fetch` se sproži vsakič, ko brskalnik pošlje omrežno zahtevo. Tu lahko prestrežete zahtevo in postrežete vsebino iz predpomnilnika ali pa pridobite vir iz omrežja, če ni predpomnjen.

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

        // Not in cache - fetch and add to cache
        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 independent copies.
            const responseToCache = response.clone();

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

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

            

              
                Copy
              
            
          

Ta koda najprej preveri, ali je zahtevani vir v predpomnilniku. Če je, vrne odgovor iz predpomnilnika. Če ga ni, pridobi vir iz omrežja. Če je omrežna zahteva uspešna, klonira odgovor in ga doda v predpomnilnik, preden ga vrne brskalniku. Ta strategija je znana kot "Najprej predpomnilnik, nato omrežje".

Strategije predpomnjenja

Različne strategije predpomnjenja so primerne za različne vrste virov. Tu je nekaj pogostih strategij:

• Najprej predpomnilnik, nato omrežje: Service Worker najprej preveri, ali je vir v predpomnilniku. Če je, vrne odgovor iz predpomnilnika. Če ga ni, pridobi vir iz omrežja in ga doda v predpomnilnik. To je dobra strategija za statična sredstva, kot so HTML, CSS in JavaScript.
• Najprej omrežje, nato predpomnilnik: Service Worker najprej poskuša pridobiti vir iz omrežja. Če je omrežna zahteva uspešna, vrne odgovor iz omrežja in ga doda v predpomnilnik. Če omrežna zahteva ne uspe (npr. zaradi načina brez povezave), vrne odgovor iz predpomnilnika. To je dobra strategija za dinamično vsebino, ki mora biti ažurna.
• Samo predpomnilnik: Service Worker vrača vire samo iz predpomnilnika. To je dobra strategija za sredstva, ki se verjetno ne bodo spreminjala.
• Samo omrežje: Service Worker vedno pridobiva vire iz omrežja. To je dobra strategija za vire, ki morajo biti vedno ažurni.
• Postrezi iz predpomnilnika, posodobi v ozadju (Stale-While-Revalidate): Service Worker takoj vrne odgovor iz predpomnilnika, nato pa v ozadju pridobi vir iz omrežja. Ko se omrežna zahteva zaključi, posodobi predpomnilnik z novim odgovorom. To zagotavlja hitro začetno nalaganje in zagotavlja, da bo uporabnik sčasoma videl najnovejšo vsebino.

Izbira prave strategije predpomnjenja je odvisna od specifičnih zahtev vaše PWA in vrste zahtevanega vira. Upoštevajte pogostost posodobitev, pomembnost ažurnih podatkov in želene značilnosti delovanja.

Upravljanje posodobitev

Ko posodobite svoj Service Worker, bo brskalnik zaznal spremembe in sprožil postopek posodobitve. Novi Service Worker se bo namestil v ozadju in postal aktiven, ko se zaprejo vsi odprti zavihki, ki uporabljajo stari Service Worker. Posodobitev lahko vsilite s klicem `skipWaiting()` znotraj dogodka `install` in `clients.claim()` znotraj dogodka `activate`.

            self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('Opened cache');
        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()` prisili čakajoči Service Worker, da postane aktivni Service Worker. `clients.claim()` omogoča Service Workerju, da prevzame nadzor nad vsemi klienti v svojem obsegu, tudi tistimi, ki so se zagnali brez njega.

Potisna obvestila

Service Workerji omogočajo potisna obvestila, s katerimi lahko ponovno pritegnete uporabnike, tudi ko aktivno ne uporabljajo vaše PWA. To zahteva uporabo Push API-ja in storitve za potisna obvestila, kot je Firebase Cloud Messaging (FCM).

Opomba: Nastavitev potisnih obvestil je bolj zapletena in zahteva komponente na strani strežnika. Ta odsek ponuja splošen pregled.

1. Naročite uporabnika: Prosite uporabnika za dovoljenje za pošiljanje potisnih obvestil. Če je dovoljenje odobreno, pridobite naročnino na potisna obvestila od brskalnika.
2. Pošljite naročnino na svoj strežnik: Pošljite naročnino na potisna obvestila na svoj strežnik. Ta naročnina vsebuje informacije, potrebne za pošiljanje potisnih sporočil v uporabnikov brskalnik.
3. Pošljite potisna sporočila: Uporabite storitev za potisna obvestila, kot je FCM, za pošiljanje potisnih sporočil v uporabnikov brskalnik z uporabo naročnine na potisna obvestila.
4. Obravnavajte potisna sporočila v Service Workerju: V svojem Service Workerju poslušajte dogodek `push` in prikažite obvestilo uporabniku.

Tu je poenostavljen primer obravnave dogodka `push` v vašem Service Workerju:

            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
              
            
          

Sinhronizacija v ozadju

Sinhronizacija v ozadju vam omogoča, da odložite naloge, dokler uporabnik nima stabilne internetne povezave. To je uporabno za primere, kot so oddajanje obrazcev ali nalaganje datotek, ko je uporabnik brez povezave.

1. Registrirajte se za sinhronizacijo v ozadju: V vaši glavni JavaScript datoteki se registrirajte za sinhronizacijo v ozadju z uporabo `navigator.serviceWorker.ready.then(registration => registration.sync.register('my-sync'));`
2. Obravnavajte dogodek `sync` v Service Workerju: V vašem Service Workerju poslušajte dogodek `sync` in izvedite odloženo nalogo.

Tu je poenostavljen primer obravnave dogodka `sync` v vašem Service Workerju:

            self.addEventListener('sync', event => {
  if (event.tag === 'my-sync') {
    event.waitUntil(
      // Perform the deferred task here
      doSomething()
    );
  }
});

            

              
                Copy
              
            
          

Najboljše prakse za implementacijo Service Workerja

• Ohranjajte svoj Service Worker majhen in učinkovit: Velik Service Worker lahko upočasni vašo PWA.
• Uporabite strategijo predpomnjenja, ki je primerna za vrsto zahtevanega vira: Različni viri zahtevajo različne strategije predpomnjenja.
• Napake obravnavajte elegantno: Zagotovite nadomestno izkušnjo za brskalnike, ki ne podpirajo Service Workerjev, ali ko pride do napake.
• Temeljito testirajte svoj Service Worker: Uporabite razvijalska orodja v brskalniku za pregledovanje vašega Service Workerja in zagotovite, da deluje pravilno.
• Upoštevajte globalno dostopnost: Oblikujte svojo PWA tako, da bo dostopna uporabnikom s posebnimi potrebami, ne glede na njihovo lokacijo ali napravo.
• Uporabite HTTPS: Service Workerji za zagotavljanje varnosti zahtevajo HTTPS.
• Spremljajte zmogljivost: Uporabite orodja, kot je Lighthouse, za spremljanje zmogljivosti vaše PWA in prepoznavanje področij za izboljšave.

Odpravljanje napak v Service Workerjih

Odpravljanje napak v Service Workerjih je lahko zahtevno, vendar razvijalska orodja v brskalniku ponujajo več funkcij, ki vam pomagajo pri reševanju težav:

• Zavihek Application: Zavihek Application v Chrome DevTools ponuja informacije o vašem Service Workerju, vključno z njegovim stanjem, obsegom in dogodki.
• Konzola: Uporabite konzolo za beleženje sporočil iz vašega Service Workerja.
• Zavihek Network: Zavihek Network prikazuje vse omrežne zahteve, ki jih je opravila vaša PWA, in označuje, ali so bile postrežene iz predpomnilnika ali omrežja.

Premisleki glede internacionalizacije in lokalizacije

Pri gradnji PWA za globalno občinstvo upoštevajte naslednje vidike internacionalizacije in lokalizacije:

• Jezikovna podpora: Uporabite atribut `lang` v vašem HTML-ju, da določite jezik vaše PWA. Zagotovite prevode za vso besedilno vsebino.
• Oblikovanje datumov in časov: Uporabite objekt `Intl` za oblikovanje datumov in časov v skladu z lokalnimi nastavitvami uporabnika.
• Oblikovanje številk: Uporabite objekt `Intl` za oblikovanje številk v skladu z lokalnimi nastavitvami uporabnika.
• Oblikovanje valut: Uporabite objekt `Intl` za oblikovanje valut v skladu z lokalnimi nastavitvami uporabnika.
• Podpora za pisanje od desne proti levi (RTL): Zagotovite, da vaša PWA podpira jezike RTL, kot sta arabščina in hebrejščina.
• Omrežje za dostavo vsebin (CDN): Uporabite CDN za dostavo sredstev vaše PWA s strežnikov, ki se nahajajo po vsem svetu, kar izboljša zmogljivost za uporabnike v različnih regijah.

Na primer, predstavljajte si PWA, ki ponuja storitve e-trgovine. Oblika datuma se mora prilagoditi lokaciji uporabnika. V ZDA je običajno uporabljati obliko MM/DD/YYYY, medtem ko je v Evropi prednostna DD/MM/YYYY. Podobno se morajo prilagoditi tudi simboli valut in oblikovanje številk. Uporabnik na Japonskem bi pričakoval cene, prikazane v jenih (JPY) z ustreznim oblikovanjem.

Premisleki glede dostopnosti

Dostopnost je ključnega pomena, da je vaša PWA uporabna za vse, vključno z uporabniki s posebnimi potrebami. Upoštevajte naslednje vidike dostopnosti:

• Semantični HTML: Uporabite semantične elemente HTML za zagotavljanje strukture in pomena vaše vsebine.
• Atributi ARIA: Uporabite atribute ARIA za izboljšanje dostopnosti vaše PWA.
• Navigacija s tipkovnico: Zagotovite, da je vaša PWA v celoti obvladljiva s tipkovnico.
• Združljivost z bralniki zaslona: Preizkusite svojo PWA z bralnikom zaslona, da zagotovite dostopnost za slepe in slabovidne uporabnike.
• Barvni kontrast: Uporabite zadosten barvni kontrast med besedilom in barvami ozadja, da bo vaša PWA berljiva za uporabnike s slabšim vidom.

Na primer, zagotovite, da imajo vsi interaktivni elementi ustrezne oznake ARIA, da lahko uporabniki bralnikov zaslona razumejo njihov namen. Navigacija s tipkovnico mora biti intuitivna, z jasnim vrstnim redom fokusa. Besedilo mora imeti zadosten kontrast glede na ozadje, da ustreza uporabnikom z okvarami vida.

Zaključek

Service Workerji so močno orodje za izgradnjo robustnih in privlačnih PWA. Z razumevanjem življenjskega cikla Service Workerja, implementacijo strategij predpomnjenja in upravljanjem posodobitev lahko ustvarite PWA, ki zagotavljajo brezhibno uporabniško izkušnjo, tudi brez povezave. Pri gradnji za globalno občinstvo ne pozabite upoštevati internacionalizacije, lokalizacije in dostopnosti, da zagotovite, da bo vaša PWA uporabna za vse, ne glede na njihovo lokacijo, jezik ali zmožnosti. Z upoštevanjem najboljših praks, opisanih v tem vodniku, lahko obvladate implementacijo Service Workerja in ustvarite izjemne PWA, ki ustrezajo potrebam raznolike globalne baze uporabnikov.