Frontend Progressive Web Apps: Service Worker -toteutuksen hallinta

Progressiiviset verkkosovellukset (PWA) edustavat merkittävää edistysaskelta verkkokehityksessä, kaventaen kuilua perinteisten verkkosivustojen ja natiivien mobiilisovellusten välillä. Yksi PWA-sovellusten perustana olevista ydinteknologioista on Service Worker. Tämä opas tarjoaa kattavan yleiskatsauksen Service Worker -toteutuksesta, kattaen avainkäsitteet, käytännön esimerkit ja parhaat käytännöt vankkojen ja mukaansatempaavien PWA-sovellusten rakentamiseksi maailmanlaajuiselle yleisölle.

Mikä on Service Worker?

Service Worker on JavaScript-tiedosto, joka toimii taustalla erillään verkkosivustasi. Se toimii ohjelmoitavana verkkoproksina, joka sieppaa verkkopyyntöjä ja antaa sinun hallita, miten PWA-sovelluksesi käsittelee niitä. Tämä mahdollistaa ominaisuuksia, kuten:

• Offline-toiminnallisuus: Mahdollistaa käyttäjille sisällön käytön ja sovelluksen käytön myös offline-tilassa.
• Välimuistiin tallentaminen: Resurssien (HTML, CSS, JavaScript, kuvat) tallentaminen latausaikojen parantamiseksi.
• Push-ilmoitukset: Ajanmukaisten päivitysten toimittaminen ja käyttäjien sitouttaminen, vaikka he eivät aktiivisesti käyttäisi sovellustasi.
• Taustasynkronointi: Tehtävien lykkääminen, kunnes käyttäjällä on vakaa internetyhteys.

Service Workerit ovat ratkaiseva osa aidosti sovellusmaisen kokemuksen luomisessa verkossa, tehden PWA-sovelluksestasi luotettavamman, mukaansatempaavamman ja suorituskykyisemmän.

Service Workerin elinkaari

Service Workerin elinkaaren ymmärtäminen on olennaista oikeanlaisen toteutuksen kannalta. Elinkaari koostuu useista vaiheista:

1. Rekisteröinti: Selain rekisteröi Service Workerin tietylle laajuudelle (URL-osoitteet, joita se hallitsee).
2. Asennus: Service Worker asennetaan. Tässä vaiheessa yleensä tallennetaan olennaiset resurssit välimuistiin.
3. Aktivointi: Service Worker aktivoituu ja alkaa hallita verkkopyyntöjä.
4. Lepotila: Service Worker toimii taustalla odottaen tapahtumia.
5. Päivitys: Uusi versio Service Workerista havaitaan, mikä käynnistää päivitysprosessin.
6. Päättäminen: Selain päättää Service Workerin toiminnan resurssien säästämiseksi.

Service Workerin toteutus: Vaiheittainen opas

1. Service Workerin rekisteröinti

Ensimmäinen askel on rekisteröidä Service Worker pää-JavaScript-tiedostossasi (esim. `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
              
            
          

Tämä koodi tarkistaa, tukeeko selain `serviceWorker`-API:a. Jos tuki löytyy, se rekisteröi `service-worker.js`-tiedoston. On tärkeää käsitellä mahdolliset virheet rekisteröinnin aikana, jotta voidaan tarjota siisti vararatkaisu selaimille, jotka eivät tue Service Workereita.

2. Service Worker -tiedoston luominen (service-worker.js)

Tässä sijaitsee Service Workerisi ydinlogiikka. Aloitetaan asennusvaiheesta.

Asennus

Asennusvaiheen aikana tallennat tyypillisesti välimuistiin olennaiset resurssit, joita PWA-sovelluksesi tarvitsee toimiakseen offline-tilassa. Tähän sisältyvät HTML, CSS, JavaScript ja mahdollisesti kuvat ja fontit.

            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
              
            
          

Tämä koodi määrittelee välimuistin nimen (`CACHE_NAME`) ja taulukon välimuistiin tallennettavista URL-osoitteista (`urlsToCache`). `install`-tapahtumankuuntelija käynnistyy, kun Service Worker asennetaan. `event.waitUntil()`-metodi varmistaa, että asennusprosessi on valmis ennen kuin Service Worker aktivoituu. Sen sisällä avaamme välimuistin määritellyllä nimellä ja lisäämme kaikki URL-osoitteet välimuistiin. Harkitse versioinnin lisäämistä välimuistin nimeen (`my-pwa-cache-v1`), jotta voit helposti mitätöidä välimuistin, kun päivität sovelluksesi.

Aktivointi

Aktivointivaihe on, kun Service Worker aktivoituu ja alkaa hallita verkkopyyntöjä. On hyvä käytäntö poistaa kaikki vanhat välimuistit tässä vaiheessa.

            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
              
            
          

Tämä koodi hakee listan kaikista välimuistien nimistä ja poistaa kaikki välimuistit, jotka eivät ole `cacheWhitelist`-listalla. Tämä varmistaa, että PWA-sovelluksesi käyttää aina resurssien uusinta versiota.

Resurssien noutaminen

`fetch`-tapahtumankuuntelija käynnistyy joka kerta, kun selain tekee verkkopyynnön. Tässä voit siepata pyynnön ja tarjota välimuistiin tallennettua sisältöä tai noutaa resurssin verkosta, jos sitä ei ole välimuistissa.

            self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // Välimuistiosuma - palauta vastaus
        if (response) {
          return response;
        }

        // Ei välimuistissa - nouda ja lisää välimuistiin
        return fetch(event.request).then(
          function(response) {
            // Tarkista, saimmeko kelvollisen vastauksen
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // TÄRKEÄÄ: Kloonaa vastaus. Vastaus on virta
            // ja koska haluamme selaimen kuluttavan vastauksen
            // sekä välimuistin kuluttavan vastauksen, meidän täytyy
            // kloonata se, jotta meillä on kaksi itsenäistä kopiota.
            const responseToCache = response.clone();

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

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

            

              
                Copy
              
            
          

Tämä koodi tarkistaa ensin, onko pyydetty resurssi välimuistissa. Jos on, se palauttaa välimuistissa olevan vastauksen. Jos ei, se noutaa resurssin verkosta. Jos verkkopyyntö onnistuu, se kloonaa vastauksen ja lisää sen välimuistiin ennen kuin palauttaa sen selaimelle. Tämä strategia tunnetaan nimellä Välimuisti ensin, sitten verkko.

Välimuististrategiat

Eri välimuististrategiat sopivat erilaisille resursseille. Tässä on joitakin yleisiä strategioita:

• Välimuisti ensin, sitten verkko: Service Worker tarkistaa ensin, onko resurssi välimuistissa. Jos on, se palauttaa välimuistissa olevan vastauksen. Jos ei, se noutaa resurssin verkosta ja lisää sen välimuistiin. Tämä on hyvä strategia staattisille resursseille, kuten HTML, CSS ja JavaScript.
• Verkko ensin, sitten välimuisti: Service Worker yrittää ensin noutaa resurssin verkosta. Jos verkkopyyntö onnistuu, se palauttaa verkon vastauksen ja lisää sen välimuistiin. Jos verkkopyyntö epäonnistuu (esim. offline-tilan vuoksi), se palauttaa välimuistissa olevan vastauksen. Tämä on hyvä strategia dynaamiselle sisällölle, jonka on oltava ajan tasalla.
• Vain välimuisti: Service Worker palauttaa resursseja vain välimuistista. Tämä on hyvä strategia resursseille, jotka eivät todennäköisesti muutu.
• Vain verkko: Service Worker noutaa resurssit aina verkosta. Tämä on hyvä strategia resursseille, joiden on aina oltava ajan tasalla.
• Vanhentunut, kunnes validoidaan uudelleen (Stale-While-Revalidate): Service Worker palauttaa välimuistissa olevan vastauksen välittömästi ja noutaa sitten resurssin verkosta taustalla. Kun verkkopyyntö on valmis, se päivittää välimuistin uudella vastauksella. Tämä tarjoaa nopean alkulatauksen ja varmistaa, että käyttäjä näkee lopulta uusimman sisällön.

Oikean välimuististrategian valinta riippuu PWA-sovelluksesi erityisvaatimuksista ja pyydetyn resurssin tyypistä. Harkitse päivitysten tiheyttä, ajantasaisten tietojen tärkeyttä ja haluttuja suorituskykyominaisuuksia.

Päivitysten käsittely

Kun päivität Service Workerisi, selain havaitsee muutokset ja käynnistää päivitysprosessin. Uusi Service Worker asennetaan taustalla, ja se aktivoituu, kun kaikki vanhaa Service Workeria käyttävät avoimet välilehdet suljetaan. Voit pakottaa päivityksen kutsumalla `skipWaiting()`-metodia install-tapahtumassa ja `clients.claim()`-metodia activate-tapahtumassa.

            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()` pakottaa odottavan Service Workerin tulemaan aktiiviseksi Service Workeriksi. `clients.claim()` antaa Service Workerin hallita kaikkia sen laajuudessa olevia asiakkaita, jopa niitä, jotka käynnistyivät ilman sitä.

Push-ilmoitukset

Service Workerit mahdollistavat push-ilmoitukset, joiden avulla voit sitouttaa käyttäjiä uudelleen, vaikka he eivät aktiivisesti käyttäisi PWA-sovellustasi. Tämä vaatii Push API:n ja push-palvelun, kuten Firebase Cloud Messaging (FCM), käyttöä.

Huomautus: Push-ilmoitusten käyttöönotto on monimutkaisempaa ja vaatii palvelinpuolen komponentteja. Tämä osio tarjoaa yleiskatsauksen.

1. Tilaa käyttäjä: Pyydä käyttäjältä lupa lähettää push-ilmoituksia. Jos lupa myönnetään, hanki push-tilaus selaimelta.
2. Lähetä tilaus palvelimellesi: Lähetä push-tilaus palvelimellesi. Tämä tilaus sisältää tiedot, joita tarvitaan push-viestien lähettämiseen käyttäjän selaimelle.
3. Lähetä push-viestejä: Käytä push-palvelua, kuten FCM:ää, lähettääksesi push-viestejä käyttäjän selaimelle push-tilauksen avulla.
4. Käsittele push-viestit Service Workerissa: Kuuntele Service Workerissasi `push`-tapahtumaa ja näytä ilmoitus käyttäjälle.

Tässä on yksinkertaistettu esimerkki `push`-tapahtuman käsittelystä Service Workerissasi:

            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
              
            
          

Taustasynkronointi

Taustasynkronointi mahdollistaa tehtävien lykkäämisen, kunnes käyttäjällä on vakaa internetyhteys. Tämä on hyödyllistä esimerkiksi lomakkeiden lähettämisessä tai tiedostojen lataamisessa, kun käyttäjä on offline-tilassa.

1. Rekisteröidy taustasynkronointiin: Rekisteröidy pää-JavaScript-tiedostossasi taustasynkronointiin käyttämällä `navigator.serviceWorker.ready.then(registration => registration.sync.register('my-sync'));`
2. Käsittele synkronointitapahtuma Service Workerissa: Kuuntele Service Workerissasi `sync`-tapahtumaa ja suorita lykätty tehtävä.

Tässä on yksinkertaistettu esimerkki `sync`-tapahtuman käsittelystä Service Workerissasi:

            self.addEventListener('sync', event => {
  if (event.tag === 'my-sync') {
    event.waitUntil(
      // Suorita lykätty tehtävä täällä
      doSomething()
    );
  }
});

            

              
                Copy
              
            
          

Service Worker -toteutuksen parhaat käytännöt

• Pidä Service Workerisi pienenä ja tehokkaana: Suuri Service Worker voi hidastaa PWA-sovellustasi.
• Käytä välimuististrategiaa, joka sopii pyydetyn resurssin tyyppiin: Eri resurssit vaativat erilaisia välimuististrategioita.
• Käsittele virheet siististi: Tarjoa varakokemus selaimille, jotka eivät tue Service Workereita tai kun Service Worker epäonnistuu.
• Testaa Service Workerisi perusteellisesti: Käytä selaimen kehittäjätyökaluja tarkastaaksesi Service Workerisi ja varmistaaksesi, että se toimii oikein.
• Harkitse globaalia saavutettavuutta: Suunnittele PWA-sovelluksesi siten, että se on saavutettavissa vammaisille käyttäjille heidän sijainnistaan tai laitteestaan riippumatta.
• Käytä HTTPS:ää: Service Workerit vaativat HTTPS-yhteyden turvallisuuden varmistamiseksi.
• Seuraa suorituskykyä: Käytä työkaluja, kuten Lighthouse, seurataksesi PWA-sovelluksesi suorituskykyä ja tunnistaaksesi parannuskohteita.

Service Workerien vianmääritys

Service Workerien vianmääritys voi olla haastavaa, mutta selaimen kehittäjätyökalut tarjoavat useita ominaisuuksia, jotka auttavat sinua ongelmien vianmäärityksessä:

• Sovellus-välilehti: Chrome DevTools -työkalujen Sovellus-välilehti (Application) tarjoaa tietoja Service Workeristasi, mukaan lukien sen tilan, laajuuden ja tapahtumat.
• Konsoli: Käytä konsolia viestien kirjaamiseen Service Workeristasi.
• Verkko-välilehti: Verkko-välilehti (Network) näyttää kaikki PWA-sovelluksesi tekemät verkkopyynnöt ja osoittaa, tarjoiltiinko ne välimuistista vai verkosta.

Kansainvälistämisen ja lokalisoinnin huomioiminen

Kun rakennat PWA-sovelluksia maailmanlaajuiselle yleisölle, ota huomioon seuraavat kansainvälistämisen ja lokalisoinnin näkökohdat:

• Kielituki: Käytä `lang`-attribuuttia HTML:ssäsi määrittääksesi PWA-sovelluksesi kielen. Tarjoa käännökset kaikelle tekstisisällölle.
• Päivämäärän ja ajan muotoilu: Käytä `Intl`-oliota päivämäärien ja aikojen muotoiluun käyttäjän paikallisasetusten mukaisesti.
• Numeroiden muotoilu: Käytä `Intl`-oliota numeroiden muotoiluun käyttäjän paikallisasetusten mukaisesti.
• Valuutan muotoilu: Käytä `Intl`-oliota valuuttojen muotoiluun käyttäjän paikallisasetusten mukaisesti.
• Oikealta vasemmalle (RTL) -tuki: Varmista, että PWA-sovelluksesi tukee RTL-kieliä, kuten arabiaa ja hepreaa.
• Sisällönjakeluverkko (CDN): Käytä CDN:ää toimittaaksesi PWA-sovelluksesi resurssit ympäri maailmaa sijaitsevilta palvelimilta, mikä parantaa suorituskykyä eri alueiden käyttäjille.

Esimerkiksi verkkokauppapalveluita tarjoavan PWA-sovelluksen päivämäärämuodon tulisi mukautua käyttäjän sijaintiin. Yhdysvalloissa on yleistä käyttää muotoa KK/PP/VVVV, kun taas Euroopassa suositaan muotoa PP/KK/VVVV. Samoin valuuttasymbolien ja numeroiden muotoilun on mukauduttava vastaavasti. Japanilainen käyttäjä odottaisi hintojen näkyvän JPY-valuutassa asianmukaisella muotoilulla.

Saavutettavuuden huomioiminen

Saavutettavuus on ratkaisevan tärkeää, jotta PWA-sovelluksesi on kaikkien, myös vammaisten käyttäjien, käytettävissä. Ota huomioon seuraavat saavutettavuusnäkökohdat:

• Semanttinen HTML: Käytä semanttisia HTML-elementtejä antaaksesi sisällöllesi rakennetta ja merkitystä.
• ARIA-attribuutit: Käytä ARIA-attribuutteja parantaaksesi PWA-sovelluksesi saavutettavuutta.
• Näppäimistöllä navigointi: Varmista, että PWA-sovelluksesi on täysin navigoitavissa näppäimistöllä.
• Ruudunlukijayhteensopivuus: Testaa PWA-sovelluksesi ruudunlukijalla varmistaaksesi, että se on saavutettavissa sokeille tai heikkonäköisille käyttäjille.
• Värikontrasti: Käytä riittävää värikontrastia tekstin ja taustavärien välillä, jotta PWA-sovelluksesi on luettavissa heikkonäköisille käyttäjille.

Varmista esimerkiksi, että kaikilla interaktiivisilla elementeillä on asianmukaiset ARIA-selitteet, jotta ruudunlukijoiden käyttäjät ymmärtävät niiden tarkoituksen. Näppäimistöllä navigoinnin tulee olla intuitiivista ja fokusjärjestyksen selkeä. Tekstin kontrastin taustaa vasten on oltava riittävä, jotta se palvelee heikkonäköisiä käyttäjiä.

Yhteenveto

Service Workerit ovat tehokas työkalu vankkojen ja mukaansatempaavien PWA-sovellusten rakentamiseen. Ymmärtämällä Service Workerin elinkaaren, toteuttamalla välimuististrategioita ja käsittelemällä päivityksiä voit luoda PWA-sovelluksia, jotka tarjoavat saumattoman käyttäjäkokemuksen myös offline-tilassa. Kun rakennat maailmanlaajuiselle yleisölle, muista ottaa huomioon kansainvälistäminen, lokalisointi ja saavutettavuus varmistaaksesi, että PWA-sovelluksesi on kaikkien käytettävissä sijainnista, kielestä tai kyvyistä riippumatta. Noudattamalla tässä oppaassa esitettyjä parhaita käytäntöjä voit hallita Service Worker -toteutuksen ja luoda poikkeuksellisia PWA-sovelluksia, jotka vastaavat monimuotoisen maailmanlaajuisen käyttäjäkunnan tarpeisiin.