Progressive web-apper: Status 2024

Progressive webapper (PWAs) er en relativt ny type applikasjon som bruker moderne webteknologi for å bringe tradisjonelle app-lignende opplevelser til brukere. PWA-er lar brukere interagere med nettsteder på lignende måte som de kan interagere med apper, slik at nettsteder føles mer som mobilapplikasjoner.

Med PWA-er kan nettsteder tilby mange av de samme funksjonene som mobilapper, som push-varsler, offline tilgang og enhetsmaskinvareintegrasjon. Etter hvert som flere selskaper beveger seg mot å utvikle PWA-er, blir det stadig viktigere å forstå den nåværende tilstanden til denne teknologien.

Studier viser at markedet for progressive webapplikasjoner forventes å nå en verdi på 10,77 milliarder dollar innen 2027, noe som representerer en imponerende årlig vekstrate på mer enn 30 %. Og ifølge Google har stasjonære installasjoner av PWA-er økt med 270 % siden starten av 2021. 

Men hva er statusen til teknologien? La oss ta en essensiell titt.

PWA Summit-høydepunkter

Google, Intel, Microsoft og Samsung arrangerte nylig deres andre PWA Summit. Høydepunkter inkluderer:

Hvor godt kjenner du PWA?

For å begynne å bygge PWA-er er det viktig å forstå hva de er og hva de ikke er. De er webapplikasjoner laget med HTML, CSS og JavaScript – den uunnværlige trioen – men kan få et mobilt utseende og følelse gjennom moderne API-er.

Ikke alle nettlesere støtter alle webfunksjoner for PWA-installasjon på stasjonære enheter, men slik teknologi har allerede blitt brukt av merkevarer som Pinterest, som har kombinert apper med PWA-er for å øke brukerbevaringen på grunn av deres uovertrufne rekkevidde.

Fra startapp til butikkpakke med PWABuilder⁠

Med den økende populariteten til PWA-er har markedet for mobilapputvikling sett en tilstrømning av nye teknologier og verktøy, inkludert det Microsoft-sponsede, åpne PWABuilder-verktøysettet. Dette gir alt du trenger for å lage kraftige PWA-er fra bunnen av eller legge til PWA-funksjonalitet til et eksisterende prosjekt.

Med PWA Starter-kodemalen som har en rask stack og Workbox, pluss PWABuilder Studios Visual Studio Code-utvidelse med manifestadministrasjon og PWA-validering, er din PWA klar til å bli pakket på PWABuilder.com.

I tillegg betyr dens åpen kildekodenatur at det alltid er noen i PWABuilder-fellesskapet tilgjengelig på Discord og bidrar til prosjekter på GitHub.

Utfordringer med å lagre store mengder data på klientsiden⁠

Å jobbe med IndexedDB kan være vanskelig på grunn av dens manglende evne til å kjøre avanserte spørringer som joins og aggregeringer. Imidlertid har webutviklerfellesskapet funnet løsninger som absurd-sql og wa-sqlite for å kjøre SQL-spørringer på toppen av lokale data lagret i IndexedDB.

I tillegg er utilsiktet datatap en trussel som må tas i betraktning; Origin Private File System API kan gi høy ytelse tilgang, men nettleserstøtte kan være et problem.

Se også: Hvorfor vi bygger vår nye nettside med Next.js og headless CMS »

Webapper for alle, overalt: PWA-er til unnsetning for folk i områder med lav internettdekning

Offline-støtte er nøkkelen når det kommer til tilgjengelighet, og et team trengte å lage en app for bønder i områder med lav tilkobling. For å muliggjøre offline CRUD-handlinger ble Background Sync API og IndexedDB essensielle komponenter.

For eksempel, hvis en bonde prøvde å opprette en diagnoseundersøkelse mens han ikke var tilkoblet nettet, ville IndexedDB lagre denne forespørselen som et JSON-objekt; deretter, når de er tilbake online, vil Background Sync oppdage tilkoblingen og synkronisere med serveren.

YouTubes PWA-reise⁠

Da YouTube forsto at brukerne deres ønsket forbedrede offline-funksjoner, bestemte de seg for å gjøre webappen installerbar. For å takle problemet med at flere faner snakker med nedlastingsserveren samtidig, ble ledervalg implementert på klienten via Web Locks API.

Videre oppgraderinger til Cobalt inkluderte støtte for servicearbeidere for redusert latenstid, optimaliseringer for Core Web Vitals, og progressiv degradering til videoplayback som resulterte i firedoblede målinger.

Bygging av Flipkart Ads PWA – Reisen⁠

Med økende mobilbruk, erkjente Flipkart behovet for å lage en PWA-versjon av deres stasjonære app Flipkart Ads. Nettverksmotstandskraft var en topp prioritet, som de oppnådde gjennom en endret versjon av stale-while-revalidate-strategien som brukte hurtigbufrede data.

For å sikre en sømløs brukeropplevelse, brukte de rik app-installasjon via manifest, slik at de kunne tilpasse installasjonsforespørselen skreddersydd til lokale heuristikker – etter å ha opprettet en annonsekampanje, kan en kampanjeleder bli spurt om de ønsker å laste ned PWA-en.

Moderne PWA: En vinnende kombinasjon for den beste kundeopplevelsen

Intel-teamet jobber kontinuerlig med utviklere for å sikre at både nødvendig programvare og maskinvare er på plass for å lage kraftige PWA-er. Et eksempel på deres fremgang er WebGPU, som er 3,7 ganger raskere enn WebGL, samt Compute Pressure API som overvåker bruken av en klientenhet.

I tillegg bruker Intels nye brikkesett hybridarkitektur, med to typer kjerner – Performance-cores og Efficient-cores – som lar PWAs redusere strømforbruket uten å påvirke ytelsen.

Utvidelse av utviklerkontroll over PWA-installasjon

Etter hvert som PWA-er har blitt mer oppslukende over tid, forblir installasjonsmuligheter en nøkkelfunksjon. I den forbindelse utforsker Chrome-teamet måter for å gi utviklere mer kontroll over installasjonsprosessen.

Ved å støtte standard offline opplevelser og eliminere nødvendigheten av servicearbeidere for å møte installasjonskriterier, kan utviklere stole på sin kunnskap om deres PWA og brukere for å skape en enkel onboarding-opplevelse som igjen vil bygge sterkere relasjoner med brukerne.

Image element has no data-image-ref attibute!

Microsoft i front

Selv om PWA opprinnelig ble ledet av Google, har Microsoft overtatt stafettpinnen for PWA-utvikling.

For å ytterligere oppmuntre utviklere til å lage PWA-er, har Microsoft lansert en serie verktøy under navnet “PWABuilder” (også nevnt ovenfor) som inkluderer App Shell-arkitekturen, et automatisert testverktøy og en optimaliseringsguide.

Denne verktøyserien forenkler prosessen med å lage PWA-er, samtidig som den gir utviklere tilgang til bransjens beste praksis. Dette utviklingsverktøyet har også integrert Googles Bubblewrap-teknologi, som gir utviklere de nødvendige verktøyene for å pakke PWA-appene sine for distribusjon på Google Play app-butikken.

Et annet alternativ er Microsofts PWA Studio. Studio er en VSCode-utvidelse som gir kraftige verktøy for utvikling av progressive webapper. Med hjelp av PWA Studio kan du raskt konvertere din eksisterende webapp til en PWA, generere en servicearbeider og revidere den for å sikre at den er klar for publisering på app-butikken.

For å lære mer om PWA-nyhetene i Microsoft Edge, les "What's New in Progressive Web Apps" på Microsoft.com.

Apple følger med

Apple har tatt betydelige skritt for å ta i bruk progressive webapper og kapitalisere på den voksende trenden med PWA-er. Ikke så lenge siden kunngjorde Apple støtte for Service Workers og Web App Manifest i sin Safari-nettleser.

Denne funksjonen lar utviklere opprette, distribuere og oppdatere PWA-er akkurat som en native mobilapp. Apple samarbeider også med Google for å gjøre det enklere for utviklere å bygge PWA-er som kjører på tvers av flere plattformer, og skape en mer enhetlig opplevelse for brukere.

Det er imidlertid fortsatt et stykke igjen til full kompatibilitet for iOS-brukere, som denne sammenligningen viser. Men dette er fortsatt langt foran Mozilla, som ikke støtter PWA-er i Firefox-stasjonærapplikasjonen.

Tre viktige PWA-trender

Fremtiden for PWA-er ser lovende ut, med en rekke trender som vil forme hvordan bedrifter engasjerer seg med kundene sine. Her er tre store trender som kan føre til betydelige fremskritt i PWA-verdenen:

Økt innføring på mobil

En viktig trend er den økte innføringen av PWA-er på mobile enheter. Etter hvert som mobilbruken fortsetter å vokse, konkurrerer selskaper om å bygge PWA-er som kan tilby brukerne en app-lignende opplevelse samtidig som de sikrer kompatibilitet med en rekke plattformer og enheter.

Dette vil tillate bedrifter å levere mer engasjerende opplevelser på tvers av flere kanaler og nå flere brukere enn noen gang før.

Stemme og AI

Den andre trenden er fremveksten av stemmeassistenter og AI-teknologi i PWA-er. Google har allerede utgitt verktøy som en naturlig språkprosessor som kan integreres i eksisterende nettsteder og applikasjoner for å gjøre det mulig for kunder å interagere med et nettsted ved hjelp av stemmen sin.

Denne bekvemmeligheten kan vise seg å være svært gunstig for bedrifter som ønsker å engasjere seg dypere med kundene sine, og gi raskere service og løsningstider.

Gestgjenkjenning

Til slutt, når det gjelder PWA-er, er bevegelsesbaserte brukergrensesnitt klare for take-off. Med funksjoner som gestgjenkjenning tilgjengelig for webapper, vil brukere ikke lenger trenge å stole utelukkende på klikk og trykk for interaksjoner; i stedet kan de bruke hendene eller kroppsbevegelser for navigering og kontroll for å få mest mulig ut av PWA-opplevelsen.

Bli med i PWA-fellesskapet

Hvis du vil være sikker på at du holder deg oppdatert med alle de siste nyhetene og utviklingene av PWA, bli med i PWA-utviklerfellesskapet. Dette er et samlingssted for utviklere som deler innsikt og hvor du kan stille spørsmål om PWA.

Først publisert 25. september 2019, oppdatert 22. desember 2022.