Service Workers: Izrada 'offline-first' web aplikacija

U današnjem svijetu korisnici očekuju da web aplikacije budu brze, pouzdane i dostupne, čak i kada je mrežna povezanost ograničena ili nedostupna. Tu na scenu stupa koncept dizajna "offline-first". Service workeri su moćna tehnologija koja programerima omogućuje izradu web aplikacija koje besprijekorno rade i bez internetske veze, pružajući vrhunsko korisničko iskustvo.

Što su Service Workers?

Service worker je JavaScript datoteka koja se izvršava u pozadini, odvojeno od glavne niti preglednika. Djeluje kao posrednik (proxy) između web aplikacije i mreže, presrećući mrežne zahtjeve i upravljajući keširanjem. Service workeri mogu obavljati zadatke kao što su:

• Keširanje statičkih resursa (HTML, CSS, JavaScript, slike)
• Posluživanje keširanog sadržaja kada nema internetske veze
• Push obavijesti
• Pozadinska sinkronizacija

Važno je napomenuti da service workere kontrolira preglednik, a ne web stranica. To im omogućuje da funkcioniraju čak i kada je korisnik zatvorio karticu ili prozor preglednika.

Zašto 'Offline-First'?

Izrada 'offline-first' web aplikacije nudi brojne prednosti:

• Poboljšane performanse: Keširanjem statičkih resursa i njihovim posluživanjem izravno iz predmemorije, service workeri značajno smanjuju vrijeme učitavanja, što rezultira bržim i responzivnijim korisničkim iskustvom.
• Povećana pouzdanost: Čak i kada mreža nije dostupna, korisnici i dalje mogu pristupiti keširanom sadržaju, osiguravajući da aplikacija ostane funkcionalna.
• Veći angažman: Funkcionalnost bez internetske veze čini aplikaciju korisnijom i pristupačnijom, što dovodi do povećanog angažmana i zadržavanja korisnika.
• Smanjena potrošnja podataka: Keširanjem resursa, service workeri smanjuju količinu podataka koju je potrebno preuzeti putem mreže, što je posebno korisno za korisnike s ograničenim podatkovnim paketima ili sporim internetskim vezama u područjima sa slabije razvijenom infrastrukturom. Na primjer, u mnogim dijelovima Afrike i Južne Amerike, troškovi podataka mogu biti značajna prepreka za korisnike interneta. 'Offline-first' dizajn pomaže u ublažavanju ovog problema.
• Poboljšan SEO: Tražilice favoriziraju web stranice koje su brze i pouzdane, pa izrada 'offline-first' aplikacije može poboljšati vaš rang na tražilicama.

Kako rade Service Workers

Životni ciklus service workera sastoji se od nekoliko faza:

1. Registracija: Service worker se registrira u pregledniku, specificirajući opseg aplikacije koju će kontrolirati.
2. Instalacija: Service worker se instalira, tijekom čega obično kešira statičke resurse.
3. Aktivacija: Service worker se aktivira i preuzima kontrolu nad web aplikacijom. To može uključivati odjavu starih service workera i čišćenje starih predmemorija.
4. Mirovanje: Service worker ostaje u stanju mirovanja, čekajući mrežne zahtjeve ili druge događaje.
5. Dohvaćanje (Fetch): Kada se napravi mrežni zahtjev, service worker ga presreće i može poslužiti keširani sadržaj ili dohvatiti resurs s mreže.

Implementacija 'Offline-First' pristupa sa Service Workerima: Vodič korak po korak

Evo osnovnog primjera kako implementirati 'offline-first' funkcionalnost koristeći service workere:

Korak 1: Registrirajte Service Worker

U vašoj glavnoj JavaScript datoteci (npr., `app.js`):

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker registriran s opsegom:', registration.scope);
    })
    .catch(function(error) {
      console.log('Registracija Service Workera nije uspjela:', error);
    });
}

Ovaj kod provjerava podržava li preglednik service workere i registrira datoteku `service-worker.js`. Opseg (scope) definira koje će URL-ove service worker kontrolirati.

Korak 2: Stvorite datoteku Service Workera (service-worker.js)

Stvorite datoteku pod nazivom `service-worker.js` sa sljedećim kodom:

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

self.addEventListener('install', function(event) {
  // Izvrši korake instalacije
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Predmemorija otvorena');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Pogodak u predmemoriji - vrati odgovor
        if (response) {
          return response;
        }

        // VAŽNO: Klonirajte zahtjev.
        // Zahtjev je tok (stream) i može se konzumirati samo jednom. Budući da ga konzumiramo
        // jednom za predmemoriju i jednom za dohvaćanje (fetch) u pregledniku, moramo klonirati odgovor.
        var fetchRequest = event.request.clone();

        return fetch(fetchRequest).then(
          function(response) {
            // Provjerite jesmo li primili valjan odgovor
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // VAŽNO: Klonirajte odgovor.
            // Odgovor je tok (stream) i treba ga konzumirati samo jednom.
            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);
          }
        })
      );
    })
  );
});

Ovaj kod radi sljedeće:

• Definira `CACHE_NAME` i polje `urlsToCache`.
• Tijekom događaja `install`, otvara predmemoriju i dodaje specificirane URL-ove u nju.
• Tijekom događaja `fetch`, presreće mrežne zahtjeve. Ako se traženi resurs nalazi u predmemoriji, vraća keširanu verziju. U suprotnom, dohvaća resurs s mreže, kešira ga i vraća odgovor.
• Tijekom događaja `activate`, uklanja stare predmemorije kako bi veličina predmemorije ostala upravljiva.

Korak 3: Testirajte svoju offline funkcionalnost

Kako biste testirali svoju offline funkcionalnost, možete koristiti alate za razvojne programere u pregledniku. U Chromeu otvorite DevTools, idite na karticu "Application" i odaberite "Service Workers." Zatim možete simulirati offline način rada označavanjem kućice "Offline".

Napredne tehnike Service Workera

Jednom kada steknete osnovno razumijevanje service workera, možete istražiti naprednije tehnike za poboljšanje vaše 'offline-first' aplikacije:

Strategije keširanja

Postoji nekoliko strategija keširanja koje možete koristiti, ovisno o vrsti resursa i zahtjevima vaše aplikacije:

• Prvo predmemorija (Cache First): Uvijek poslužite sadržaj iz predmemorije, a s mreže dohvatite samo ako resurs nije pronađen u predmemoriji.
• Prvo mreža (Network First): Uvijek prvo pokušajte dohvatiti sadržaj s mreže, a predmemoriju koristite samo kao rezervnu opciju.
• Predmemorija pa mreža (Cache then Network): Odmah poslužite sadržaj iz predmemorije, a zatim ažurirajte predmemoriju najnovijom verzijom s mreže. Ovo pruža brzo početno učitavanje i osigurava da korisnik na kraju uvijek ima najnoviji sadržaj.
• Zastarjelo-dok-se-ponovno-provjerava (Stale-while-revalidate): Slično kao 'Predmemorija pa mreža', ali ažurira predmemoriju u pozadini bez blokiranja početnog učitavanja.
• Samo mreža (Network Only): Prisiljava aplikaciju da uvijek dohvaća sadržaj s mreže.
• Samo predmemorija (Cache Only): Prisiljava aplikaciju da koristi samo sadržaj pohranjen u predmemoriji.

Odabir prave strategije keširanja ovisi o specifičnom resursu i zahtjevima vaše aplikacije. Na primjer, statički resursi poput slika i CSS datoteka često se najbolje poslužuju koristeći strategiju 'Prvo predmemorija', dok bi dinamički sadržaj mogao imati koristi od strategije 'Prvo mreža' ili 'Predmemorija pa mreža'.

Pozadinska sinkronizacija

Pozadinska sinkronizacija omogućuje vam odgađanje zadataka dok korisnik ne uspostavi stabilnu mrežnu vezu. To je korisno za zadatke kao što su slanje obrazaca ili prijenos datoteka. Na primjer, korisnik u udaljenom području Indonezije može ispuniti obrazac dok je offline. Service worker tada može pričekati dok veza ne postane dostupna prije slanja podataka.

Push obavijesti

Service workeri se mogu koristiti za slanje push obavijesti korisnicima, čak i kada aplikacija nije otvorena. To se može koristiti za ponovno angažiranje korisnika i pružanje pravovremenih ažuriranja. Zamislite aplikaciju za vijesti koja pruža obavijesti o najnovijim vijestima korisnicima u stvarnom vremenu, bez obzira na to je li aplikacija aktivno pokrenuta.

Workbox

Workbox je zbirka JavaScript biblioteka koje olakšavaju izradu service workera. Pruža apstrakcije za uobičajene zadatke kao što su keširanje, usmjeravanje i pozadinska sinkronizacija. Korištenje Workboxa može pojednostaviti vaš kod service workera i učiniti ga lakšim za održavanje. Mnoge tvrtke sada koriste Workbox kao standardnu komponentu pri razvoju PWA i 'offline-first' iskustava.

Razmatranja za globalnu publiku

Prilikom izrade 'offline-first' web aplikacija za globalnu publiku, važno je uzeti u obzir sljedeće čimbenike:

• Različiti mrežni uvjeti: Mrežna povezanost može značajno varirati u različitim regijama. Neki korisnici mogu imati pristup brzom internetu, dok se drugi mogu oslanjati na spore ili povremene veze. Dizajnirajte svoju aplikaciju tako da graciozno rukuje različitim mrežnim uvjetima.
• Troškovi podataka: Troškovi podataka mogu biti značajna prepreka za korisnike interneta u nekim dijelovima svijeta. Smanjite potrošnju podataka agresivnim keširanjem resursa i optimizacijom slika.
• Jezična podrška: Osigurajte da vaša aplikacija podržava više jezika i da korisnici mogu pristupiti sadržaju na svom željenom jeziku, čak i kada su offline. Pohranite lokalizirani sadržaj u predmemoriju i poslužite ga na temelju korisnikovih jezičnih postavki.
• Pristupačnost: Pobrinite se da vaša web aplikacija bude dostupna korisnicima s invaliditetom, bez obzira na njihovu mrežnu vezu. Slijedite najbolje prakse pristupačnosti i testirajte svoju aplikaciju s pomoćnim tehnologijama.
• Ažuriranja sadržaja: Planirajte kako učinkovito rukovati ažuriranjima sadržaja. Strategije poput `stale-while-revalidate` mogu korisnicima pružiti brzo početno iskustvo, istovremeno osiguravajući da na kraju vide najnoviji sadržaj. Razmislite o korištenju verzija za keširane resurse kako bi se ažuriranja glatko implementirala.
• Ograničenja lokalne pohrane (Local Storage): Iako je lokalna pohrana korisna za male količine podataka, service workeri imaju pristup Cache API-ju, koji omogućuje pohranu većih datoteka i složenijih podatkovnih struktura, što je ključno za offline iskustva.

Primjeri 'Offline-First' aplikacija

Nekoliko popularnih web aplikacija uspješno je implementiralo 'offline-first' funkcionalnost koristeći service workere:

• Google Maps: Omogućuje korisnicima preuzimanje karata za offline upotrebu, omogućujući im navigaciju čak i bez internetske veze.
• Google Docs: Omogućuje korisnicima stvaranje i uređivanje dokumenata offline, sinkronizirajući promjene kada je mrežna veza dostupna.
• Starbucks: Omogućuje korisnicima pregledavanje jelovnika, naručivanje i upravljanje svojim računom za nagrade offline.
• AliExpress: Omogućuje korisnicima pregledavanje proizvoda, dodavanje artikala u košaricu i pregled detalja narudžbe offline.
• Wikipedia: Nudi offline pristup člancima i sadržaju, čineći znanje dostupnim čak i bez interneta.

Zaključak

Service workeri su moćan alat za izradu 'offline-first' web aplikacija koje su brze, pouzdane i privlačne. Keširanjem resursa, presretanjem mrežnih zahtjeva i rukovanjem pozadinskim zadacima, service workeri mogu pružiti vrhunsko korisničko iskustvo, čak i kada je mrežna povezanost ograničena ili nedostupna. Budući da pristup mreži ostaje nedosljedan diljem svijeta, fokusiranje na 'offline-first' dizajn ključno je za osiguravanje pravednog pristupa informacijama i uslugama na webu.

Slijedeći korake navedene u ovom vodiču i uzimajući u obzir gore navedene čimbenike, možete stvoriti web aplikacije koje besprijekorno rade offline i pružaju ugodno iskustvo korisnicima diljem svijeta. Prihvatite moć service workera i gradite budućnost weba – budućnost u kojoj je web dostupan svima, svugdje, bez obzira na njihovu mrežnu vezu.