Service Workers: Bygga Offline-First Webbapplikationer

I dagens värld förväntar sig användare att webbapplikationer ska vara snabba, pålitliga och tillgängliga, även när nätverksanslutningen är begränsad eller inte tillgänglig. Det är här konceptet med "offline-first"-design kommer in i bilden. Service workers är en kraftfull teknik som gör det möjligt för utvecklare att bygga webbapplikationer som fungerar sömlöst offline, vilket ger en överlägsen användarupplevelse.

Vad är Service Workers?

En service worker är en JavaScript-fil som körs i bakgrunden, separat från webbläsarens huvudtråd. Den fungerar som en proxy mellan webbapplikationen och nätverket, fångar upp nätverksanrop och hanterar cachning. Service workers kan hantera uppgifter som:

Cachning av statiska tillgångar (HTML, CSS, JavaScript, bilder)
Servera cachat innehåll i offlineläge
Push-notiser
Bakgrundssynkronisering

Viktigt är att service workers styrs av webbläsaren, inte av webbsidan. Detta gör att de kan fungera även när användaren har stängt fliken eller webbläsarfönstret.

Varför Offline-First?

Att bygga en offline-first webbapplikation erbjuder många fördelar:

Förbättrad prestanda: Genom att cacha statiska tillgångar och servera dem direkt från cachen minskar service workers laddningstiderna avsevärt, vilket resulterar i en snabbare och mer responsiv användarupplevelse.
Förbättrad pålitlighet: Även när nätverket är otillgängligt kan användare fortfarande komma åt cachat innehåll, vilket säkerställer att applikationen förblir funktionell.
Ökat engagemang: Offline-funktionalitet gör applikationen mer användbar och tillgänglig, vilket leder till ökat användarengagemang och bibehållande av användare.
Minskad dataförbrukning: Genom att cacha tillgångar minskar service workers mängden data som behöver laddas ner över nätverket, vilket är särskilt fördelaktigt för användare med begränsade dataplaner eller långsamma internetanslutningar i områden med mindre utvecklad infrastruktur. Till exempel, i många delar av Afrika och Sydamerika kan datakostnader vara ett betydande hinder för internetanvändare. Offline-first-design hjälper till att mildra detta.
Förbättrad SEO: Sökmotorer föredrar webbplatser som är snabba och pålitliga, så att bygga en offline-first-applikation kan förbättra din rankning i sökmotorer.

Hur Service Workers fungerar

Livscykeln för en service worker består av flera steg:

Registrering: Service workern registreras hos webbläsaren, där man specificerar omfattningen av applikationen den ska kontrollera.
Installation: Service workern installeras, och under denna process cachas vanligtvis statiska tillgångar.
Aktivering: Service workern aktiveras och tar kontroll över webbapplikationen. Detta kan innebära att avregistrera gamla service workers och rensa gamla cachar.
Viloläge: Service workern förblir i viloläge och väntar på nätverksanrop eller andra händelser.
Fetch (Hämta): När ett nätverksanrop görs fångar service workern upp det och kan antingen servera cachat innehåll eller hämta resursen från nätverket.

Implementera Offline-First med Service Workers: En steg-för-steg-guide

Här är ett grundläggande exempel på hur man implementerar offline-first-funktionalitet med hjälp av service workers:

Steg 1: Registrera Service Workern

I din huvudsakliga JavaScript-fil (t.ex. `app.js`):


if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker registrerad med scope:', registration.scope);
    })
    .catch(function(error) {
      console.log('Service Worker-registrering misslyckades:', error);
    });
}

Denna kod kontrollerar om webbläsaren stöder service workers och registrerar filen `service-worker.js`. Omfattningen (scope) definierar vilka URL:er som service workern kommer att kontrollera.

Steg 2: Skapa Service Worker-filen (service-worker.js)

Skapa en fil med namnet `service-worker.js` med följande kod:


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

self.addEventListener('install', function(event) {
  // Utför installationssteg
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Öppnade cache');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache-träff - returnera svar
        if (response) {
          return response;
        }

        // VIKTIGT: Klona request-objektet.
        // Ett request-objekt är en ström och kan bara konsumeras en gång. Eftersom vi konsumerar detta
        // en gång av cachen och en gång av webbläsaren för fetch, måste vi klona svaret.
        var fetchRequest = event.request.clone();

        return fetch(fetchRequest).then(
          function(response) {
            // Kontrollera om vi fick ett giltigt svar
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // VIKTIGT: Klona svaret.
            // Ett svar är en ström och behöver bara konsumeras en gång.
            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);
          }
        })
      );
    })
  );
});

Denna kod gör följande:

Definierar ett `CACHE_NAME` och en array med `urlsToCache`.
Under `install`-händelsen öppnar den cachen och lägger till de specificerade URL:erna i den.
Under `fetch`-händelsen fångar den upp nätverksanrop. Om den begärda resursen finns i cachen returnerar den den cachade versionen. Annars hämtar den resursen från nätverket, cachar den och returnerar svaret.
Under `activate`-händelsen tar den bort gamla cachar för att hålla cachestorleken hanterbar.

Steg 3: Testa din offline-funktionalitet

För att testa din offline-funktionalitet kan du använda webbläsarens utvecklarverktyg. I Chrome, öppna DevTools, gå till "Application"-fliken och välj "Service Workers." Du kan sedan simulera offlineläge genom att kryssa i rutan "Offline".

Avancerade Service Worker-tekniker

När du har en grundläggande förståelse för service workers kan du utforska mer avancerade tekniker för att förbättra din offline-first-applikation:

Cachningsstrategier

Det finns flera cachningsstrategier du kan använda, beroende på typen av resurs och din applikations krav:

Cache First (Cache först): Servera alltid innehåll från cachen och hämta bara från nätverket om resursen inte hittas i cachen.
Network First (Nätverk först): Försök alltid att hämta innehåll från nätverket först och använd bara cachen som en reservlösning.
Cache then Network (Cache sedan nätverk): Servera innehåll från cachen omedelbart och uppdatera sedan cachen med den senaste versionen från nätverket. Detta ger en snabb initial laddning och säkerställer att användaren alltid har det mest uppdaterade innehållet (så småningom).
Stale-while-revalidate: Liknar Cache then Network, men uppdaterar cachen i bakgrunden utan att blockera den initiala laddningen.
Network Only (Endast nätverk): Tvinga applikationen att alltid hämta innehåll från nätverket.
Cache Only (Endast cache): Tvinga applikationen att endast använda innehåll som lagrats i cachen.

Att välja rätt cachningsstrategi beror på den specifika resursen och din applikations krav. Till exempel, statiska tillgångar som bilder och CSS-filer serveras ofta bäst med Cache First-strategin, medan dynamiskt innehåll kan dra nytta av Network First- eller Cache then Network-strategin.

Bakgrundssynkronisering

Bakgrundssynkronisering låter dig skjuta upp uppgifter tills användaren har en stabil nätverksanslutning. Detta är användbart för uppgifter som att skicka in formulär eller ladda upp filer. Till exempel kan en användare i ett avlägset område i Indonesien fylla i ett formulär i offlineläge. Service workern kan sedan vänta tills en anslutning är tillgänglig innan den skickar datan.

Push-notiser

Service workers kan användas för att skicka push-notiser till användare, även när applikationen inte är öppen. Detta kan användas för att återengagera användare och ge snabba uppdateringar. Tänk dig en nyhetsapplikation som skickar ut varningar om senaste nytt till användare i realtid, oavsett om appen är aktivt igång.

Workbox

Workbox är en samling JavaScript-bibliotek som gör det enklare att bygga service workers. Det tillhandahåller abstraktioner för vanliga uppgifter som cachning, routing och bakgrundssynkronisering. Att använda Workbox kan förenkla din service worker-kod och göra den mer underhållbar. Många företag använder nu Workbox som en standardkomponent vid utveckling av PWA:er och offline-first-upplevelser.

Hänsyn för en global publik

När man bygger offline-first webbapplikationer för en global publik är det viktigt att ta hänsyn till följande faktorer:

Varierande nätverksförhållanden: Nätverksanslutningen kan variera avsevärt mellan olika regioner. Vissa användare kan ha tillgång till höghastighetsinternet, medan andra kan förlita sig på långsamma eller intermittenta anslutningar. Designa din applikation för att elegant hantera olika nätverksförhållanden.
Datakostnader: Datakostnader kan vara ett betydande hinder för internetanvändare i vissa delar av världen. Minimera dataförbrukningen genom att cacha tillgångar aggressivt och optimera bilder.
Språkstöd: Se till att din applikation stöder flera språk och att användare kan komma åt innehåll på sitt föredragna språk, även i offlineläge. Lagra lokaliserat innehåll i cachen och servera det baserat på användarens språkinställningar.
Tillgänglighet: Se till att din webbapplikation är tillgänglig för användare med funktionsnedsättningar, oavsett deras nätverksanslutning. Följ bästa praxis för tillgänglighet och testa din applikation med hjälpmedelsteknik.
Innehållsuppdateringar: Planera hur du hanterar innehållsuppdateringar effektivt. Strategier som `stale-while-revalidate` kan ge användare en snabb initial upplevelse samtidigt som de så småningom får se det senaste innehållet. Överväg att använda versionshantering för cachade tillgångar så att uppdateringar distribueras smidigt.
Begränsningar i Local Storage: Medan local storage är användbart för små mängder data, har service workers tillgång till Cache API, vilket möjliggör lagring av större filer och mer komplexa datastrukturer, vilket är avgörande för offline-upplevelser.

Exempel på Offline-First-applikationer

Flera populära webbapplikationer har framgångsrikt implementerat offline-first-funktionalitet med hjälp av service workers:

Google Maps: Låter användare ladda ner kartor för offline-användning, vilket gör det möjligt att navigera även utan internetanslutning.
Google Docs: Låter användare skapa och redigera dokument offline och synkroniserar ändringar när en nätverksanslutning blir tillgänglig.
Starbucks: Gör det möjligt för användare att bläddra i menyn, lägga beställningar och hantera sitt belöningskonto offline.
AliExpress: Låter användare bläddra bland produkter, lägga till varor i sin varukorg och se orderdetaljer offline.
Wikipedia: Erbjuder offline-åtkomst till artiklar och innehåll, vilket gör kunskap tillgänglig även utan internet.

Slutsats

Service workers är ett kraftfullt verktyg för att bygga offline-first webbapplikationer som är snabba, pålitliga och engagerande. Genom att cacha tillgångar, fånga upp nätverksanrop och hantera bakgrundsuppgifter kan service workers ge en överlägsen användarupplevelse, även när nätverksanslutningen är begränsad eller inte tillgänglig. Eftersom nätverksåtkomsten förblir inkonsekvent över hela världen är det avgörande att fokusera på offline-first-design för att säkerställa rättvis tillgång till information och tjänster på webben.

Genom att följa stegen som beskrivs i denna guide och ta hänsyn till de faktorer som nämns ovan kan du skapa webbapplikationer som fungerar sömlöst offline och ger en förtjusande upplevelse för användare världen över. Omfamna kraften i service workers och bygg framtidens webb – en framtid där webben är tillgänglig för alla, överallt, oavsett deras nätverksanslutning.