Laat uw app offline werken met servicemedewerkers

Servicewerkers kunnen worden gebruikt om de laadtijden en offline-ondersteuning voor uw sites en web-apps te verbeteren. In deze tutorial gaan we je laten zien hoe je een webapp met een servicemedewerker kunt verbeteren. Eerst behandelen we wat een servicemedewerker is en hoe zijn levenscyclus werkt, dan laten we u zien hoe u vervolgens kunt gebruiken om uw site (deze pagina) te versnellen en offline inhoud aan te bieden (pagina 2).

Dan zullen we je laten zien hoe Hoe een app te bouwen met servicemedewerkers. U leert hoe u een bare-botten werknemer opzet die statische activa zal cachen en bedienen (een enorme prestatieboost leveren op volgende ladingen), dan hoeft u dynamische API-reacties te cachen en onze demo-app volledige offline-ondersteuning te geven. Laten we eerst kijken naar wat precies servicewerkers zijn en hoe ze functioneren.

Een website bouwen? Stroomlijn uw proces met een groot website bouwer , en onderhoud het met een fatsoenlijk web hosting onderhoud. En krijg je opslag gesorteerd met deze cloud opslag opties.

Wat is een servicemedewerker?

Dus wat is een servicemedewerker? Het is een script, geschreven in JavaScript, dat uw browser op de achtergrond loopt. Het heeft geen invloed op de hoofddraad (waarbij Javascript meestal op een webpagina werkt), en zal niet conflicteren met uw app-code of de runtime-prestaties beïnvloeden.

Een servicewerel heeft geen directe toegang tot de DOM of evenementen en gebruikersinteractie die plaatsvindt op de webpagina zelf. Denk eraan als een laag die tussen de webpagina en het netwerk zit, waardoor het netwerkverzoeken (bijvoorbeeld AJAX-aanvragen) door uw pagina kan worden onderschept en manipuleert. Dit maakt het ideaal voor het beheren van caches en het ondersteunen van offline gebruik.

De levenscyclus van de servicewerker

Het leven van een servicemedewerker volgt een eenvoudige stroom, maar het kan een beetje verwarrend zijn als u gewend bent aan JS-scripts die gewoon onmiddellijk werken:

Installeren & gt; Wachten (geïnstalleerd) & GT; Activeren & GT; Geactiveerd & GT; Overtollig

Wanneer uw pagina eerst wordt geladen, de registratiecode die we hebben toegevoegd index.html Start de installatie van de servicemedewerker. Wanneer er geen bestaande werknemer is, wordt de nieuwe servicemedewerker onmiddellijk na de installatie geactiveerd. Een webpagina kan slechts één servicemedewerker tegelijkertijd hebben.

Als een werknemer al is geïnstalleerd, wordt de nieuwe servicemedewerker geïnstalleerd en vervolgens bij de wachtstap zitten totdat de pagina volledig is gesloten en vervolgens opnieuw geladen. Eenvoudig verfrissend is niet genoeg omdat je misschien andere tabbladen open hebt. U moet ervoor zorgen dat alle gevallen van de pagina worden gesloten, anders wordt de nieuwe werknemer niet geactiveerd. U hoeft de tabbladen niet te sluiten, u kunt gewoon navigeren naar een andere site en terugkeren.

Beide installeren en activeren Evenementen zullen slechts één keer per werknemer optreden. Eenmaal geactiveerd, heeft de servicewerger dan de controle over de pagina en kan ze beginnen met afhandelen van evenementen zoals ophalen om aanvragen te manipuleren.

Eindelijk zal een servicemedewerker overbodig worden als de browser detecteert dat het werknemersbestand zelf is bijgewerkt of als de installatie of activering faalt. De browser zal op zoek gaan naar een byte-verschil om te bepalen of een werkwoordscript is bijgewerkt.

Het is belangrijk op te merken dat u de naam van uw servicewerel nooit moet wijzigen (of REV). Noch moet u het werknemersbestand zelf op de server cachen, omdat u het niet gemakkelijk kunt bijwerken, hoewel browsers nu slim genoeg zijn om cachingkoppen te negeren.

01. Klon de demo-app

Oké, laten we beginnen met leren hoe je een web-app kunt bouwen met behulp van servicemedewerkers. Voor deze tutorial, ga je recente versies van Node.js en NPM op je computer nodig.

We hebben een demo-app geslagen die we zullen gebruiken als basis voor deze tutorial ( klonen de demo-app hier ​De app is een leuk klein project dat de vijfdaagse weersvoorspelling opkomt op basis van de locatie van de gebruiker. Het zal dan controleren of er vóór het einde van de dag regen wordt voorspeld en de UI dienovereenkomstig bijwerkt.

Het is inefficiënt (opzettelijk) gebouwd met behulp van grote, onnodige bibliotheken zoals jQuery en bootstrap, met grote niet-geopende beelden om het verschil in prestaties te demonstreren bij het gebruik van een servicemedewerker. Het weegt momenteel in een belachelijke 4,1 MB.

02. Koop je API-sleutel

Om de weergegevens van de API te halen, moet u een gratis API-sleutel van OpenWeerMap ​

Zodra je je sleutel hebt, open dan index.html en zoek naar de venster.api_key variabele in de & LT; HOOFD & GT; ​Plak uw sleutel in de waarde:

    window.API_KEY = 'paste-your-key-here';

03. Start de ontwikkelingsserver

Nu zijn we klaar om aan het project te werken. Laten we eerst de afhankelijkheden installeren door te draaien:

    npm install

Er zijn twee taken voor de build-tool. Rennen NPM Start Om de ontwikkelingsserver op poort 3000 te starten. Run NPM RUN BOUW om de 'productie'-versie voor te bereiden. Houd er rekening mee dat dit slechts een demo is, dus is niet echt een productieversie - er is geen minicatie of zoiets - de bestanden krijgen gewoon 'Rebved'.

Een algoritme wordt gebruikt om een ​​hash te maken, zoals 9C616053E5, uit de inhoud van het bestand. Het algoritme zal altijd dezelfde hash voor dezelfde inhoud uitvoeren, wat betekent dat zolang u het bestand niet aanwijst, de hasj niet zal veranderen. De hasj wordt vervolgens toegevoegd aan de bestandsnaam, dus bijvoorbeeld stijlen. CSS kan stijlen worden-9C616053E5.CSS. De HASH vertegenwoordigt de revisie van het bestand - vandaar 'ebved'.

U kunt elke herziening van het bestand op uw server veilig cachen zonder uw cache ooit ongeldig te halen, die duur is of zorgen over een andere cache van derden die de onjuiste versie bedienen.

04. Introduceer uw servicemedewerker

Laten we nu aan de slag met onze servicemedewerker. Maak een bestand met de naam SW.JS in de root van de SRC Directory. Voeg vervolgens deze twee evenementenluisteraars toe om de installeren en activeren Evenementen:

 Self.AddevenListener ('Install' ', (gebeurtenis) = & gt; {
      console.log (gebeurtenis);
    ​

    Self.AddevenListener ('Activate', (gebeurtenis) = & GT; {
      console.log (gebeurtenis);
    }); 

De zelf Variabele hier vertegenwoordigt de wereldwijde reikwijdte van de servicemedewerker. Het is een beetje op de venster object op een webpagina.

Vervolgens moeten we ons index.html-bestand updaten en de opdrachten toevoegen om de servicemedewerker te installeren. Voeg dit script toe vlak voor de sluiting & LT; / BODY & GT; label. Het zal onze werknemer registreren en de huidige status inloggen.

 & lt; script & gt;
     if ('serviceworker' in navigator) {
       navigator.serviceworker.register ('/ sw.js')
         .THEN (functie (REG) {
           if (reg.installing) {
             console.log ('SW-installatie');
           } anders als (reg.waiting) {
             console.log ('SW WACHT');
           } else if (reg.active) {
             console.log ('SW geactiveerd');
           ​
         }). Catch (functie (fout) {
           // registratie mislukt
           console.log ('Registratie mislukt met' + fout);
         ​
     ​
   & LT; / Script & GT; 

Start uw ontwikkelingsserver door te draaien NPM Start en open de pagina in een moderne browser. We raden aan om Google Chrome te gebruiken, want het heeft een goede ondersteuning voor service-werknemers in zijn Devtools, waarnaar we we verwijzen in deze tutorial. Je zou drie dingen in je console moeten zien; twee van de servicemedewerker voor de installeren en activeren Evenementen en de andere zijn het bericht van de registratie.

05. Activeer de werknemer

We gaan onze werker vertellen om de wachtstap over te slaan en nu te activeren. Open het SW.JS-bestand en voeg deze regel overal in de installeren Evenement Luisteraar:

 Zelf.Skipwaiting (); 

Nu, wanneer we het werknemerscript bijwerken, neemt deze onmiddellijk na de installatie de controle over de pagina. Het is de moeite waard om in gedachten te houden dat dit kan betekenen dat de nieuwe werknemer de controle heeft over een pagina die mogelijk is geladen door een vorige versie van uw werknemer - als dat problemen zal veroorzaken, gebruik deze optie niet in uw app.

U kunt dit bevestigen door het navigeren van de pagina en vervolgens terug te keren. Je zou het moeten zien installeren en activeren evenementen vuur opnieuw wanneer de nieuwe werknemer is geïnstalleerd.

Chrome Devtools heeft een nuttige optie die betekent dat u uw werknemer alleen kunt bijwerken door opnieuw te laden. Open Devtools en ga naar het tabblad Applicatie en kies vervolgens de servicewerel uit de linkerkolom. Aan de bovenkant van het paneel is een vinkje met het label update op herladen, vink het aan. Uw bijgewerkte werker wordt nu geïnstalleerd en geactiveerd bij Vernieuwen.

06. Bevestig wijzigingen

Laten we dit bevestigen door toe te voegen console.log ('foo') Bel in een van de gebeurtenisluisteraars en verfrissende de pagina. Dit betrapt ons omdat we verwachtten het log in de console te zien toen we opgefrist, maar alles wat we zagen was het 'SW-geactiveerde' bericht. Het blijkt dat Chrome de pagina twee keer vernieuwt wanneer de update op de optie Opnieuw laden is aangevinkt.

U kunt dit bevestigen door het selectievakje Preserve LOD in het paneel Console-instellingen te tikken en opnieuw te verfrissen. U moet de installatie zien en evenementen worden geactiveerd, samen met 'FOO', gevolgd door 'Navigated to http: // localhost: 3000 /' om aan te geven dat de pagina opnieuw is geladen en vervolgens vervolgens definitief 'SW Activated' -bericht.

07. Volg het fetch-evenement

Tijd om een ​​andere luisteraar toe te voegen. Deze keer zullen we de halen Evenement dat wordt ontslagen telkens wanneer de pagina een resource laadt, zoals een CSS-bestand, beeld of zelfs API-reactie. We openen een cache, retourneren de reactie van het verzoek op de pagina en vervolgens - op de achtergrond - cache het antwoord. Laten we eerst de luisteraar en vernieuwen toevoegen, zodat u kunt zien wat er gebeurt. In de console moet je veel zien Fetchevent logs.

 Self.AddevenListener ('FETCH', (EVENT) = & GT; {
 console.log (gebeurtenis);
}); 

Onze serveermodus maakt gebruik van browsersync, die zijn eigen script aan de pagina toevoegt en maakt WebSocket-aanvragen. Je zult ook de fetchevents hiervoor zien, maar we willen deze negeren. We willen ook alleen cache krijgen van verzoeken van ons eigen domein. Laten we dus een paar dingen toevoegen om ongewenste verzoeken te negeren, inclusief het expliciet negeren van de ​ Indexpad:

 Self.AddevenListener ('FETCH', (EVENT) = & GT; {
 // negeer crossdomain-aanvragen
 if (! event.request.url.startswith (self.location.origin)) {
   terugkeer;
 ​
 // negeer niet-ontvangverzoeken
 if (event.request.method! == 'Get') {
   terugkeer;
 ​
 // negeer browser-synchronisatie
 if (gebeurtenis.request.url.indexof ('browser-synchronisatie') & GT; -1) {
   terugkeer;
 ​
 // Voorkom indexroute in de cache
 if (gebeurtenis.request.url === (self.location.origin + '/')) {
   terugkeer;
 ​
 // voorkomen index.html in de cache
 if (event.request.url.endswith ('index.html')) {
   terugkeer;
 ​
 console.log (gebeurtenis);
}); 

Nu moeten de logboeken veel schoner zijn en het is veilig om te beginnen met caching.

08. Cache de activa

Nu kunnen we beginnen met het cieren van deze reacties. Eerst moeten we onze cache een naam geven. Laten we ons bellen v1-activa ​Voeg deze regel toe aan de bovenkant van het SW.JS-bestand:

 const assetscachename = 'v1-activa'; 

Dan moeten we de fetchevents kapen, zodat we kunnen bepalen wat wordt teruggestuurd naar de pagina. We kunnen dat doen met behulp van de gebeurtenissen antwoorden met methode. Deze methode accepteert een belofte, zodat we deze code kunnen toevoegen, de console.log ​

 // Vertel de ophalen om te reageren met deze belofingsketen
 gebeurtenis. responderwith (
   // Open de cache
   caches.open (assetscachename)
     .Ten ((cache) = & gt; {
       // Maak het verzoek aan het netwerk
       Return Fetch (Event.Request)
         .Ten ((respons) = & gt; {
           // cache het antwoord
           cache.put (gebeurtenis.Request, respons.clone ());
           // Retourneer het originele antwoord op de pagina
           Retourrespons;
         ​
     ​
 ); 

Hierdoor wordt het verzoek ingediend bij het netwerk en bewaar het antwoord in de cache voordat u het oorspronkelijke antwoord terugstuurt naar de pagina.

Het is hier vermelden dat deze aanpak de antwoorden niet daadwerkelijk cache tot de tweede keer dat de gebruiker de pagina laadt. De eerste keer zal de werknemer installeren en activeren, maar tegen de tijd dat de halen Luisteraar is klaar, alles is al gevraagd.

Vernieuw een paar keer en controleer de cache in de Devtools & GT; TOEPASSING TAB. Vouw de cache-opslagboom in de linkerkolom uit en u moet uw cache met alle opgeslagen reacties zien.

09. Serveer van de cache

Alles is in de cache, maar we gebruiken de cache eigenlijk niet om eventuele bestanden te dienen. Laten we dat nu ophangen. Eerst zoeken we een wedstrijd voor het verzoek in de cache en als het bestaat, zullen we dat dienen. Als het niet bestaat, gebruiken we het netwerk en cache vervolgens het antwoord.

// Vertel de fetch om te reageren met deze ketting
 gebeurtenis. responderwith (
   // Open de cache
   caches.open (assetscachename)
     .Ten ((cache) = & gt; {
       // Zoek naar matching-aanvraag in de cache
       Return Cache.Match (Event.Request)
         . dan ((gematcht) = & gt; {
           // Als een overeenkomst wordt gevonden, retourneert u eerst de cached-versie
           if (matched) {
             terugkomen;
           ​
           // doorgaan anders naar het netwerk
           Return Fetch (Event.Request)
             .Ten ((respons) = & gt; {
               // cache het antwoord
               cache.put (gebeurtenis.Request, respons.clone ());
               // Retourneer het originele antwoord op de pagina
               Retourrespons;
             ​
         ​
     ​
); 

Sla het bestand op en vernieuw. Controleer Devtools & GT; Netwerktabblad en u zou moeten zien (van Serviceworker) vermeld in de kolom Size voor elk van de statische activa.

Phew, we zijn klaar. Voor zo'n kleine hoeveelheid code is er veel te begrijpen. Je zou moeten zien dat het verfrissend de pagina zodra alle activa in de cache zijn, behoorlijk pittig, maar laten we een snelle (onwetenschappelijke) controle van laadtijden doen op een gesmoltende verbinding (Devtools & GT; Network Tab).

Zonder de dienstverlener duurt het laden over een gesimuleerd snel 3G-netwerk bijna 30 seconden voor alles om te laden. Met de servicemedewerker, met dezelfde gesmoltende verbinding maar het laden van de cache, duurt het net onder een seconde.

Controleer de offline box en vernieuw en u zult ook zien dat de pagina laadt zonder een verbinding, hoewel we de voorspellingsgegevens van de API niet kunnen krijgen. Op pagina 2 zullen we hiernaar terugkeren en leren hoe u de API-reactie kunt cachen.

VOLGENDE PAGINA: Gebruik servicemedewerker om online toegang te bieden

• 1
• 2

Huidige pagina: Pagina 1: Sneller laden