En introduktion till Progressive Web Apps

De flesta utvecklare har åtminstone hört lite buzz runt Progressiva webbapps. Dessa stöds allmänt av tekniska företag som Google och blir snabbt de normen för webbapplikationer med flera enheter.

Men vad är exakt det skillnad mellan en typisk och a progressiv webbapp?

För utvecklare, Det är en hel värld av skillnad. Progressiva webbapplikationer använder moderna webbgränssnitt till skapa inbyggda appupplevelser i webbläsaren. Det innebär att utvecklare kan bygga dynamiska applikationer med snabb laddning utan att använda hybridramar.

I den här guiden täcker jag grunderna i Progressive Web Apps, några primära funktioner och hur du kan börja bygga din egen.

Vad är Progressive Web Apps?

Progressive Web Apps (eller PWAs) dra nytta av webbläsar API: er att skapa inbyggda appupplevelser direkt i webbläsaren på vilken enhet som helst.

I slutändan omfattar Progressive Web Apps en handfull teknik som utvecklare kan använda för att skapa kraftfulla inbyggda applikationer. Många kommer ifrån Web APIs så som Servicearbetare API eller den Push API.

Det finns ett flertal krav att ringa något en PWA men det här är viktigaste:

• Är helt mobil responsiv.
• Adheres till progressiv förbättring.
• Kan installera lokalt på smartphones och surfplattor.
• Kör offline utan internet, med tjänstearbetare.
• Skiljer innehåll från funktionalitet använder app skalet.
• Builts på HTTPS för större säkerhet.
• Synlig i Google-sökning.
• har dynamiska appliknande sidor men var och en fortfarande har sin egen webbadress.

Om du är tänker på att bygga en liten webapp Du kanske försöker skapa en Progressiv webbapp i stället. Detta kommer med lite inlärningskurva men du har så mycket mer kontroll över användarupplevelsen som ett resultat.

Låt oss dyka in i grunderna för Progressive Web Apps och lära oss vad som gör att de tickar.

Servicearbetare

Varje Progressiv Web App behöver servicearbetare. Dessa är som trafik officerare vem samordnar var trafik går, varifrån data kommer ifrån och hur det allt blir organiserat och cachet.

I enkla termer, tjänstemannen fungerar som en JavaScript-fil och körs i bakgrunden av din webbapp. När användaren utför en händelse, det kallar tjänstearbetare skript att antingen dra data, spara data eller båda!

Använda Service Worker API är grundläggande att köra en offline-stödd PWA. Så här gör du sända data mellan vyer och hur du kan begära data från en lokal databas. Men det här är mestadels avancerade saker som du lär dig genom att arbeta på ett PWA-projekt.

Ta en titt på Servicearbetare Kokbok för grundläggande snippets och levande demo. Detta är ett fantastiskt sätt att lära sig genom att studera vad andra har gjort och kloning det i dina egna appar.

Om du hoppas kunna bygga en Progressiv webbapp börja med Service Worker API. Bara tinker med det och skapa en enkel demo lokalt. Detta kommer att ställa grunden för senare bygga anpassade programfunktioner och sidor att alla går igenom tjänstearbetare.

För nybörjare guider och detaljerade kodrapporter, Jag rekommenderar specifikt dessa resurser:

• Komma igång med servicearbetare
• Komma igång med servicearbetare
• Service Worker Sample: Anpassad offline Sample

App-skalet

De flesta inbyggda appar följ en app shell arkitektur där data- och appkoden är helt separat från användargränssnittet. Applikationsskalet kan vara cachade lokalt så varje sida laddar otroligt snabbt.

Detta håller med detsamma “inbyggd app” känner var gränssnittet är alltid synligt men innehåll / funktionalitet laddas annorlunda varje gång. Kolla in den här sidan på Google Developers webbplats för att lära dig lite mer om app skal modell.

De flesta appar har a väldigt enkelt app skal och du ska utforma din arkitektur med enkelhet i åtanke.

Vanligtvis har appskalan dessa huvudelement:

• Översta navigeringsfältet länkar.
• Uppdatera-knapp (tillval).
• Sidbakgrundsbehållare.

Du kan hitta en bra fallstudie här om Googles I / O Progressive Web App-skalarkitektur. De erbjuder också några tips för att bygga din egen skalarkitektur, cache den och dra det automatiskt för varje sida.

Tänk på skalarkitekturen som alla de statiska gränssnittselementen du kommer att använda på varje enskild sida. Dessa borde vara skild från resten av din kod och cachad för enkel återanvändning. Kolla även ut Googles intro till ämnet med gott om kod snippets för att hjälpa dig att komma igång.

Online och offline-support

De flesta inbyggda appar springa bra utan internet. Progressiva webbapplikationer är avsedda att följa samma beteende.

Genom servicearbetare kan du bygga lokala cacher med JSON-kod för varje sida. På så sätt kan användarna Bläddra bland din webapp lokalt. Du kanske också inkludera en manifestfil för att definiera dina ikoner, stänkskärm och andra lanseringsinställningar.

Om du använder API: n Servicearbetare ta en titt på Cache API vilket är del av samma ram. Det är generellt det bästa sättet att lagra data lokalt och få tillgång till det från tjänstearbetare senare.

Du kan också testa någon webapp använder sig av Fyr, ett gratis verktyg för att kontrollera överensstämmelse med funktioner och stöd för PWA-teknik.

PWAs alltid kräver offline support genom Service Worker API, så de kan arbeta i låg-anslutningstillstånd. Fyr är det bästa sättet att testa för offline support tillsammans med en mängd andra funktioner.

Levande exempel

Att studera levande PWAs och se hur de fungerar är ett bra sätt att lära sig. Den Progressive Web App-marknaden är dock fortfarande framväxande, så många av de bästa är utspridda i olika hörn av Internet.

Men tack vare PWA sten galleri, Jag har curated några fantastiska exempel för att visa upp vad PWAs verkligen kan göra.

1. Valutaomvandlare

Detta ganska enkelt valutakonverterare tar växelkurser och beräknar strömmen skillnader mellan ett ton av valutor över hela världen.

Du kommer märka att den här webben är fullt mottaglig, stöder beröring, och automatiska uppdateringar utan någon uppdatering av sidan.

Dessa är bara några av de funktioner du förväntar dig i någon typiska Progressive Web App. Detta app kan också sparas lokalt till din telefon för att arbeta offline, även om det ansluter till en JSON-fil för att kontrollera aktuella växelkurser.

2. engelska accenter

Jag adore bara denna webbapp eftersom den är både unik och otroligt väl utformad. De Engelska Accents Karta kuraterar videor på nätet där människor bär accenter från specifika regioner i USA och Storbritannien.

Genom att klicka någonstans på kartan kan du lyssna på hur människor uttalar vissa ord i olika delar av världen. Appen är blixt snabbt och det är öppet på GitHub för någon att kolla in.

Internens fortsätter Reagera / Redux med Firebase och en API-anslutning till Google Maps. Definitivt ett bra exempel på något ganska enkelt för nybörjare att studera och lära.

3. Pokedex.org

En annan ganska enkel PWA är detta Pokedex app skapad av Nolan Lawson. Han publicerade också denna kod fritt på GitHub, så det är vi ännu ett projekt som är värt att snöa runt och studera.

Eftersom dessa data kan förbli statiska är det hanteras via en lokal motor kallad PouchDB. Alla data kommer från PokeAPI och sparar sedan som vanlig JavaScript. Det betyder att du kan spara den lokalt till din telefon som en riktig inbyggd app och den kommer att köras med eller utan tillgång till Internet. Ganska coolt, rätt?

Hela saken är drivs av JavaScript, så det är ett bevis på hur mycket du kan göra med frontendkoden. Det använder mycket cachning med Service Worker API, så Det är galet snabbt och super lätt att använda.

4. Flipkart

Slutligen och mest överraskande, låt oss se Flipkart webbplats. Detta är fullt e-handelsbutiken är faktiskt en Progressiv Web App.

Dess fullt mottaglig och laddar sidor dynamiskt. Sidadresser läggs till i webbläsaren, så du kan kopiera / klistra in och dela dem som en vanlig webbplats.

Detta är enkelt den mest komplexa PWA jag någonsin har sett. Jag är förvånad över att utvecklarna kunde skapa en så sömlös upplevelse på webben för alla användare, än mindre stödja lokal offline lagring, för.

Och medan jag inte kunde hitta en repo för hela Flipkart-källkoden finns det en Flipkart-sida på GitHub med mindre kodutdrag från deras utvecklingslag.

Lär dig mer

Progressiva webbapplikationer är otroligt populär och kommer säkert att få ånga som fler utvecklare växlar över från inhemska / hybrid-appar.

Det kallas ett årligt toppmöte Progressive Web App Summit och de publicerar videor på YouTube som du kan titta gratis på. Detta är ett bra sätt att hämta lite prokunskap utan att betala för en biljett.

Men om du letar efter mer detaljerad PWA-kodningsguider Kolla definitivt dessa tutorials:

• En nybörjarguide till progressiva webbapps
• Bygg din första progressiva webbapp med React
• Bygga en Progressiv Web App med Polymer