Frontend progresyviosios žiniatinklio programos: „Service Worker“ diegimo įvaldymas

Progresyviosios žiniatinklio programos (PWA) yra svarbus žiniatinklio kūrimo evoliucijos etapas, mažinantis atotrūkį tarp tradicinių svetainių ir vietinių mobiliųjų programų. Viena iš pagrindinių technologijų, kuriomis grindžiamos PWA, yra „Service Worker“. Šiame vadove pateikiama išsami „Service Worker“ diegimo apžvalga, apimanti pagrindines sąvokas, praktinius pavyzdžius ir geriausią praktiką, skirtą kurti patikimas ir patrauklias PWA pasaulinei auditorijai.

Kas yra „Service Worker“?

„Service Worker“ yra JavaScript failas, veikiantis fone, atskirai nuo jūsų tinklalapio. Jis veikia kaip programuojamas tinklo tarpinis serveris (angl. proxy), perimantis tinklo užklausas ir leidžiantis jums valdyti, kaip jūsų PWA jas apdoroja. Tai įgalina tokias funkcijas kaip:

• Neprisijungus veikiantis režimas: Leidžia vartotojams pasiekti turinį ir naudoti jūsų programą net tada, kai jie yra neprisijungę.
• Talpyklinimas: Išteklių (HTML, CSS, JavaScript, paveikslėlių) saugojimas siekiant pagerinti įkėlimo laiką.
• Push pranešimai: Savalaikių atnaujinimų pristatymas ir bendravimas su vartotojais, net kai jie aktyviai nenaudoja jūsų programos.
• Fono sinchronizavimas: Užduočių atidėjimas, kol vartotojas turės stabilų interneto ryšį.

„Service Worker“ yra esminis elementas kuriant tikrai į programą panašią patirtį žiniatinklyje, todėl jūsų PWA tampa patikimesnė, patrauklesnė ir našesnė.

„Service Worker“ gyvavimo ciklas

Norint tinkamai įdiegti, būtina suprasti „Service Worker“ gyvavimo ciklą. Gyvavimo ciklą sudaro keli etapai:

1. Registracija: Naršyklė užregistruoja „Service Worker“ tam tikrai apimčiai (URL adresams, kuriuos jis valdo).
2. Diegimas: „Service Worker“ yra įdiegiamas. Šiame etape paprastai talpyklinami esminiai ištekliai.
3. Aktyvavimas: „Service Worker“ tampa aktyvus ir pradeda valdyti tinklo užklausas.
4. Neaktyvus: „Service Worker“ veikia fone, laukdamas įvykių.
5. Atnaujinimas: Aptinkama nauja „Service Worker“ versija, kuri sukelia atnaujinimo procesą.
6. Nutraukimas: Naršyklė nutraukia „Service Worker“ veikimą, kad taupytų išteklius.

„Service Worker“ diegimas: žingsnis po žingsnio vadovas

1. „Service Worker“ registravimas

Pirmas žingsnis yra užregistruoti „Service Worker“ savo pagrindiniame JavaScript faile (pvz., `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
              
            
          

Šis kodas patikrina, ar `serviceWorker` API palaiko naršyklė. Jei taip, jis užregistruoja `service-worker.js` failą. Svarbu apdoroti galimas klaidas registracijos metu, kad būtų užtikrintas sklandus atsarginis variantas naršyklėms, kurios nepalaiko „Service Worker“.

2. „Service Worker“ failo kūrimas (service-worker.js)

Čia slypi pagrindinė jūsų „Service Worker“ logika. Pradėkime nuo diegimo etapo.

Diegimas

Diegimo etape paprastai talpyklinsite esminius išteklius, reikalingus jūsų PWA veikimui neprisijungus. Tai apima jūsų HTML, CSS, JavaScript ir galbūt paveikslėlius bei šriftus.

            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
              
            
          

Šis kodas apibrėžia talpyklos pavadinimą (`CACHE_NAME`) ir talpyklinamų URL adresų masyvą (`urlsToCache`). `install` įvykio klausytojas suaktyvinamas, kai įdiegiamas „Service Worker“. `event.waitUntil()` metodas užtikrina, kad diegimo procesas būtų baigtas, kol „Service Worker“ taps aktyvus. Viduje atidarome talpyklą su nurodytu pavadinimu ir pridedame visus URL adresus į talpyklą. Apsvarstykite galimybę pridėti versijos numerį prie savo talpyklos pavadinimo (`my-pwa-cache-v1`), kad atnaujindami programą galėtumėte lengvai anuliuoti talpyklą.

Aktyvavimas

Aktyvavimo etapas yra tada, kai jūsų „Service Worker“ tampa aktyvus ir pradeda valdyti tinklo užklausas. Šiame etape gera praktika yra išvalyti visas senas talpyklas.

            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
              
            
          

Šis kodas gauna visų talpyklų pavadinimų sąrašą ir ištrina visas talpyklas, kurios nėra `cacheWhitelist`. Tai užtikrina, kad jūsų PWA visada naudoja naujausią jūsų išteklių versiją.

Išteklių gavimas

`fetch` įvykio klausytojas suaktyvinamas kiekvieną kartą, kai naršyklė pateikia tinklo užklausą. Čia galite perimti užklausą ir pateikti talpyklintą turinį arba gauti išteklius iš tinklo, jei jie nėra talpyklinti.

            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
              
            
          

Šis kodas pirmiausia patikrina, ar prašomas išteklius yra talpykloje. Jei taip, jis grąžina talpyklintą atsakymą. Jei ne, jis gauna išteklius iš tinklo. Jei tinklo užklausa sėkminga, jis klonuoja atsakymą ir prideda jį į talpyklą, prieš grąžindamas jį naršyklei. Ši strategija žinoma kaip Pirmiausia talpykla, tada tinklas (angl. Cache-First, then Network).

Talpyklinimo strategijos

Skirtingos talpyklinimo strategijos tinka skirtingų tipų ištekliams. Štai keletas įprastų strategijų:

• Pirmiausia talpykla, tada tinklas: „Service Worker“ pirmiausia patikrina, ar išteklius yra talpykloje. Jei taip, jis grąžina talpyklintą atsakymą. Jei ne, jis gauna išteklius iš tinklo ir prideda juos į talpyklą. Tai gera strategija statiniams ištekliams, tokiems kaip HTML, CSS ir JavaScript.
• Pirmiausia tinklas, tada talpykla: „Service Worker“ pirmiausia bando gauti išteklius iš tinklo. Jei tinklo užklausa sėkminga, jis grąžina tinklo atsakymą ir prideda jį į talpyklą. Jei tinklo užklausa nepavyksta (pvz., dėl neprisijungus režimo), jis grąžina talpyklintą atsakymą. Tai gera strategija dinaminiam turiniui, kuris turi būti atnaujintas.
• Tik talpykla: „Service Worker“ grąžina išteklius tik iš talpyklos. Tai gera strategija ištekliams, kurie greičiausiai nesikeis.
• Tik tinklas: „Service Worker“ visada gauna išteklius iš tinklo. Tai gera strategija ištekliams, kurie visada turi būti atnaujinti.
• Pasenęs, kol atnaujinama (angl. Stale-While-Revalidate): „Service Worker“ nedelsdamas grąžina talpyklintą atsakymą ir tada fone gauna išteklius iš tinklo. Kai tinklo užklausa baigiama, jis atnaujina talpyklą nauju atsakymu. Tai užtikrina greitą pradinį įkėlimą ir garantuoja, kad vartotojas galiausiai pamatys naujausią turinį.

Tinkamos talpyklinimo strategijos pasirinkimas priklauso nuo konkrečių jūsų PWA reikalavimų ir prašomo ištekliaus tipo. Atsižvelkite į atnaujinimų dažnumą, atnaujintų duomenų svarbą ir norimas našumo charakteristikas.

Atnaujinimų tvarkymas

Kai atnaujinsite savo „Service Worker“, naršyklė aptiks pakeitimus ir pradės atnaujinimo procesą. Naujas „Service Worker“ bus įdiegtas fone ir taps aktyvus, kai bus uždaryti visi atidaryti skirtukai, naudojantys seną „Service Worker“. Galite priverstinai atnaujinti iškviesdami `skipWaiting()` diegimo įvykio viduje ir `clients.claim()` aktyvavimo įvykio viduje.

            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()` priverčia laukiantį „Service Worker“ tapti aktyviu. `clients.claim()` leidžia „Service Worker“ valdyti visus klientus savo apimtyje, net ir tuos, kurie prasidėjo be jo.

Push pranešimai

„Service Worker“ įgalina push pranešimus, leidžiančius iš naujo įtraukti vartotojus, net kai jie aktyviai nenaudoja jūsų PWA. Tam reikia naudoti Push API ir push paslaugą, tokią kaip „Firebase Cloud Messaging“ (FCM).

Pastaba: Push pranešimų nustatymas yra sudėtingesnis ir reikalauja serverio pusės komponentų. Šiame skyriuje pateikiama bendra apžvalga.

1. Prenumeruokite vartotoją: Paprašykite vartotojo leidimo siųsti push pranešimus. Jei leidimas suteiktas, gaukite push prenumeratą iš naršyklės.
2. Nusiųskite prenumeratą į savo serverį: Nusiųskite push prenumeratą į savo serverį. Šioje prenumeratoje yra informacija, reikalinga siųsti push pranešimus į vartotojo naršyklę.
3. Siųskite push pranešimus: Naudokite push paslaugą, tokią kaip FCM, kad siųstumėte push pranešimus į vartotojo naršyklę naudodami push prenumeratą.
4. Tvarkykite push pranešimus „Service Worker“: Savo „Service Worker“, klausykitės `push` įvykio ir rodykite pranešimą vartotojui.

Štai supaprastintas pavyzdys, kaip tvarkyti `push` įvykį jūsų „Service Worker“:

            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
              
            
          

Fono sinchronizavimas

Fono sinchronizavimas leidžia atidėti užduotis, kol vartotojas turės stabilų interneto ryšį. Tai naudinga scenarijuose, tokiuose kaip formų pateikimas ar failų įkėlimas, kai vartotojas yra neprisijungęs.

1. Registruokitės fono sinchronizavimui: Savo pagrindiniame JavaScript faile registruokitės fono sinchronizavimui naudodami `navigator.serviceWorker.ready.then(registration => registration.sync.register('my-sync'));`
2. Tvarkykite sinchronizavimo įvykį „Service Worker“: Savo „Service Worker“, klausykitės `sync` įvykio ir atlikite atidėtą užduotį.

Štai supaprastintas pavyzdys, kaip tvarkyti `sync` įvykį jūsų „Service Worker“:

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

            

              
                Copy
              
            
          

Geriausios „Service Worker“ diegimo praktikos

• Išlaikykite savo „Service Worker“ mažą ir efektyvų: Didelis „Service Worker“ gali sulėtinti jūsų PWA.
• Naudokite talpyklinimo strategiją, atitinkančią prašomo ištekliaus tipą: Skirtingiems ištekliams reikalingos skirtingos talpyklinimo strategijos.
• Sklandžiai tvarkykite klaidas: Pateikite atsarginę patirtį naršyklėms, kurios nepalaiko „Service Worker“ arba kai „Service Worker“ sugenda.
• Kruopščiai testuokite savo „Service Worker“: Naudokite naršyklės kūrėjų įrankius, kad patikrintumėte savo „Service Worker“ ir įsitikintumėte, kad jis veikia teisingai.
• Atsižvelkite į visuotinį prieinamumą: Sukurkite savo PWA taip, kad ji būtų prieinama vartotojams su negalia, nepriklausomai nuo jų vietos ar įrenginio.
• Naudokite HTTPS: „Service Worker“ reikalauja HTTPS, kad būtų užtikrintas saugumas.
• Stebėkite našumą: Naudokite įrankius, tokius kaip „Lighthouse“, kad stebėtumėte savo PWA našumą ir nustatytumėte tobulinimo sritis.

„Service Worker“ derinimas

„Service Worker“ derinimas gali būti sudėtingas, tačiau naršyklės kūrėjų įrankiai suteikia keletą funkcijų, padedančių spręsti problemas:

• Application skirtukas: „Application“ skirtukas „Chrome DevTools“ suteikia informacijos apie jūsų „Service Worker“, įskaitant jo būseną, apimtį ir įvykius.
• Console: Naudokite konsolę, kad registruotumėte pranešimus iš savo „Service Worker“.
• Network skirtukas: „Network“ skirtukas rodo visas jūsų PWA pateiktas tinklo užklausas ir nurodo, ar jos buvo pateiktos iš talpyklos, ar iš tinklo.

Internacionalizacijos ir lokalizacijos aspektai

Kuriant PWA pasaulinei auditorijai, atsižvelkite į šiuos internacionalizacijos ir lokalizacijos aspektus:

• Kalbos palaikymas: Naudokite `lang` atributą savo HTML, kad nurodytumėte savo PWA kalbą. Pateikite viso tekstinio turinio vertimus.
• Datos ir laiko formatavimas: Naudokite `Intl` objektą datoms ir laikams formatuoti pagal vartotojo lokalę.
• Skaičių formatavimas: Naudokite `Intl` objektą skaičiams formatuoti pagal vartotojo lokalę.
• Valiutos formatavimas: Naudokite `Intl` objektą valiutoms formatuoti pagal vartotojo lokalę.
• Palaikymas iš dešinės į kairę (RTL): Užtikrinkite, kad jūsų PWA palaiko RTL kalbas, tokias kaip arabų ir hebrajų.
• Turinio pristatymo tinklas (CDN): Naudokite CDN, kad pristatytumėte savo PWA išteklius iš serverių, esančių visame pasaulyje, taip pagerindami našumą vartotojams skirtinguose regionuose.

Pavyzdžiui, apsvarstykite PWA, teikiančią el. prekybos paslaugas. Datos formatas turėtų prisitaikyti prie vartotojo vietos. JAV įprasta naudoti MM/DD/YYYY, o Europoje – DD/MM/YYYY. Panašiai turi prisitaikyti valiutos simboliai ir skaičių formatavimas. Vartotojas Japonijoje tikėtųsi, kad kainos būtų rodomos JPY su atitinkamu formatavimu.

Prieinamumo aspektai

Prieinamumas yra labai svarbus, kad jūsų PWA galėtų naudotis visi, įskaitant vartotojus su negalia. Atsižvelkite į šiuos prieinamumo aspektus:

• Semantinis HTML: Naudokite semantinius HTML elementus, kad suteiktumėte savo turiniui struktūrą ir prasmę.
• ARIA atributai: Naudokite ARIA atributus, kad pagerintumėte savo PWA prieinamumą.
• Naršymas klaviatūra: Užtikrinkite, kad jūsų PWA būtų visiškai valdoma naudojant klaviatūrą.
• Suderinamumas su ekrano skaitytuvais: Išbandykite savo PWA su ekrano skaitytuvu, kad įsitikintumėte, jog ji prieinama vartotojams, kurie yra akli arba turi regos sutrikimų.
• Spalvų kontrastas: Naudokite pakankamą spalvų kontrastą tarp teksto ir fono spalvų, kad jūsų PWA būtų įskaitoma vartotojams su silpnu regėjimu.

Pavyzdžiui, užtikrinkite, kad visi interaktyvūs elementai turėtų tinkamas ARIA žymes, kad ekrano skaitytuvų vartotojai galėtų suprasti jų paskirtį. Naršymas klaviatūra turėtų būti intuityvus, su aiškia fokusavimo tvarka. Tekstas turėtų turėti pakankamą kontrastą su fonu, kad atitiktų vartotojų su regos sutrikimais poreikius.

Išvada

„Service Worker“ yra galingas įrankis kuriant patikimas ir patrauklias PWA. Suprasdami „Service Worker“ gyvavimo ciklą, diegdami talpyklinimo strategijas ir tvarkydami atnaujinimus, galite sukurti PWA, kurios suteikia sklandžią vartotojo patirtį net neprisijungus. Kuriant pasaulinei auditorijai, nepamirškite atsižvelgti į internacionalizaciją, lokalizaciją ir prieinamumą, kad užtikrintumėte, jog jūsų PWA galėtų naudotis visi, nepriklausomai nuo jų vietos, kalbos ar gebėjimų. Laikydamiesi šiame vadove pateiktų geriausių praktikų, galite įvaldyti „Service Worker“ diegimą ir sukurti išskirtines PWA, atitinkančias įvairios pasaulinės vartotojų bazės poreikius.