En introduktion til Progressive Web Apps

De fleste udviklere har i det mindste hørt nogle buzz rundt Progressive Web Apps. Disse er bredt understøttet af tech virksomheder som Google og bliver hurtigt den norm for multi-enhed webapplikationer.

Men hvad er nøjagtigt det forskel mellem en typisk og a progressiv webapp?

Til udviklere, det er en hel verden af forskel. Progressive Web Apps bruger moderne web-API'er til oprette native app oplevelser i browseren. Dette betyder, at udviklere kan opbygge dynamiske apps med hurtig indlæsning uden brug af hybridrammer.

I denne vejledning dækker jeg Grundlæggende om Progressive Web Apps, nogle primære funktioner, og hvordan du kan komme i gang med at bygge din egen.

Hvad er Progressive Web Apps?

Progressive Web Apps (eller PWA'er) drage fordel af webbrowser-API'er at oprette indbyggede app oplevelser lige i browseren på en hvilken som helst enhed.

I sidste ende omfatter Progressive Web Apps en håndfuld teknologi som udviklere kan bruge til at oprette kraftige native-lignende applikationer. Mange kommer fra Web API'er som f.eks Servicearbejder API eller den Skub API.

Der er ganske få krav at kalde noget en PWA, men disse er de de vigtigste:

Er fuldt ud mobil lydhør.
Overholder progressiv forbedring.
I stand til installere lokalt på smartphones og tabletter.
Kører offline uden internet, ved hjælp af servicearbejdere.
Afskiller indhold fra funktionalitet bruger app shell.
Builts på HTTPS for større sikkerhed.
Synlig i Google-søgning.
har dynamiske app-lignende sider men hver stadig har sin egen webadresse.

Hvis du er tænker på at opbygge en lille webapp Du kan måske prøve at oprette en Progressiv Web App i stedet. Dette kommer med en smule læringskurve, men du har så meget mere kontrol over brugeroplevelsen som resultat.

Lad os dykke ind i grundlaget for Progressive Web Apps og lære, hvad der får dem til at krysse.

Servicearbejdere

Hver eneste Progressive Web App har brug for servicearbejdere. Disse er lignende trafikansatte hvem koordinerer, hvor trafikken går, hvor data kommer fra, og hvordan det alt bliver organiseret og cachelagret.

Enkelt sagt, servicearbejderen fungerer som en JavaScript-fil og kører i baggrunden for din webapp. Når brugeren udfører en begivenhed, det kalder det servicearbejder script at enten trække data, gemme data eller begge dele!

Bruger Servicearbejder API er vigtig at køre en offline-understøttet PWA. Sådan gør du overføre data mellem visninger og hvordan du kan anmode om data fra en lokal database. Men dette er for det meste avancerede ting, som du lærer ved at arbejde på et PWA-projekt.

Tag et kig på Service Workers Cookbook til grundlæggende uddrag og levende demoer. Dette er en fantastisk måde at lære ved at studere hvad andre har gjort og kloning det i dine egne apps.

Hvis du håber at bygge en Progressiv Web App Start med API for Service Worker. Bare tinker med det og opret en simpel demo lokalt. Dette vil sætte grunden til senere opbygge brugerdefinerede applikationsfunktioner og sider at alle løber gennem servicearbejdere.

Til nybegyndere guider og detaljerede kodestykker, Jeg anbefaler specifikt disse ressourcer:

Kom i gang med servicearbejdere
Kom i gang med servicearbejdere
Service Worker Sample: Brugerdefineret Offline Page Sample

App shell

De fleste indbyggede apps følg en app shell arkitektur hvor data- og app-koden er helt adskilt fra brugergrænsefladen. Ansøgningsskallen kan være cached lokalt så hver side laster utrolig hurtigt.

Dette holder med det samme “native app” følelse hvor interface forbliver altid synlig men indhold / funktionalitet belastes forskelligt hver gang. Tjek denne side på Google Developers websted for at lære lidt mere om app shell model.

De fleste apps har a meget simpel app shell og du skal designe din arkitektur med enkelhed i tankerne.

App-shell'en har typisk disse hovedelementer:

De øverste navigeringslinks links.
Opdater knap (valgfrit).
Side baggrundsbeholder.

Du kan finde en god casestudie her om Googles I / O Progressive Web App shell arkitektur. De tilbyder også nogle tips til at bygge din egen shell arkitektur, cache det og trækker det automatisk for hver side.

Tænk på shell arkitekturen som alle de statiske brugergrænseelementer du vil bruge på hver enkelt side. Disse bør være adskilt fra resten af din kode og cachet for nem genbrug. Også tjek Googles intro til emnet med masser af kode uddrag til at hjælpe dig med at komme i gang.

Online og offline support

De fleste indbyggede apps løbe fint uden internet. Progressive webapplikationer er ment at følge denne samme adfærd.

Gennem servicearbejdere kan du bygg lokale caches med JSON kode for hver side. På denne måde kan brugerne Gennemse din webapp lokalt. Du kan også inkludere en manifest fil at definere dine ikoner, stænkskærm og andre startindstillinger.

Hvis du bruger Service Worker API, skal du kigge på Cache API som er en del af samme ramme. Det er generelt den bedste måde at gem data lokalt og få adgang til det fra servicearbejdere senere.

Du kan også test enhver webapp ved brug af Fyrtårn, et gratis værktøj til kontrol af funktionens overensstemmelse og støtte til PWA-teknologier.

PWA'er altid kræver offline support gennem Service Worker API, så de kan arbejde i lav-tilslutningsmuligheder stater. Fyr er den bedste måde at teste for offline support sammen med en lang række andre funktioner.

Live eksempler

At studere levende PWA'er og se, hvordan de virker, er en god måde at lære. Det Progressive Web App-marked er dog stadig fremvoksende, så mange af de bedste er spredt i forskellige hjørner af internettet.

Men takket være PWA sten galleri, Jeg har kureret nogle få fantastiske eksempler for at vise, hvad PWA'er virkelig kan gøre.

1. Valutaomregner

Det er ret simpelt valutaomregner tager valutakurser og beregner strømmen forskelle mellem et ton af valutaer over hele verden.

Du vil bemærke, at denne webapp er fuldt lydhør, understøtter touch, og automatiske opdateringer uden nogen sideopdatering.

Disse er blot nogle af de funktioner, du forventer i nogen typisk Progressiv Web App. Dette App kan også gemmes lokalt til din telefon for at arbejde offline, selvom det forbinder til en JSON-fil for at kontrollere aktuelle valutakurser.

2. Engelsk accenter

Jeg elsker simpelthen denne webapp, fordi den er både unik og utrolig veldesignet. Det Engelsk Accents Map kuraterer videoer online hvor folk bærer accenter fra bestemte regioner i USA og UK.

Ved at klikke overalt på kortet kan du lytte til, hvordan folk udtaler bestemte ord i forskellige dele af verden. Appen er lyn hurtig og det er åbnet på GitHub for nogen at tjekke ud.

Internerne fortsætter React / Redux med Firebase og en API-forbindelse til Google Maps. Absolut et godt eksempel på noget ret nemt for begyndere at studere og lære.

3. Pokedex.org

En anden ret simpel PWA er dette Pokedex app lavet af Nolan Lawson. Han offentliggjorde også denne kode frit på GitHub, så det er os endnu et projekt, der er værd at snooping rundt og studere.

Da disse data kan forblive statiske, er det håndteres gennem en lokal motor hedder PouchDB. Alle data kommer fra PokeAPI og gemmer derefter som almindeligt JavaScript. Det betyder at du kan gem det lokalt til din telefon som en ægte indfødt app, og den vil køre med eller uden internetadgang. Godt, rigtigt?

Det hele er drevet af JavaScript, så det er et testamente for, hvor meget du kan gøre med frontend-kode. Det bruger en masse caching med Service Worker API, så Det er skørt hurtigt og super nemt at bruge.

4. Flipkart

Endelig og mest overraskende, lad os se Flipkart website. Denne fulde e-handelsbutik er faktisk en Progressiv Web App.

Det er fuldt lydhør og læser sider dynamisk. Sidens webadresser vedhæftes til browseren, så du kan kopiere / indsætte og dele dem som en typisk hjemmeside.

Dette er let den mest komplekse PWA jeg nogensinde har set. Jeg er overrasket, at udviklerne kunne skabe en så sømløs oplevelse på internettet for alle brugere, endsige understøtter lokal offline lagring, også.

Og mens jeg ikke kunne finde en repo for hele Flipkart kildekoden, er der en Flipkart side på GitHub med mindre kodestykker fra deres udvikler team.

At lære mere

Progressive Web Apps er utrolig populær og vil helt sikkert få damp som flere udviklere skifter over fra native / hybrid apps.

Der er et årligt topmøde kaldet Progressive Web App Summit og de offentliggør videoer på YouTube, du kan se gratis. Dette er en fantastisk måde at hente nogle pro viden uden at betale for en billet.

Men hvis du leder efter mere detaljeret PWA kodende guider helt sikkert tjek disse tutorials:

En Begynder's Guide til Progressive Web Apps
Bygg din første progressive webapp med React
Opbygning af en Progressiv Web App med Polymer