Sådan får du din app til at arbejde offline med kraften i JavaScript

I nutidens verden har tilslutningsmuligheder gjort os mere mobile end nogensinde, hvilket (paradoksalt nok) får os til at være offline nogle gange: når vi er i flytilstand, har en dårlig forbindelse, ikke har flere data, er i metroen ... og så videre.

En anden effekt af denne mobilitet er den langsomme indlæsning af tunge websteder: Amazon fandt ud af, at kun 100 millisekunder ekstra indlæsningstid kostede dem 1% af salget.

I disse situationer vil vi gerne have offlineadgang til vores indhold. Derfor findes der værktøjer som Instapaper og Pocket. Spotify og Netflix giver dig også mulighed for at downloade medier til offline brug.

Vi kan let se, at der er en efterspørgsel efter denne funktion, og hvordan den kan gavne din virksomhed.

Det er tid for internettet at gå offline.

Heldigvis behøver vi ikke længere oprette native apps for at nå dette mål. Vi kan oprette et offline-websted med magt JavaScript takket være de nye servicearbejdere og Cache API- funktioner.

Hvad er en servicearbejder (SW)?

Servicearbejdere er JavaScript-kode, der kører i baggrunden på dit websted, selv når siden er lukket. Til offline brug er et af deres mål at gemme netværksanmodninger eller billeder i browserens cache.

Agenturet BETC lavede en demo-webside kaldet whentheinternetisdown.com for det franske teleselskab Bouygues. Det fungerer kun offline og føles lidt magisk. Prøv det :)

Det er cachingen, der gør magien på siden: du kan komme tilbage om 3 uger, 1 måned, 1 år, stadig uden forbindelse og få adgang til alt indholdet. - Maxime Huygue, leder af BETC Digital Studio

Ok dette er sejt, fortæl mig hvordan man gør det så.

Ok, lad os begynde med nogle forudsætninger:

  • For at bruge SW'er skal du aktivere https på dit websted.
  • Du skal have en anstændig forståelse af, hvordan JavaScript-løfter fungerer.
  • SW fungerer i alle moderne browsere undtagen vores ven IE.
  • Selvom det er JavaScript, kører de i sammenhæng med webarbejdere. Hvilket betyder: ingen DOM, og løbe uden for hovedtråden.
  • Forstå, hvordan databaser fungerer.
  • Koden til din servicearbejder skal være i en separat JavaScript-fil. Eksempel: service-worker.js

Servicemedarbejders livscyklus

For at være i stand til at arbejde skal SW'er være registreret i din applikation og derefter installeres. Du bør kontrollere, om SW'er er kompatible med din klient, inden du gør det.

1) Registrering

Hvis det er tilgængeligt, skal du registrere din SW-fil. Det giver et løfte, så du kan håndtere fejl. Du kan også angive et omfang af webadresser i registreringsindstillingerne.

2) Installation

Servicearbejdere er begivenhedsbaserede. Kort fortalt skal du vedhæfte tilbagekald til begivenheder, som du ville gøre med et element.addEventListener. Den første begivenhed, du skal bruge, er installationshændelsen. Dette er et godt tidspunkt at cache alle dine vitale ressourcer som Javascript, CSS, HTML, billeder ... Det er her Cache API slutter sig til festen!

Åbn derefter metoden, eller opret en cache, der er knyttet til et ønsket navn. Det returnerede løfte skal pakkes ind i event.waitUntil (), hvilket vil forsinke installationen af ​​servicearbejderen, indtil løftet er løst. Ellers mislykkes installationshændelsen, og servicearbejderen kasseres.

Vær forsigtig med cache: din brugers opbevaring er dyrebar, så misbrug den ikke. Vær også forsigtig: installationshændelsen kan kun kaldes en gang, og du skal opdatere din SW for at ændre den.

3) Aktivering

Denne er lidt subtil.

Når installationen er afsluttet, er servicearbejderen ikke aktiv endnu: vi er i den installerede tilstand.

I denne tilstand venter den på at tage kontrol over siden. Derefter går den videre til næste fase i livscyklussen, som er aktiveringsfasen.

Aktiveringsfasen er praktisk, når du opdaterer en SW. Det mest almindelige tilfælde er at rydde cachen fra den tidligere installerede SW.

Bemærk, at den opdaterede medarbejder, når den er installeret, venter, indtil den eksisterende medarbejder kontrollerer nul klienter (klienter overlapper hinanden under en opdatering).

self.skipWaiting () forhindrer ventetiden, hvilket betyder, at servicearbejderen aktiveres, så snart den er færdig med installationen. Fordelen ved denne metode er, at du kan modtage hentningshændelser hurtigere.

Det betyder ikke rigtig, når du ringer til skipWaiting (), så længe det er under eller før du venter. Det er ret almindeligt at kalde det i installationshændelsen.

Pis! Lad os tage en pause og opsummere det, vi har set:

  • Servicearbejdere er stykker af JavaScript, der muliggør offlinefunktioner såsom caching.
  • Vi undersøgte SW Lifecycle: registrering, installation, aktivering
  • Vi lærte, hvordan man implementerer sager om almindelig anvendelse, såsom: cache-ressourcer og rydning af cache med Cache API.
  • Vi så, at self.skipWaiting og self.clients.claim giver os mulighed for at aktivere SW'er hurtigere for at fange begivenheder hurtigere.

OK bevæger os lige langs ...

4) Hent

Hentningshændelsen giver os mulighed for at opfange netværksanmodninger og gemme svar eller tilpasse dem.

Den største fordel ved denne krog er at returnere cachelagrede ressourcer i stedet for at foretage et anmodningsopkald. Du bør se på Fetch API til håndtering af dine anmodninger.

Vi kan ikke dække alle de muligheder, som servicearbejdere tilbyder i en artikel. Alligevel opfordrer jeg dig til at undersøge, hvad der er muligt: ​​Custom 404, Background Sync API til offline analyse, ServiceWorker-side skabelon…. fremtiden ser spændende ud!

Indtil videre har vi set, hvad en servicearbejder er, hvordan den fungerer gennem sin livscyklus, og de mest almindelige brugssager ved at lege med Cache og Fetch API. Disse to API'er giver os en helt ny måde at administrere URL-adresserbare ressourcer på i browseren. For at udfylde denne vejledning skal vi se, hvordan vi kan gemme andre typer data, f.eks. En brugers JSON fra din database.

Gem brugerdefinerede data med IndexedDB

En generel retningslinje for datalagring er, at URL-adresserbare ressourcer skal lagres med Cache-grænsefladen, og andre data skal gemmes med IndexedDB. For eksempel skal HTML-, CSS- og JS-filer gemmes i cachen, mens JSON-data skal gemmes i IndexedDB. Bemærk, at dette kun er en retningslinje, ikke en fast regel. (kilde)

Kort sagt, vi ser, hvornår du ikke skal bruge Cache API, men IndexedDB i stedet. Begge er asynkrone og tilgængelige i servicearbejdere, webarbejdere og vinduesgrænsefladen. Den gode nyhed er, at den understøttes godt, selv i nyere versioner af IE.

IndexedDB er en NoSQL-database. IndexedDB-data gemmes som nøgleværdipar i objektbutikker snarere end tabeller. En enkelt database kan indeholde et vilkårligt antal objektbutikker. Hver gang en værdi er gemt i et objektlager, er den knyttet til en nøgle. Det ser sådan ud:

Temmelig klassisk, ikke? Det vigtigste at forstå er begrebet nøglevej. Det fortæller browseren, hvilken nøgle der skal bruges til at udtrække data fra i objektbutikken eller indekset.

I dette eksempel kan vi se, at vores nøglesti er egenskabs-id'et, og det er defineret i linje 10. Så returnerer vi alle elementerne fra databasen. Dette er en meget grundlæggende brugssag, så hvis du vil lære mere om, hvordan IndexedDB fungerer, råder jeg dig til at læse denne fremragende artikel.

Konklusion

At udnytte offline-nettet er fantastisk for brugeroplevelsen, og nogle virksomheder er begyndt at plyndre det. Det er mest afhængig af servicearbejdere, JavaScript-scripts, der kører i baggrunden på dit websted.

Vi har set, hvordan man bruger dem gennem servicearbejdernes livscyklus, og hvad du kan gøre ved hjælp af Cache and Fetch API. Mulighederne er næsten ubegrænsede. så vær kreativ og ikke for grådig på enhedens lager.

Du kan endda bruge databaser offline: at hvad IndexedDB er lavet til. Disse offlinefunktioner er bestemt en del af fremtidens internet, så det spiller godt med den nye type websteder, som Google opretter: Progressive Web Apps.

Yderligere læsning:

  • Offline-kogebogen: //developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
  • PWA og offline: //developers.google.com/web/ilt/pwa/lab-offline-quickstart
  • Lab: Cache-filer med servicearbejder: //developers.google.com/web/ilt/pwa/lab-caching-files-with-service-worker
  • Servicearbejdernes livscyklus: //developers.google.com/web/fundamentals/primers/service-workers/lifecycle
  • Afmystificering af servicearbejdernes livscyklus: //scotch.io/tutorials/demystifying-the-service-worker-lifecycle
  • Aktivér servicearbejdere hurtigere: //davidwalsh.name/service-worker-claim
  • Live data i servicearbejderen: //developers.google.com/web/ilt/pwa/live-data-in-the-service-worker
  • Indekseret DBGrundlæggende begreber: //developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
  • Kom godt i gang med vedvarende offlineopbevaring med IndexedDB: //itnext.io/getting-started-with-persistent-offline-storage-with-indexeddb-1af66727246c