Service Workers: Neprisijungus veikiančių (offline-first) žiniatinklio programų kūrimas

Šiuolaikiniame pasaulyje vartotojai tikisi, kad žiniatinklio programos bus greitos, patikimos ir prieinamos net tada, kai tinklo ryšys yra ribotas arba jo visai nėra. Būtent čia pradedama taikyti „neprisijungus veikiančios“ (offline-first) dizaino koncepcija. „Service workers“ yra galinga technologija, leidžianti kūrėjams kurti žiniatinklio programas, kurios sklandžiai veikia neprisijungus prie tinklo ir taip užtikrina geresnę vartotojo patirtį.

Kas yra „Service Workers“?

„Service worker“ yra JavaScript failas, kuris veikia fone, atskirai nuo pagrindinės naršyklės gijos. Jis veikia kaip tarpininkas (proxy) tarp žiniatinklio programos ir tinklo, perimdamas tinklo užklausas ir valdydamas podėliavimą (caching). „Service workers“ gali atlikti tokias užduotis kaip:

• Statinių išteklių (HTML, CSS, JavaScript, paveikslėlių) podėliavimas
• Podėlyje esančio turinio pateikimas neprisijungus
• Tiesioginiai pranešimai (Push notifications)
• Fono sinchronizavimas

Svarbu tai, kad „service workers“ kontroliuoja naršyklė, o ne tinklalapis. Tai leidžia jiems veikti net tada, kai vartotojas uždarė skirtuką ar naršyklės langą.

Kodėl „Offline-First“?

Neprisijungus veikiančios žiniatinklio programos kūrimas suteikia daug privalumų:

• Geresnis našumas: Išsaugodami statinius išteklius podėlyje ir pateikdami juos tiesiai iš podėlio, „service workers“ ženkliai sumažina įkėlimo laiką, o tai lemia greitesnę ir jautresnę vartotojo patirtį.
• Didesnis patikimumas: Net kai tinklo ryšio nėra, vartotojai vis tiek gali pasiekti podėlyje esantį turinį, užtikrinant, kad programa išliks veikianti.
• Didesnis įsitraukimas: Funkcionalumas neprisijungus daro programą naudingesnę ir prieinamesnę, o tai didina vartotojų įsitraukimą ir išlaikymą.
• Sumažintas duomenų suvartojimas: Išsaugodami išteklius podėlyje, „service workers“ sumažina duomenų, kuriuos reikia atsisiųsti iš tinklo, kiekį. Tai ypač naudinga vartotojams, turintiems ribotus duomenų planus ar lėtą interneto ryšį vietovėse su mažiau išvystyta infrastruktūra. Pavyzdžiui, daugelyje Afrikos ir Pietų Amerikos dalių duomenų kaina gali būti didelis barjeras interneto vartotojams. „Offline-first“ dizainas padeda tai sušvelninti.
• Geresnis SEO: Paieškos sistemos teikia pirmenybę greitoms ir patikimoms svetainėms, todėl „offline-first“ programos kūrimas gali pagerinti jūsų pozicijas paieškos sistemose.

Kaip veikia „Service Workers“

„Service worker“ gyvavimo ciklą sudaro keli etapai:

1. Registracija: „Service worker“ yra užregistruojamas naršyklėje, nurodant programos aprėptį, kurią jis kontroliuos.
2. Diegimas: „Service worker“ yra įdiegiamas. Šio etapo metu jis paprastai išsaugo statinius išteklius podėlyje.
3. Aktyvavimas: „Service worker“ yra aktyvuojamas ir perima žiniatinklio programos kontrolę. Tai gali apimti senų „service workers“ išregistravimą ir senų podėlių išvalymą.
4. Neaktyvus: „Service worker“ išlieka neaktyvus, laukdamas tinklo užklausų ar kitų įvykių.
5. Gauti (Fetch): Kai pateikiama tinklo užklausa, „service worker“ ją perima ir gali pateikti turinį iš podėlio arba gauti išteklių iš tinklo.

„Offline-First“ diegimas su „Service Workers“: žingsnis po žingsnio vadovas

Štai pagrindinis pavyzdys, kaip įdiegti funkcionalumą neprisijungus naudojant „service workers“:

1 žingsnis: Užregistruokite „Service Worker“

Pagrindiniame JavaScript faile (pvz., `app.js`):

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('"Service Worker" užregistruotas su aprėptimi:', registration.scope);
    })
    .catch(function(error) {
      console.log('"Service Worker" registracija nepavyko:', error);
    });
}

Šis kodas patikrina, ar naršyklė palaiko „service workers“, ir užregistruoja `service-worker.js` failą. Aprėptis (scope) apibrėžia, kuriuos URL adresus kontroliuos „service worker“.

2 žingsnis: Sukurkite „Service Worker“ failą (service-worker.js)

Sukurkite failą pavadinimu `service-worker.js` su šiuo kodu:

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

self.addEventListener('install', function(event) {
  // Atlikite diegimo veiksmus
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Atidarytas podėlis');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Podėlio atitiktis - grąžinti atsakymą
        if (response) {
          return response;
        }

        // SVARBU: Klonuokite užklausą.
        // Užklausa yra srautas ir gali būti panaudota tik vieną kartą. Kadangi mes ją naudojame
        // vieną kartą podėliui ir vieną kartą naršyklei gauti duomenis (fetch), mums reikia klonuoti užklausą.
        var fetchRequest = event.request.clone();

        return fetch(fetchRequest).then(
          function(response) {
            // Patikrinkite, ar gavome galiojantį atsakymą
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // SVARBU: Klonuokite atsakymą.
            // Atsakymas yra srautas ir jį reikia panaudoti tik vieną kartą.
            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);
          }
        })
      );
    })
  );
});

Šis kodas atlieka šiuos veiksmus:

• Apibrėžia `CACHE_NAME` ir `urlsToCache` masyvą.
• Vykstant diegimo (`install`) įvykiui, jis atidaro podėlį ir prideda nurodytus URL adresus.
• Vykstant gavimo (`fetch`) įvykiui, jis perima tinklo užklausas. Jei prašomas išteklius yra podėlyje, jis grąžina versiją iš podėlio. Priešingu atveju jis gauna išteklių iš tinklo, išsaugo jį podėlyje ir grąžina atsakymą.
• Vykstant aktyvavimo (`activate`) įvykiui, jis pašalina senus podėlius, kad podėlio dydis išliktų valdomas.

3 žingsnis: Išbandykite savo funkcionalumą neprisijungus

Norėdami išbandyti savo funkcionalumą neprisijungus, galite naudoti naršyklės kūrėjo įrankius. „Chrome“ naršyklėje atidarykite „DevTools“, eikite į skirtuką „Application“ ir pasirinkite „Service Workers“. Tada galite imituoti neprisijungus režimą pažymėdami „Offline“ langelį.

Pažangesnės „Service Worker“ technikos

Kai jau turite pagrindinį „service workers“ supratimą, galite tyrinėti pažangesnes technikas, siekdami patobulinti savo „offline-first“ programą:

Podėliavimo strategijos

Yra keletas podėliavimo strategijų, kurias galite naudoti, priklausomai nuo ištekliaus tipo ir jūsų programos reikalavimų:

• Pirmiausia podėlis (Cache First): Visada pateikti turinį iš podėlio ir tik tada, jei išteklius nerandamas podėlyje, kreiptis į tinklą.
• Pirmiausia tinklas (Network First): Visada bandyti gauti turinį iš tinklo ir tik kaip atsarginį variantą naudoti podėlį.
• Podėlis, tada tinklas (Cache then Network): Nedelsiant pateikti turinį iš podėlio, o tada atnaujinti podėlį naujausia versija iš tinklo. Tai užtikrina greitą pradinį įkėlimą ir garantuoja, kad vartotojas (galiausiai) visada turės naujausią turinį.
• Pasenę duomenys, kol tikrinama (Stale-while-revalidate): Panaši į „Cache then Network“, bet podėlis atnaujinamas fone, neblokuojant pradinio įkėlimo.
• Tik tinklas (Network Only): Priversti programą visada gauti turinį iš tinklo.
• Tik podėlis (Cache Only): Priversti programą naudoti tik podėlyje saugomą turinį.

Tinkamos podėliavimo strategijos pasirinkimas priklauso nuo konkretaus ištekliaus ir jūsų programos reikalavimų. Pavyzdžiui, statinius išteklius, tokius kaip paveikslėliai ir CSS failai, dažnai geriausia pateikti naudojant „Cache First“ strategiją, o dinamiškam turiniui gali būti naudingesnė „Network First“ arba „Cache then Network“ strategija.

Fono sinchronizavimas

Fono sinchronizavimas leidžia atidėti užduotis, kol vartotojas turės stabilų tinklo ryšį. Tai naudinga tokioms užduotims kaip formų pateikimas ar failų įkėlimas. Pavyzdžiui, vartotojas atokioje Indonezijos vietovėje gali užpildyti formą būdamas neprisijungęs. „Service worker“ gali palaukti, kol atsiras ryšys, ir tik tada pateikti duomenis.

Tiesioginiai pranešimai (Push Notifications)

„Service workers“ gali būti naudojami siunčiant tiesioginius pranešimus vartotojams, net kai programa nėra atidaryta. Tai galima panaudoti siekiant iš naujo įtraukti vartotojus ir pateikti savalaikius atnaujinimus. Įsivaizduokite naujienų programą, kuri realiu laiku siunčia naujienų pranešimus vartotojams, nepriklausomai nuo to, ar programa aktyviai veikia.

Workbox

„Workbox“ yra JavaScript bibliotekų rinkinys, kuris palengvina „service workers“ kūrimą. Jis suteikia abstrakcijas įprastoms užduotims, tokioms kaip podėliavimas, maršruto parinkimas (routing) ir fono sinchronizavimas. Naudojant „Workbox“ galima supaprastinti „service worker“ kodą ir padaryti jį lengviau prižiūrimą. Daugelis įmonių dabar naudoja „Workbox“ kaip standartinį komponentą kuriant PWA ir „offline-first“ patirtis.

Aspektai, svarbūs pasaulinei auditorijai

Kuriant „offline-first“ žiniatinklio programas pasaulinei auditorijai, svarbu atsižvelgti į šiuos veiksnius:

• Skirtingos tinklo sąlygos: Tinklo ryšys gali labai skirtis įvairiuose regionuose. Kai kurie vartotojai gali turėti prieigą prie greito interneto, o kiti gali naudotis lėtu ar nutrūkstamu ryšiu. Kurkite savo programą taip, kad ji sklandžiai veiktų esant skirtingoms tinklo sąlygoms.
• Duomenų kaina: Kai kuriose pasaulio dalyse duomenų kaina gali būti didelis barjeras interneto vartotojams. Sumažinkite duomenų suvartojimą agresyviai naudodami podėliavimą ir optimizuodami paveikslėlius.
• Kalbų palaikymas: Užtikrinkite, kad jūsų programa palaiko kelias kalbas ir kad vartotojai galėtų pasiekti turinį norima kalba, net būdami neprisijungę. Saugokite lokalizuotą turinį podėlyje ir pateikite jį atsižvelgiant į vartotojo kalbos nustatymus.
• Prieinamumas: Įsitikinkite, kad jūsų žiniatinklio programa yra prieinama vartotojams su negalia, nepriklausomai nuo jų tinklo ryšio. Laikykitės prieinamumo geriausios praktikos ir išbandykite savo programą su pagalbinėmis technologijomis.
• Turinio atnaujinimai: Suplanuokite, kaip efektyviai tvarkyti turinio atnaujinimus. Strategijos, tokios kaip `stale-while-revalidate`, gali suteikti vartotojams greitą pradinę patirtį, tuo pačiu užtikrinant, kad jie galiausiai pamatys naujausią turinį. Apsvarstykite galimybę naudoti versijavimą podėlyje esantiems ištekliams, kad atnaujinimai būtų įdiegti sklandžiai.
• Vietinės saugyklos (Local Storage) apribojimai: Nors vietinė saugykla yra naudinga mažiems duomenų kiekiams, „service workers“ turi prieigą prie „Cache API“, kuri leidžia saugoti didesnius failus ir sudėtingesnes duomenų struktūras, kurios yra kritiškai svarbios neprisijungus veikiančioms patirtims.

„Offline-First“ programų pavyzdžiai

Keletas populiarių žiniatinklio programų sėkmingai įdiegė funkcionalumą neprisijungus naudojant „service workers“:

• Google Maps: Leidžia vartotojams atsisiųsti žemėlapius naudojimui neprisijungus, suteikiant galimybę naršyti net be interneto ryšio.
• Google Docs: Leidžia vartotojams kurti ir redaguoti dokumentus neprisijungus, o pakeitimus sinchronizuoja, kai atsiranda tinklo ryšys.
• Starbucks: Leidžia vartotojams naršyti meniu, pateikti užsakymus ir valdyti savo premijų sąskaitą neprisijungus.
• AliExpress: Leidžia vartotojams naršyti produktus, pridėti prekes į krepšelį ir peržiūrėti užsakymų informaciją neprisijungus.
• Wikipedia: Siūlo prieigą prie straipsnių ir turinio neprisijungus, todėl žinios tampa prieinamos net be interneto.

Išvada

„Service workers“ yra galingas įrankis kuriant greitas, patikimas ir įtraukiančias „offline-first“ žiniatinklio programas. Išsaugodami išteklius podėlyje, perimdami tinklo užklausas ir atlikdami fono užduotis, „service workers“ gali suteikti geresnę vartotojo patirtį net tada, kai tinklo ryšys yra ribotas arba jo visai nėra. Kadangi prieiga prie tinklo visame pasaulyje išlieka nevienoda, „offline-first“ dizaino principų taikymas yra labai svarbus siekiant užtikrinti vienodas galimybes gauti informaciją ir paslaugas internete.

Vadovaudamiesi šiame vadove pateiktais žingsniais ir atsižvelgdami į minėtus veiksnius, galite kurti žiniatinklio programas, kurios sklandžiai veikia neprisijungus ir suteikia malonią patirtį vartotojams visame pasaulyje. Pasinaudokite „service workers“ galia ir kurkite ateities internetą – ateitį, kurioje internetas prieinamas visiems, visur, nepriklausomai nuo jų tinklo ryšio.