Bouw apps die offline werken

Feb 1, 2026

Procedures

Voor een lange tijd hebben offline functionaliteit, achtergrondsynchronisatie en pushmeldingen gedifferentieerd inheemse apps uit hun web-tegenhangers. De Service werknemer api is een game-veranderende technologie die het speelveld evalueert. In deze tutorial gebruiken we het om een pagina te bouwen die inhoud kan dienen, zelfs als er geen internetverbinding is.

Download de code uit filesilo

01. Een HTTPS-server

De eenvoudigste manier om na te denken over servicemedewerkers is als een stuk code dat is geïnstalleerd door een site op een client-machine, op de achtergrond wordt uitgevoerd en vervolgens de aanvragen die naar die site worden verzonden, kunnen worden onderschept en gemanipuleerd. Omdat dit zo'n krachtig vermogen is, om met servicemedewerkers in een liveomgeving te werken, moet je over HTTPS rennen. Dit zorgt ervoor dat ze niet kunnen worden uitgebuit, door ervoor te zorgen dat de servicewerker de browser van een pagina oprecht ontvangt.

Voor ontwikkelingsdoeleinden kunnen we sindsdien zonder HTTPS rennen http: // localhost / is toegestaan als een uitzondering op deze regel. De eenvoudigste manier om aan de slag te gaan is met de NPM HTTP-SERVER pakket.

 NPM Installeer http-server -g
http-server -P 8000-C-1

02. Stel een basispagina in

Er is nu niets op de server, dus laten we een basispagina maken om op te dienen. We maken een nieuw index.html-bestand en wanneer we de server uitvoeren, is het nu toegankelijk bij http: // localhost: 8000

In dit stadium vindt u dat als u de HTTP-server beëindigt en de pagina in de browser vernieuwt, u een foutpagina krijgt, aangezien de site niet kan worden bereikt. Dit wordt volledig verwacht omdat we nog geen offline content hebben opgeslagen.

 & LT;! DOCTYPE HTML & GT;
& lt; html & gt;
  & LT; HOOFD & GT;
  & LT; Meta CharsSet = "UTF-8" / GT;
  & LT; TITLE & GT; SERVICE WERKNEMER & LT; / TITLE & GT;
  & lt; script src = "site.js" & gt; & lt; / script & gt;
  & LT; LINK REL = "Stylesheet" Type = "Tekst / CSS" HREF = "Custom.css" & GT;
  & LT; / HOOFD & GT;
  & LT; BODY & GT;
  & lt; header & gt;
  & LT; H1 & GT; WELKOM & LT; / H1 & GT;
  & LT; / Header & GT;
  & LT; DIV ID = "INHOUD" & GT;
  & LT; P & GT; Inhoud hier & LT; / P & GT;
  & lt; img src = "kitty.jpg" breedte = "100%" & GT;
  & LT; / DIV & GT;
  & LT; / BODY & GT;
& lt; / html & gt;

03. Registreer een servicemedewerker

We hebben nu een vrij onoplettend pagina hardlopen en het is tijd om te beginnen met het implementeren van een servicemedewerker. Voordat we codering krijgen, is het de moeite waard om een moment te nemen om de levenscyclus van servicemedewerkers te begrijpen.

Het proces begint met de 'registratie' van een servicemedewerker in uw JavaScript, die de browser vertelt om de werknemer te installeren - de eerste stap van de levenscyclus. Gedurende de hele levenscyclus zal een servicewerel in een van de volgende landen zijn:

Installeren: Zodra een servicemedewerker is geregistreerd, wordt de installatie doorgaans gebruikt om statische inhoud te downloaden en te cachen
Geïnstalleerd: De werknemer is theoretisch klaar voor gebruik, maar activeert niet meteen
Activeren: Een geïnstalleerde servicemedewerker zal zichzelf activeren als er geen bestaande servicemedewerker is, of bepaalde omstandigheden leiden de bestaande om te verlopen; Activering wordt meestal gebruikt om oude bestanden te wissen van offline inhoud in de cache
Geactiveerd: De servicemedewerker heeft nu controle over het document en kan aan om verzoeken
Overtollig: Als de servicewerel niet kan installeren of activeren, of als deze wordt vervangen door een nieuwere servicemedewerker

04. Controleer dat u bent geregistreerd

Laten we een servicewerel registreren. Dit wijst de browser effectief naar het JavaScript-bestand dat het gedrag van de servicemedewerker definieert. Registratie gebeurt met behulp van het serviceworker-object dat het toegangspunt is naar de API. We controleren ook de API is daadwerkelijk aanwezig in de browser voordat u probeert dit te doen.

De registreren() Functie kan veilig worden genoemd telkens wanneer de paginalalys en de browser bepalen of de servicemedewerker al is geregistreerd.

 IF ('ServiceWorker' in Navigator) {
  venster.AddeventListener ('load', functie () {
  navigator.serviceworker.register ('Serviceworker.js', {Scope: './' =). Den (functions(registratie) {
  console.log ("Service Werknemer die succesvol is geregistreerd.");
  }, functie (fout) {
  console.log ("Foutregistratie Werknemer:" + FOUT);
  
  
}

05. Implementeer werknemer

Vervolgens moeten we de servicemedewerker zelf implementeren. Servicemedewerkers kunnen luisteren naar een reeks evenementen met betrekking tot hun eigen levenscyclus en activiteit op de pagina. De belangrijkste zijn installeren, activeren en ophalen.

Laten we beginnen met het maken van een luisteraar voor de installeren evenement, dat triggert zodra de installatie van de werknemer is voltooid. Hierdoor kunnen we de servicemedewerker instrueren om een aantal offline inhoud in de huidige map toe te voegen aan een cache. We moeten ook onze cache noemen - omdat oude caches kunnen aanhouden, waarbij u deze cache-naam wilt bijwerken, kunt u later nieuwe versies van inhoud dienen.

 Var Currentcache = 'Demo-cache';
self.addevenListener ('install', gebeurtenis = & gt; {
  event.waituntil (
  Caches.open (Currentcache). Den (functie (cache) {
  console.Log ("inhoud toevoegen aan cache.");
  Retourcache.Addall ([
  './index_offline.html',
  './kitty_offline.jpg',
  './custom.css'
  
  
  
});

06. FETCH-evenement

Onze pagina wordt nu cache inhoud indien geladen, maar we hebben een mechanisme nodig om verzoeken te onderscheppen en deze in deze cache te omleiden. Om dit te doen, moeten we luisteren naar halen gebeurtenissen, die worden geactiveerd wanneer een verzoek zoals het verkrijgen van onze index.html Bestand wordt over het netwerk gemaakt. Vervolgens komen we overeen met het verzoek tegen de cache en dienen de cache-resource als gevonden. Anders vallen we terug naar een FETCH API-verzoek aan de server.

Het is op dit moment waard dat we een zware afhankelijkheid van JavaScript belooft om te werken. Deze kunnen een beetje lastig zijn, dus zijn de moeite waard om vertrouwd te maken met als je ze niet eerder hebt gebruikt.

 Self.ADDEVENTLIENTLIENTER ('FETCH', EVENT = & GT; {
  gebeurtenis. responderwith (
  caches.match (event.Request). Den (respons = & gt; {
  Retourrespons || fetch (event.Request);
  
   
    });

07. Extend Fetch-evenement

Als u het nu test (beëindig de HTTP-server en ververs de pagina), moet u merken dat uw pagina zowel online als offline werkt. Het is waarschijnlijk echter dat je meer intelligent offline gedrag wilt, met verschillende inhoud of functionaliteit die beschikbaar is wanneer de server niet beschikbaar is.

Om dit te bereiken, kunnen we ons uitbreiden halen Evenementreactie Verder om specifiek te controleren op navigatieaanvragen en reageer met een andere offline pagina wanneer men wordt gedetecteerd. Dit index_offline.html Bestand kan een variatie zijn van uw online pagina, of iets heel anders, en kan ook andere middelen gebruiken die u hebt opgeslagen Custom.CSSS

 Self.ADDEVENTLIENTLIENTER ('FETCH', EVENT = & GT; {
  if (event.request.mode === 'navigatie') {
  gebeurtenis. responderwith (
  fetch (event.request) .catch (fout = & gt; {
  console.log ("pagina niet beschikbaar. Terugkerende offline inhoud.");
  retourneer caches.match ('./ index_offline.html');
  
  
  } anders {
  gebeurtenis. responderwith (
  caches.match (event.Request). Den (respons = & gt; {
  Retourrespons || fetch (event.Request);
  
  
  
});

08. Cache verwijderen

Er is nog een ding dat we nodig hebben. Als u nu probeert uw offline-inhoud aan te passen, vindt u dat het niet bijwerkt wanneer u uw pagina test - u krijgt nog steeds de oude versie! Dit komt omdat de oudere bestanden nog in de cache zijn opgeslagen.

U moet iets implementeren om verouderde bestanden van de cache op te lossen om te voorkomen dat ze worden opgegeven. Dit wordt gedaan door te reageren op een activeren Evenement en het verwijderen van alle caches die niet overeenkomen met de naam die is opgegeven in Currentcache. U kunt dan een versienummer toevoegen aan CurrentCache telkens wanneer u uw offline-inhoud aanpast, om ervoor te zorgen dat deze wordt vernieuwd.

 This.ADDEVENTLISTENER ('Activate', gebeurtenis = & gt; {
  Var ActiveCaches = [Currentcache];
  Console.Log ("Service Worker geactiveerd. Cache controleren is up-to-date.");
  event.waituntil (
  caches.Keys (). Dan (KEYLIST = & GT; {
  Return Promise.Alle (KEYLIST.MAP (KEY = & GT; {
  if (activecaches.indexof (sleutel) === -1) {
  console.Log ("Wissen van oude cache" + sleutel);
  retourneer caches.delete (sleutel);
  
  
  
  
});

Dit artikel is gepubliceerd in Web Designer Magazine-nummer # 268. Abonneer nu.

Lees verder:

De gids van een codeer voor API's
Ga aan de slag met WebGL met behulp van Three.js
12 enorme Web Design Trends voor 2018

Bouw apps die offline werken

01. Een HTTPS-server

02. Stel een basispagina in

03. Registreer een servicemedewerker

04. Controleer dat u bent geregistreerd

05. Implementeer werknemer

06. FETCH-evenement

07. Extend Fetch-evenement

08. Cache verwijderen

Procedures - Meest populaire artikelen

Hoe het lettertype in uw Instagram BIO te veranderen

6 Snelle tips om uw penseelpen te verbeteren

Aan de slag met BULMA

Hoe een chatbot-ervaring te ontwerpen

Hoe beeld te maken in Cinema 4D

Voeg visuele aanwijzingen toe aan uw site

10 Gouden regels voor responsieve SVGS

Maak een responsief dashboard met Figma

Categorieën