Bygg apps som jobber offline

Sep 14, 2025

hvordan

[1. 3]

I lang tid har frakoblet funksjonalitet, bakgrunnssynkronisering og push-varsler differensierte innfødte apper fra deres web-kolleger. De SERVICE WORKER API. er en spillendringsteknologi som fremmer spillfeltet. I denne opplæringen bruker vi den til å bygge en side som kan tjene opp innhold selv mens det ikke er Internett-tilkobling.

Last ned koden fra filsilo

01. En HTTPS-server

Den enkleste måten å tenke på servicearbeidere er som et stykke kode som er installert av et nettsted på en klientmaskin, går i bakgrunnen, og gjør det senere at forespørsler sendt til dette stedet som skal oppfanges og manipuleres. Fordi dette er en så kraftig evne, å jobbe med servicearbeidere i et levende miljø, må du kjøre over HTTPS. Dette sikrer at de ikke kan utnyttes, ved å sørge for at nettleseren sørger for at nettleseren mottar fra en side, er ekte.

For utviklingsformål kan vi imidlertid kjøre uten HTTPS siden http: // localhost / er tillatt som et unntak fra denne regelen. Den enkleste måten å komme i gang er med NPM http-server pakke.

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

02. Sett opp en grunnleggende side

Det er ingenting på serveren akkurat nå, så la oss gjøre en grunnleggende side for å tjene opp. Vi lager en ny index.html-fil, og når vi kjører serveren, vil den nå være tilgjengelig på http: // localhost: 8000 .

På dette stadiet finner du at hvis du avslutter HTTP-serveren og oppdaterer siden i nettleseren, får du en feilside siden nettstedet ikke kan nås. Dette er helt forventet siden vi ikke har bufret ethvert offline innhold ennå.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
  & lt; head & gt;
  & lt; meta charset = "UTF-8" / & gt;
  & lt; title & gt; service arbeider & lt; / title & 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 = "innhold" & gt;
  & lt; p & gt; innhold her & lt; / p & gt;
  & lt; img src = "kitty.jpg" bredde = "100%" & gt;
  & lt; / div & gt;
  & lt; / body & gt;
& lt; / html & gt;

03. Registrer en tjenestearbeider

Vi har nå fått en ganske unremarkable side som kjører, og det er på tide å begynne å tenke på å implementere en servicevirksomhet. Før vi blir koding, er det verdt å ta et øyeblikk for å forstå livssyklusen til servicearbeidere.

Prosessen starter med "Registrering" av en servicevirksomhet i JavaScript, som forteller nettleseren å begynne å installere arbeideren - det første trinnet i sin livssyklus. Gjennom sin livssyklus vil en servicevirksomhet være i en av følgende stater:

Installere: Når en servicevirksomhet er registrert, brukes installasjonen vanligvis til å laste ned og cache statisk innhold
Installert: Arbeidsgiveren er teoretisk klar til bruk, men aktiverer ikke umiddelbart
Aktivering: En installert servicevirksomhet vil aktivere seg selv hvis enten det ikke er noen eksisterende tjenestemenn, eller visse forhold fører den eksisterende til å utløpe; Aktivering brukes vanligvis til å fjerne gamle filer fra cached offline innhold
Aktivert: Tjenestemannen har nå kontroll over dokumentet, og kan håndtere forespørsler
Overflødig: Hvis tjenestearbeideren ikke kunne installere eller aktivere, eller hvis den erstattes av en nyere servicevirksomhet

04. Sjekk at du er registrert

La oss registrere en servicevirksomhet. Dette peker effektivt nettleseren til JavaScript-filen som definerer servicearbeiderens oppførsel. Registrering gjøres ved hjelp av serviceproduksjonsobjektet som er inngangspunktet til API. Vi vil også sjekke API er faktisk tilstede i nettleseren før du prøver å gjøre det.

De registrere() Funksjonen kan trygt kalles hver gang siden laster, og nettleseren vil avgjøre om tjenestemannen allerede er registrert.

 Hvis ('Serviceproacher' i Navigator) {
  window.addeventlistener ('last', funksjon () {
  navigator.ServiceWorker.Register ('servicephearing.js', {scope: './'})
  konsoll.log ("Servicearbeider registrert med hell.");
  }, funksjon (feil) {
  Console.log ("Feil Registrering Service Arbeider:" + Feil);
  });
  });
}

05. Implementer servicearbeider

Deretter må vi implementere selve arbeideren selv. Tjenestearbeidere kan lytte etter en rekke hendelser knyttet til egen livssyklus og aktivitet på siden. De viktigste er installere, aktiveres og hente.

La oss begynne med å skape en lytter for installere hendelse, som utløser når arbeidstakerens installasjon er fullført. Dette gjør det mulig for oss å instruere servicevirksomheten å legge til noe frakoblet innhold i den nåværende mappen til en cache. Vi må også nevne vår cache - siden gamle caches kan vedvare, oppdatering / versjoner dette cachenavnet lar deg betjene nyere versjoner av innhold senere.

 VAR CurrentCache = 'Demo-cache';
Self.addeventlistener ('install', event = & gt; {
  Event.waituntil (
  caches.open (currentcache) .Nå (funksjon (cache) {
  konsoll.log ("Legge til innhold til cache.");
  Return cache.addall ([
  './index_offline.html',
  './kitty_offline.jpg',
  './custom.css'
  ]);
  })
  );
});

06. Hent begivenhet

Vår side vil nå cache innhold når de lastes, men vi trenger noen mekanisme for å fange opp forespørsler og omdirigere dem til denne cachen. For å gjøre dette må vi lytte til hente det hendelser, som utløses når en forespørsel som for eksempel å skaffe oss index.html. Filen er laget over hele nettverket. Vi matcher deretter forespørselen mot hurtigbufferen, og serverer den bufrete ressursen hvis det er funnet. Ellers faller vi tilbake til en henting i API-forespørsel til serveren.

Det er verdt å merke seg at vi har en tung avhengighet av JavaScript lover å jobbe. Disse kan være litt vanskelig, så det er verdt å bli kjent med hvis du ikke har brukt dem før.

 Self.addeventlistener ('Hent', Event = & GT; {
  Event.respondwith (
  Caches.Match (Event.Request) .Then (response = & gt; {
  returrespons ||. hente (event.Request);
  })
   );
    });

07. Forlengt henting

Hvis du tester det ut nå (avslutt HTTP-serveren og oppdater siden), bør du oppdage at siden din fungerer både online og offline. Det er imidlertid sannsynlig at du vil ha mer intelligent offlineadferd, med forskjellig innhold eller funksjonalitet tilgjengelig når serveren ikke er tilgjengelig.

For å oppnå dette kan vi utvide vår hente det Eventrespons videre for å kontrollere spesifikt for navigasjonsforespørsler og svare på en annen offline side når man oppdages. Dette index_offline.html. filen kan være en variasjon av nettsiden din, eller noe helt annet, og kan også bruke andre ressurser du har bufret for eksempel custom.css .

 Self.addeventlistener ('Hent', Event = & GT; {
  hvis (event.request.mode === 'navigere') {
  Event.respondwith (
  hente (event.Request) .Catch (feil = & gt; {
  Console.log ("Side utilgjengelig. Retur frakoblet innhold.");
  returner caches.match ('./ index_offline.html');
  })
  );
  } else {
  Event.respondwith (
  Caches.Match (Event.Request) .Then (response = & gt; {
  returrespons ||. hente (event.Request);
  })
  );
  }
});

08. Slett cache

Det er en ting vi trenger. Hvis du nå prøver å endre ditt offline innhold, finner du det ikke oppdateres når du tester ut siden din - du får fortsatt den gamle versjonen! Dette skyldes at de eldre filene fortsatt er bufret.

Du må implementere noe for å rydde ut utdaterte filer fra hurtigbufferen for å hindre at de blir servert. Dette gjøres ved å svare på en aktiveres Event og slette alle caches som ikke samsvarer med navnet som er angitt i CurrentCache. Du kan deretter legge til et versjonsnummer til CurrentCache hver gang du endrer din offline innhold, for å sikre at den er oppdatert.

 This.addeventlistener ('Aktiver', Event = & GT; {
  var ActiveCaches = [CurrentCache];
  Console.log ("Servicearbeider aktivert. Kontrollere cache er oppdatert.");
  Event.waituntil (
  caches.keys (). Deretter (keylist = & gt; {
  returnere løfte. Alt (keylist.map (nøkkel = & gt; {
  hvis (ActiveCaches.indexof (tast) === -1) {
  konsoll.log ("Slette gammel cache" + nøkkel);
  Return caches.delete (nøkkel);
  }
  }));
  })
  );
});

Denne artikkelen ble publisert i Web Designer Magazine Issue # 268. Abonner nå.

Les mer:

En koder guide til APIer
Kom i gang med WebGL ved hjelp av tre.js
12 store webdesign trender for 2018

Bygg apps som jobber offline

01. En HTTPS-server

02. Sett opp en grunnleggende side

03. Registrer en tjenestearbeider

04. Sjekk at du er registrert

05. Implementer servicearbeider

06. Hent begivenhet

07. Forlengt henting

08. Slett cache

hvordan - Mest populære artikler

Legg til SVG-filtre med CSS

Animer SVG med JavaScript

Lag skyer med fumefx for 3ds maks

Hvordan tegne fjær

Hvordan ta med et 2D-tegn til livet i VR

Hvordan designe troverdige fantasy dyr

Mal på et 3D-nett med Zbrushcore polypaint-verktøy

Hvordan designe en animert helt

Kategorier