Bygga appar som fungerar offline

Feb 3, 2026

Hur

Under lång tid har offline-funktionalitet, bakgrundssynkronisering och push-meddelanden differentierade nativa appar från sina web-motsvarigheter. De Servicearbetare API är en spelsändande teknik som förväntar sig spelplanen. I den här handledningen använder vi det för att bygga en sida som kan servera innehåll även om det inte finns någon internetanslutning.

Ladda ner koden från Filesilo

01. En HTTPS-server

Det enklaste sättet att tänka på servicearbetare är som en kod som är installerad av en webbplats på en klientmaskin, körs i bakgrunden och möjliggör sedan förfrågningar som skickas till den webbplatsen som ska avlyssas och manipuleras. Eftersom det här är en så kraftfull förmåga att arbeta med servicearbetare i en levande miljö måste du springa över https. Detta säkerställer att de inte kan utnyttjas, genom att se till att den tjänstemän som webbläsaren mottar från en sida är äkta.

För utvecklingsändamål kan vi dock springa utan https sedan http: // localhost / är tillåtet som ett undantag från denna regel. Det enklaste sättet att komma igång är med npm http-server paket.

 npm installera http-server -g
http-server -p 8000 -c-1

02. Ställ in en grundläggande sida

Det finns inget på servern just nu, så låt oss göra en grundläggande sida för att tjäna upp. Vi skapar en ny index.html-fil, och när vi kör servern kommer det nu att vara tillgänglig på http: // localhost: 8000 .

På detta stadium finner du att om du avslutar HTTP-servern och uppdaterar sidan i webbläsaren får du en fel sida eftersom webbplatsen inte kan nås. Det är helt förväntat eftersom vi inte har cachat något offlineinnehåll än.

 & lt;! Doktype html & gt;
& lt; html & gt;
  & lt; huvud & gt;
  & LT; Meta Charset = "UTF-8" / & GT;
  & lt; Titel & GT; Servicearbetare & LT; / Titel & GT;
  & lt; script src = "site.js" & gt; & lt; / script & gt;
  & lt; länk rel = "stylesheet" typ = "Text / css" href = "custom.css" & gt;
  & LT; / Head & GT;
  & lt; kropp & gt;
  & lt; header & gt;
  & lt; H1 & GT; Välkommen & LT; / H1 & GT;
  & lt; / header & gt;
  & lt; div id = "innehåll" & gt;
  & lt; P & GT; innehåll här och lt; / P & GT;
  & lt; img src = "kitty.jpg" Bredd = "100%" & GT;
  & lt; / div & gt;
  & LT; / Body & GT;
& lt; / html & gt;

03. Registrera en tjänsteman

Vi har nu en ganska obehandlad sida som körs, och det är dags att börja tänka på att genomföra en tjänsteman. Innan vi får kodning är det värt att ta ett ögonblick för att förstå livscykeln för servicearbetare.

Processen sparkar av med "registrering" av en servicearbetare i ditt Javascript, vilket berättar att webbläsaren börjar installera arbetaren - det första steget i sin livscykel. Under hela sin livscykel kommer en servicearbetare att vara i ett av följande stater:

Installera: När en tjänsteman har registrerats används installationen vanligtvis för att ladda ner och cache statiskt innehåll
Installerad: Arbetaren är teoretiskt klar för användning men aktiverar inte omedelbart
Aktivera: En installerad servicearbetare kommer att aktivera sig om det inte finns någon befintlig tjänstemän, eller vissa villkor leder att den befintliga att löpa ut. Aktivering används vanligtvis för att rensa gamla filer från cachade offlineinnehåll
Aktiverad: Tjänstearbetaren har nu kontroll över dokumentet och kan hantera förfrågningar
Överflödig: Om tjänstearbetaren misslyckades med att installera eller aktivera, eller om den ersätts av en nyare servicearbetare

04. Kontrollera att du är registrerad

Låt oss registrera en servicearbetare. Detta pekar effektivt webbläsaren till JavaScript-filen som definierar servicearbetarens beteende. Registrering görs med hjälp av ServiceWorker-objektet som är ingångspunkten till API. Vi ska också kolla API är faktiskt närvarande i webbläsaren innan du försöker göra det.

De Registrera() Funktionen kan säkert kallas varje gång sidan laddas, och webbläsaren bestämmer om tjänstemannen redan har registrerats.

 Om ("Serviceworker" i Navigator) {
  fönster.Addeventlistener ('load', funktion () {
  navigator.serviceworker.register ('serviceworker.js', {Scope: './'9} ..then(function(registration) {
  Console.log ("Servicearbetare registrerad framgångsrikt.");
  }, funktion (fel) {
  Console.log ("Fel som registrerar servicearbetare:" + fel);
  });
  });
}

05. Implementera servicearbetare

Därefter måste vi genomföra servicemannen själv. Servicearbetare kan lyssna på en rad händelser som är relaterade till sin egen livscykel och aktivitet på sidan. De viktigaste är installation, aktivera och hämta.

Låt oss börja med att skapa en lyssnare för Installera händelse, som utlöser när arbetstagarens installation är klar. Detta gör det möjligt för oss att instruera tjänstearbetaren att lägga till lite offlineinnehåll i den aktuella mappen till en cache. Vi behöver också namnge vår cache - eftersom gamla cacher kan fortsätta, uppdatera / versionera detta cacheminne gör det möjligt för dig att hjälpa till med nyare versioner av innehåll senare.

 Var CurrentCache = 'Demo-cache';
self.addeventlistener ('install', evenemang = & gt; {
  evenemang.waituntil (
  caches.Open (strömcache) .Then (funktion (cache) {
  Console.log ("Lägga till innehåll i cacheminnet.");
  retur cache.addall ([
  './index_offline.html',
  './kitty_offline.jpg',
  './Anpassad CSS'
  ]);
  })
  );
});

06. Hämta händelse

Vår sida kommer nu att cache-innehållet när den laddas, men vi behöver lite mekanism för att fånga upp förfrågningar och omdirigera dem till den här cachen. För att göra detta måste vi lyssna på hämta händelser, som utlöses när en förfrågan som skaffa vår index.html Filen är gjord över nätverket. Vi matchar sedan begäran mot cacheminnet och serverar den cachade resursen om den hittas. Annars faller vi tillbaka till en hämta API-förfrågan till servern.

Det är värt att notera att vi har ett stort beroende av JavaScript lovar att arbeta. Dessa kan vara lite knepiga, så är värda att bekanta med om du inte har använt dem tidigare.

 self.addeventlistener ('hämta', evenemang = & gt; {
  evenemang.Respondwith (
  caches.match (evenemang.request) .Then (svar = & gt; {
  Retur svar || hämta (evenemang.request);
  })
   );
    });

07. Utöka hämtningsevenemang

Om du testar det nu (avsluta HTTP-servern och uppdaterar sidan), bör du upptäcka att din sida fungerar både online och offline. Det är dock troligt att du vill ha mer intelligent offline-beteende, med olika innehåll eller funktionalitet tillgänglig när servern är otillgänglig.

För att uppnå detta kan vi förlänga vårt hämta Evenemangssvar Vidare kontrollera specifikt för navigeringsförfrågningar och svara med en annan offline-sida när den är detekterad. Detta index_offline.html filen kan vara en variant på din online-sida, eller något helt annat, och kan också använda andra resurser du har cachat som Anpassad CSS .

 self.addeventlistener ('hämta', evenemang = & gt; {
  om (evenemang.request.mode === 'navigera') {
  evenemang.Respondwith (
  hämta (evenemang.request) .Catch (error = & gt; {
  Console.log ("sidan är inte tillgänglig. Återgå offlineinnehåll.");
  retur caches.match ('./ index_offline.html');
  })
  );
  } annars {
  evenemang.Respondwith (
  caches.match (evenemang.request) .Then (svar = & gt; {
  Retur svar || hämta (evenemang.request);
  })
  );
  }
});

08. Radera cache

Det är en sak vi behöver. Om du nu försöker ändra ditt offlineinnehåll, hittar du det inte uppdaterar när du testar din sida - du får fortfarande den gamla versionen! Detta beror på att de äldre filerna fortfarande är cachade.

Du måste implementera något för att rengöra föråldrade filer från cacheminnet för att förhindra att de serveras. Detta görs genom att svara på en Aktivera händelse och radering av alla cacher som inte matchar namnet som anges i CurrentCache. Du kan sedan lägga till ett versionsnummer till CurrentCache varje gång du ändrar ditt offlineinnehåll för att säkerställa att det är uppdaterat.

 This.Addeventlistener ('Aktivera', Event = & GT; {
  Var ActiveCaches = [CurrentCache];
  Console.log ("Servicearbetare aktiverad. Kontrollera cache är aktuell.");
  evenemang.waituntil (
  caches.keys (). Sedan (keylist = & gt; {
  returnera louse.all (keylist.map (nyckel = & gt; {
  IF (ActiveCaches.indexof (Key) === -1) {
  Console.log ("Radera gammal cache" + -knapp);
  retur caches.delete (tangent);
  }
  }));
  })
  );
});

Denna artikel publicerades i Web Designer Magazine Issue # 268. Prenumerera nu.

Läs mer:

En kodarens guide till API
Kom igång med WebGL med tre.js
12 stora webbdesign trender för 2018

Bygga appar som fungerar offline

01. En HTTPS-server

02. Ställ in en grundläggande sida

03. Registrera en tjänsteman

04. Kontrollera att du är registrerad

05. Implementera servicearbetare

06. Hämta händelse

07. Utöka hämtningsevenemang

08. Radera cache

Hur - Mest populära artiklar

Adobe Fresco Tutorial: Skapa ett porträtt i målningsappen

Kom igång med Grav CMS

Affinitetsdesigner: Hur man använder effekter och stilar

Stoppa botsna med Google Recaptcha

En guide till Googles molnsyn

Photoshop Färgbyte: 2 verktyg du behöver veta

Hur man skapar likvida effekter med WebGL

Skapa en app som samlar sensordata

Kategorier