Hvorfor Progressive Web Apps er fremtiden for Webudvikling

”Nøglen er at omfavne forstyrrelser og ændre tidligt. Reager ikke på det årtier senere. Du kan ikke bekæmpe innovation. ” - Ryan Kavanaugh

På det seneste har der været en masse brummer omkring PWA'er, hvor mange hævder, at det er fremtiden for webudvikling, især med hensyn til mobile enheder. I sin kerne er en Progressive Web App (PWA) simpelthen en webapplikation, der bruger moderne webteknikker til at levere en native app-lignende oplevelse til brugerne. Dette er webapplikationer med progressiv forbedring for at implementere funktioner som cache, baggrundssynkronisering og push-underretninger.

Selvom PWA'er har eksisteret i mere end to år nu, er svaret ganske overvældende. Få store spillere har vedtaget denne filosofi, men de fleste har faktisk ikke taget den meget i betragtning. Chrome og Mozilla er måske de bedste browsere til at teste dine PWA'er, da Apple endnu ikke kommer ind i disse ting.

PWA - Er det virkelig godt?

På den ene side har vi native apps, der utvivlsomt er hurtige og effektive i de fleste tilfælde. På den anden side er der websteder, der er lidt langsomme, og med forbindelsesproblemerne bliver det kun værre.

Accelerated Mobile Pages Project (AMP), der blev ført af Twitter og Google, blev lanceret i 2016 for kun at løse disse langsomme forbindelsesproblemer. PWA'er fungerer fejlfrit i alle mulige scenarier. Med en god forbindelse er der aldrig noget problem. Problemet er, når vi ikke har nogen forbindelse, og vi bliver mødt med fejlsiden.

Men dette kan blive mest irriterende, hvis vi har en langsom forbindelse. Siden ser ud til at indlæses, og alt hvad vi ser er en tom skærm. Vi venter bare, venter og venter, men siden ser aldrig ud til at indlæses. Det er her, PWA kommer os til undsætning. Den bedste del om PWA'er - du får den bedst mulige brugeroplevelse i langsom forbindelse såvel som ingen tilslutningsmuligheder (ja, du læser det rigtigt ..).

Hvorfor det giver mening at bruge PWA

Ifølge en undersøgelse bruger en gennemsnitlig bruger 80% af sin samlede tid på apps på kun tre af sine apps (for mig er det Chrome, Quora og Medium).

De andre apps sidder bare inaktive i det meste af denne tid og bruger en dyrebar del af hukommelsen. Desuden koster det omkring ti gange at udvikle en app i stedet for at oprette et websted til det samme. Omkostningerne kan blive meget højere, hvis du planlægger at udvikle og vedligeholde separate kodebaser til forskellige platforme som Android, iOS og internettet.

Native App-funktioner, som PWA'er kan bruge

  • Push-meddelelser
  • Fuld skærm
  • Offline arbejder
  • Splash-skærm understøttes, hvilket giver det en mere app som følelse

PWA'er kan gøre brug af mange flere sådanne funktioner. Ovenstående punkter er kun for at give dig et tip om, hvad PWA'er er i stand til. Der er dog nogle traditionelle funktioner, som kun native apps nyder lige nu.

Native App-funktioner, som PWA'er ikke kan bruge lige nu

  • Ingen eller meget begrænsende adgang til forskellige hardwaresensorer
  • Alarmer
  • Telefonbogadgang
  • Ændrer systemindstillinger

PWA'er udvikler sig ret hurtigt, og vi kan håbe at se disse funktioner komme til handling temmelig snart.

To hovedkomponenter i en PWA

Appmanifest

Det er en JSON-fil, der definerer et appikon, hvordan man starter appen (standalone, fuldskærm, i browseren osv.) Og enhver sådan relateret information. Det er placeret i roden til din app. Der kræves et link til denne fil på hver side, der skal gengives.

Det tilføjes i hovedafsnittet på HTML-siden:

Service Worker

Service worker is where most of the magic of happens. Its nothing but JavaScript code that acts as programmable proxies solely responsible for intercepting and responding to network requests. Since it acts as a proxy and can be easily programmable, the application must be served over HTTPS to keep the data secure.

Its worth noting that the service worker caches the actual response, including all HTTP headers, rather than just the response data. This means that your application can simply make network requests and process the response without any specific code to handle the cache.

How do I get started?

The best thing about getting started is that it’s quite easier than it seems. In fact, it’s very much possible to take an existing site and convert into a PWA. I highly suggest you watch this if you intend to develop a PWA.

Thanks for reading! If you liked it, please support by clapping and sharing the post.