Byg apps, der arbejder offline

Feb 2, 2026
hvordan

I lang tid har offline-funktionalitet, baggrundssynkronisering og push-meddelelser differentierede indfødte apps fra deres web-kolleger. Det Service Worker Api. er en spil-skiftende teknologi, der evner spillefeltet. I denne vejledning bruger vi det til at opbygge en side, der kan betjene indhold, selvom der ikke er internetforbindelse.

01. En HTTPS-server

Den nemmeste måde at tænke på servicearbejdere er som et stykke kode, der er installeret af et websted på en klientmaskine, løber i baggrunden, og aktiverer derefter anmodninger, der sendes til det websted, der skal opsnappes og manipuleres. Fordi dette er sådan en stærk kapacitet, at arbejde med servicegårde i et levende miljø, skal du køre over HTTPS. Dette sikrer, at de ikke kan udnyttes, ved at sikre, at servicearbejderen, browseren modtager fra en side, er ægte.

Til udviklingsformål kan vi dog køre uden HTTPS siden http: // localhost / er tilladt som en undtagelse fra denne regel. Den enkleste måde at komme i gang på er med NPM http-server pakke. 

 NPM Installer HTTP-Server -G
http-server -p 8000-C-1

02. Opsæt en grundlæggende side

Der er ikke noget på serveren lige nu, så lad os lave en grundlæggende side til at tjene op. Vi opretter en ny indeks.html-fil, og når vi kører serveren, vil den nu være tilgængelig på http: // localhost: 8000 .

På dette stadium vil du opdage, at hvis du opsiger HTTP-serveren og opdater siden i browseren, får du en fejlside, da webstedet ikke kan nås. Dette forventes helt, da vi ikke har cachelagret noget offline indhold endnu. 

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
  & lt; hoved & gt;
  & lt; meta charset = "utf-8" / & gt;
  & lt; titel & gt; servicearbejder & lt; / titel & gt;
  & lt; script src = "site.js" & gt; & lt; / script & gt;
  & lt; link rel = "stylesheet" type = "tekst / css" href = "custom.css" & gt;
  & lt; / Head & GT;
  & lt; body & gt;
  & lt; header & gt;
  & lt; h1 & gt; velkommen & lt; / h1 & gt;
  & lt; / header & gt;
  & lt; div id = "indhold" & gt;
  & lt; p & gt; indhold her & lt; / p & gt;
  & lt; img src = "kitty.jpg" bredde = "100%" & gt;
  & lt; / div & gt;
  & lt; / body & gt;
& lt; / HTML & GT;

03. Tilmeld en tjenestearbejder

Vi har nu en temmelig unremarkable side kører, og det er på tide at begynde at tænke på at implementere en servicearbejder. Før vi får kodning, er det værd at tage et øjeblik for at forstå livscyklusen for servicearbejdere.

Processen starter med 'Registrering' af en tjenestearbejder i javascript, som fortæller browseren at begynde at installere arbejdstageren - det første trin i livscyklusen. I løbet af sin livscyklus vil en tjenestearbejder være i et af følgende stater:

  • Installation: Når en servicearbejder er blevet registreret, bruges installationen typisk til at downloade og cache statisk indhold
  • Installeret: Arbejderen er teoretisk klar til brug, men aktiverer ikke straks
  • Aktivering: En installeret servicearbejder vil aktivere sig selv, hvis der ikke er nogen eksisterende tjenestearbejder eller visse betingelser fører den eksisterende til at udløbe; Aktivering bruges typisk til at rydde gamle filer fra cachelagret offline indhold
  • Aktiveret: Tjenestearbejderen har nu kontrol over dokumentet, og kan håndtere anmodninger
  • Overflødig: Hvis servicearbejderen ikke har installeret eller aktiveret, eller hvis den erstattes af en nyere servicearbejder

04. Kontroller, at du er registreret

Lad os registrere en servicearbejder. Dette peger effektivt på browseren til JavaScript-filen, som definerer servicearbejderens adfærd. Registrering er udført ved hjælp af serviceworkerobjektet, som er indgangspunktet til API'en. Vi kontrollerer også API'en er faktisk til stede i browseren, før vi forsøger at gøre det.

Det Tilmeld() Funktionen kan sikkert kaldes hver gang siden indlæser, og browseren vil afgøre, om servicearbejderen allerede er registreret. 

 IF ('SERVICEWORKER' i NAVIGATOR) {
  Window.AddeventListener ('Load', funktion () {
  navigator.serviceworker.register ('serviceworker.js', {Scope: './'}).then(funktion (Registration) {
  Console.log ("Service Worker registreret med succes.");
  }, funktion (fejl) {
  Console.log ("Fejl Registrering af servicearbejder:" + Fejl);
  });
  });
}

05. Gennemfør servicearbejder

Dernæst skal vi selv gennemføre servicearbejderen. Servicearbejdere kan lytte til en række arrangementer relateret til deres egen livscyklus og aktivitet på siden. De vigtigste er installeret, aktiver og hent.

Lad os starte med at skabe en lytter til installere begivenhed, som udløser, når arbejdstagerens installation er afsluttet. Dette gør det muligt for os at instruere servicevirksomheden til at tilføje noget offline indhold i den aktuelle mappe til en cache. Vi skal også nævne vores cache - da gamle caches kan fortsætte, opdaterer du, opdatering / versionering af dette cache-navn gør det muligt at betjene nyere versioner af indhold senere. 

 Var CurrentCache = 'Demo-cache';
self.addeventListener ('install', begivenhed = & gt; {
  event.waituntil (
  caches.open (nuværendeCache) .then (funktion (cache) {
  console.log ("Tilføjelse af indhold til cache.");
  returnere cache.addall ([
  './index_offline.html',
  './kitty_offline.jpg',
  './custom.css'
  ]);
  })
  );
});

06. Hent begivenheder.

Vores side vil nu cache indhold, når de er lastet, men vi har brug for en vis mekanisme til at opfange anmodninger og omdirigere dem til denne cache. For at gøre dette skal vi lytte til Fetch. begivenheder, som udløses, når en anmodning som at opnå vores index.html. Filen er lavet på tværs af netværket. Vi matcher derefter anmodningen mod cachen og tjener den cachelagrede ressource, hvis det findes. Ellers falder vi tilbage til en hent API-anmodning til serveren.

Det er værd på dette tidspunkt, der bemærker, at vi har en tung afhængighed af JavaScript lover at arbejde. Disse kan være lidt vanskelige, så det er værd at være bekendt med, hvis du ikke har brugt dem før. 

 Self.addeventListener ('FETCH', EVENT = & GT; {
  event.respondwith (
  caches.match (event.request) .then (respons = & gt; {
  Retur Response ||. hent (event.request);
  })
   );
    });

07. Udvid Hent Hændelse

Hvis du tester det nu (afslutte HTTP-serveren og opdater siden), skal du finde, at din side fungerer både online og offline. Det er dog sandsynligt, at du vil have mere intelligent offlineadfærd, med andet indhold eller funktionalitet, når serveren ikke er tilgængelig.

For at opnå dette kan vi udvide vores Fetch. Hændelsesrespons yderligere for at tjekke specifikt til navigationsanmodninger og svare med en anden offline-side, når man er detekteret. Det her index_offline.html. Filen kan være en variation af din online-side eller noget helt anderledes, og kan også bruge andre ressourcer, du har cachelagret som f.eks Custom.css. . 

 Self.addeventListener ('FETCH', EVENT = & GT; {
  hvis (event.request.mode === 'navigate') {
  event.respondwith (
  Fetch (Event.Request) .catch (Error = & GT; {
  Console.log ("Side ikke tilgængelig. Tilbagevendende offline indhold.");
  returnere caches.match ('./ index_offline.html');
  })
  );
  } ellers {
  event.respondwith (
  caches.match (event.request) .then (respons = & gt; {
  Retur Response ||. hent (event.request);
  })
  );
  }
});

08. Slet cache.

Der er endnu en ting, vi har brug for. Hvis du nu forsøger at ændre dit offline indhold, finder du det ikke opdateret, når du tester din side - du får stadig den gamle version! Dette skyldes, at de ældre filer stadig er cachelagrede.

Du skal implementere noget for at rense forældede filer fra cachen for at forhindre, at de bliver serveret. Dette gøres ved at reagere på en Aktiver begivenhed og sletning af alle caches, der ikke stemmer overens med navnet angivet i nuværendeCache. Du kan derefter tilføje et versionsnummer til CurrentCache hver gang du ændrer dit offline-indhold for at sikre, at det opdateres. 

 Denne.AddeventListener ('Aktiver', Event = & GT; {
  VAR ACTIVECACHES = [CurrentCache];
  Console.log ("Service Worker Activated. Kontrol af cache er up-to-date.");
  event.waituntil (
  caches.keys (). Derefter (keylist = & gt; {
  returl løfte.All (keylist.map (nøgle = & gt; {
  hvis (acctivecaches.indexof (nøgle) === -1) {
  console.log ("Sletning af gammel cache" + nøgle);
  returnere caches.Delete (nøgle);
  }
  }));
  })
  );
});

Denne artikel blev offentliggjort i Web Designer Magazine Issue # 268. Tilmeld nu.

Læs mere:

  • En koder guide til API'er
  • Kom godt i gang med WebGL ved hjælp af Three.js
  • 12 Kæmpe webdesign Trends for 2018

hvordan - Mest populære artikler

8 state-of-the-art CSS-funktioner (og hvordan man bruger dem)

hvordan Feb 2, 2026

(Billedkredit: Getty billeder) CSS er konstant udviklet, og en lang række spændende nye funktioner er blevet tilfø..

Brug Brain.js til at opbygge et neuralt netværk

hvordan Feb 2, 2026

(Billedkredit: Getty billeder) Brain.js er en fantastisk måde at bygge et neuralt netværk på. Simpelthen sagt, et ..

Sådan forfinerer du din designportefølje

hvordan Feb 2, 2026

Din portefølje holder nøglen til at få det næste projekt i posen, så det fortjener meget opmærksomhed. Det er også vigtigt at huske, at det aldrig er et færdigt produkt. Som en kreati..

Tilføj SVG filtre med CSS

hvordan Feb 2, 2026

SVG har eksisteret siden begyndelsen af ​​2000'erne, og alligevel er der stadig interessante måder, som designere finder på..

Sådan maler man fantasyyr

hvordan Feb 2, 2026

Når du har kommet op med en ide til en fantasy væsen, er det næste skridt at bringe det til liv ved at male det med troværdig..

Sådan laver de massive eksplosioner med V-RAY

hvordan Feb 2, 2026

Oprettelse og sammensætning af 3D-eksplosioner er normalt en opgave for to forskellige kunstnere eller studiejendomme, men her s..

Mal et portræt som Van Gogh

hvordan Feb 2, 2026

Dutch Post-Impressionist Painter Vincent Van Gogh (1853-1890) skabte mange selvportrætter i sin karriere - selvom nogle af dem i..

Mock Up AR Grafik med After Effects

hvordan Feb 2, 2026

After Effects har nogle kraftfulde værktøjer, som vi kan bruge til at efterligne forstærkede virkeligheden. Du kan finde det nødvendigt, hvis du for eksempel ønskede at lave en tonehøjd..

Kategorier