Progressive Web Apps 101: Hvad, hvorfor og hvordan

Hvad er en progressiv webapp? Hvorfor har vi brug for en? Hvordan kan vi bygge en?

Har du nogensinde set et "Tilføj til startskærm" -banner, som ovenfor, mens du gennemser et websted? Når du klikker på knappen, installeres "applikationen" i baggrunden. Når du åbner denne applikation, der nu sidder i din app-skuffe, kan du gennemse den samme oplevelse, som du lavede i din browser, men nu lige i din mobiltelefon.

Hvad du har nu er en mobilapp, der blev downloadet fra en webapplikation. Alt dette uden at skulle se ansigtet på en appbutik.

At få appen var så let! Men det er ikke engang den bedste del. Når du åbner denne app, vil du kunne gennemse indholdet, selv når du ikke har internet. Du har offline adgang til appen! Hvor sejt er det?

Hvad du er stødt på er en Progressive Web App (PWA). En PWA giver dig mulighed for at installere applikationen fra selve browservinduet, er tilgængelig på din telefon som en native app og fungerer offline ligesom en native app.

Men hvad betyder det virkelig for en webapp at være progressiv? Lad os gå dybere ned i, hvad progressive webapps er, hvorfor jeg synes, de er bedre end native apps, og hvad der adskiller dem fra traditionelle webapps.

Hvad er en Progressive Web App (PWA)?

Udtrykket Progressive Web App blev opfundet af Alex Russell og Frances Berriman. Med Alexs ord:

Progressive Web Apps er bare websteder, der tog alle de rigtige vitaminer.

Det er ikke en ny ramme eller teknologi. Det er et sæt bedste fremgangsmåder til at få en webapplikationsfunktion til at ligne en desktop- eller mobilapplikation. Drømmen er at have en oplevelse, der er så ensartet og problemfri, at brugeren ikke er i stand til at fortælle forskellen mellem en progressiv webapp og en indfødt mobilapp.

Progressive webapplikationer leverer brugeroplevelser gennem progressiv forbedring. Det betyder i det væsentlige, at en PWA vil udføre de samme funktioner på en ny iPhone 8, som den ville gøre på en ældre generation af iPhone. Sikker på, nogle funktioner er muligvis ikke tilgængelige, men appen fortsætter med at arbejde og udføre, som det skulle.

Hvorfor har vi brug for en progressiv webapp?

Før vi forstår, hvorfor vi har brug for en progressiv webapp, lad os tale om nogle af de udfordringer, vi står over for i dag med native apps og webapps.

Internethastighed : du er måske ikke klar over det, afhængigt af hvor du bor, men 60% af verdens befolkning bruger stadig 2G-internet. Selv i USA er nogle mennesker nødt til at bruge opkald for at få adgang til internet.

Langsom websideindlæsning: Ved du, hvor længe en bruger venter på at klikke på knappen "Luk X", hvis et websted er for langsomt? Tre sekunder! 53% af brugerne opgiver et websted, hvis det er for langsomt.

Høj friktion: Folk ønsker ikke at installere native apps. En gennemsnitlig bruger installerer 0 applikationer om en måned.

Brugerengagement: Brugere bruger det meste af deres tid på native apps, men mobilweb rækkevidde er næsten tre gange så høj som for native apps. Derfor er de fleste af brugerne ikke aktivt engageret. Dog bruger brugerne 80% af deres tid på kun deres top tre native apps.

PWA'er hjælper med at løse disse problemer. Der er flere grunde til at bruge en progressiv webapp, men her er nogle af de bedste muligheder, den giver:

  1. F ast: PWA'er giver oplevelser, der er konstant hurtige. Fra det øjeblik en bruger downloader en app til det øjeblik, de begynder at interagere med den, sker alt rigtig hurtigt. Fordi du kan cache dataene, er det ekstremt hurtigt at starte appen igen selv uden at ramme netværket.
  2. Jeg integrerede brugeroplevelse: PWA'er føler og opfører sig som native apps. De sidder på en brugers startskærm, sender push-underretninger som native apps og har adgang til en enheds funktioner som native apps. Oplevelsen føles problemfri og integreret.
  3. R ationelt D riftsikkert oplevelse: Med hjælp fra servicemedarbejdere, kan vi med sikkerhed male et billede på en brugers skærm, selv når netværket er mislykkedes.
  4. E ngaging: Fordi vi kan sende meddelelser til en bruger, kan vi virkelig drive engagement op ved at holde den anmeldte og engageret med den app bruger.

Kort sagt er det BRAND.

Sådan oprettes en progressiv webapp

Google har offentliggjort en tjekliste med varer til Progressive Web-apps. Jeg vil gennemgå fire minimumskrav for en ansøgning om at være en PWA:

1. Webappmanifest

Dette er bare en jsonfil, der giver metainformation om webappen. Det har oplysninger som ikonet for appen (som en bruger ser efter installation af det i deres app-skuffe), baggrundsfarve for appen, appens navn, korte navn osv. Vi kan selv skrive denne manifestfil, eller vi kan bruge værktøjer til at generere en til os.

2. Servicearbejdere

Servicearbejdere er hændelsesdrevne arbejdere, der kører i baggrunden af ​​en applikation og fungerer som en proxy mellem netværket og applikationen. De er i stand til at opfange netværksanmodninger og cache-oplysninger til os i baggrunden. Dette kan bruges til at indlæse data til offline brug. De er et javascriptscript, der lytter til begivenheder som hentning og installation, og de udfører opgaver.

Her er en prøve serviceworker.js

self.addEventListener('fetch', event => { //caching for offline viewing const {request} = event; const url = new URL(request.url); if(url.origin === location.origin) { event.respondWith(cacheData(request)); } else { event.respondWith(networkFirst(request)); } }); async function cacheData(request) 

3. Ikon

Dette bruges til at give et appikon, når en bruger installerer PWA i deres applikationsskuffe. Et jpeg-billede vil bare være fint. Manifestværktøjet, jeg fremhævede ovenfor, hjælper med at generere ikoner til flere formater, og jeg fandt det meget nyttigt.

4. Serveres via HTTPS

For at være en PWA skal webapplikationen serveres over et sikkert netværk. Med tjenester som Cloudfare og LetsEncrypt er det virkelig nemt at få et SSL-certifikat. At være et sikkert websted er ikke kun en god praksis, det etablerer også din webapplikation som et pålideligt websted for brugere, der viser tillid og pålidelighed og undgår mellemmanangreb.

Bemærk: Dette er del 1 af serier med to dele. I den næste del opretter vi en Progressive Web App fra bunden med et skeletindeks.html. Tjek del 2 her.

Lærte du noget nyt? Har du kommentarer? Kender du en DevJoke? Tweet mig @ shrutikapoor08

Hvorfor bliver programmører forvirrede mellem Halloween og jul?

Fordi 31. OKT = 25 DEC. #DevJokes #WorkChat

- Shruti Kapoor (@ shrutikapoor08) 22. juni 2018