Lag en Progressive Web App (PWA) med WordPress

En «Progressive Web App» (PWA) eller en «Progressiv Web Applikasjon» er en nettside som er designet til å fungere som en app. I denne artikkelen vil vi forklare hvordan du kan bruke din nettside til å lage en progressive web app på bare få minutter.

Hva er en Progressive Web App?

En PWA er en nettside pakket på en måte som får den til å se ut og oppføre seg som en app. Som en slags hybrid mellom begge kan den dra fordelene fra både å være nettside og fra å være en app. Den kan vises som et app-ikon fra brukernes smarttelefoner, tablets og datamaskiner. Den kan også brukes offline, sende varsler til brukere og kjøres på alle moderne plattformer.

Å lage en Progressive Web App

Du kan gjøre om en hvilken som helst nettside til en Progressive Web App! Det er ikke veldig vanskelig for en dyktig webutvikler, men selv for deg som ikke har dykket inn i faget kan det gjøres enkelt. La oss fortelle hvordan!

Lag en Progressive Web App med WordPress

For å lage en Progressive Web App med WordPress behøver du en plugin. Vi har testet flere plugins og valgt vår favoritt: Super Progressive Web Apps. Det finnes også flere andre der ute som det er mulig å bruke. Søk på «PWA» i søkefeltet for Plugins i WordPress for å få opp flere alternativer.

Slik lager du en Progressive Web App med WordPress:

1. Logg inn i WordPress
2. Hold over «Plugins» i menyen til venstre og klikk på «legg til ny plugin»
3. Installer Super Progressive Web Apps
4. Klikk på «Aktivér»

Så enkelt er det! Nettsiden din er nå en Progressive Web App! Om du besøker nettsiden din på en telefon eller dtamaskin, vil nettleseren din spørre om du ønsker å installere nettsiden som en app.

Du kan tilpasse din PWA i innstillingene til Super Progressive Web Apps som ligger i menyen til venstre. Der kan du justere på logoen til appen, endre beskrivelse og navn, justere bakgrunnsfargen på skjermbildet mens det laster inn og mye mer. Det er enda flere funksjoner for ytterligere tilpasninger som å kunne gjøre en nettisde på flere språk om til en PWA og å raskt få opp en versjon av appen som blir tilgjenglig i Google Play Store. Disse funksjonene er en del av Pro-versjonen som man må betale for.

Husk på at alle plugins som du installerer på din WordPress-nettside må oppdateres jevnlig for å forsikre sikkerhet og funksjonalitet. Vi anbefaler å sette på automatisk oppdatering. Det er greit å vite at dette likevel kommer med en viss risiko for at en oppdatering kan endre på nettsiden din på en måte du ikke hadde tenkt.

Med Managed WordPress fra one.com er alle automatiske oppdateringer overvåket for å forsikre at nettsiden din fortsetter å fungere akkurat som den skal. Vi utfører en visuell sjekk av nettsiden din før og etter hver automatiske oppdateringer for å forsikre oss om at ingen av oppdateringene har resultert i problemer for siden din.  

Andre måter å lage en PWA på

Det er mulig å lage en Progressive Web App for uansett hvilken nettside. Vi kommer ikke til å forklare hele den tekniske prosessen i denne artikkelen, men i korte trekk er det to ting du trenger å gjøre for å lage en PWA:

1. Lag en webapp-manifestfil som inneholder nettsidens navn, app-ikonet du vil bruke, farger og visninsgsformat.
2. Lag en Service Worker. Dette er en javascript-fil som fungerer som broen mellom brukerens enhet og din nettside. Det er Service Worker som gjør nettsiden din om til en Progressive Web App.

Om du vil lære mer om hvordan du kan lage en Progressive Web App, kan du lese en omfattende guide på web.dev.

Fordelene med en Progressive Web App

Mange av verdens mest populære nettjenester bruker PWA-teknologi. For eksempel Spotify, Facebook, Tinder, Google, Twitter, Uber og Starbucks. Du kan også lage en Progressive Web App og dra nytte av fordelene det gir. Her er noen av de viktigste fordelene med å ha en PWA:

Oppleves som en App

Den største fordelen med å ha en Progressive Web App er at den gir deg en nettside, men med samme brukeropplevelse som på en app. En app er kjapp, kan sende notifikasjoner, kan brukes offline og app-ikonet kan ha en betydningsfull plass på brukerens enhet. Å ha en nettside som fungerer som en app gir også noen ekstra fordeler:

App-ikon på hjemskjermen

Med en PWA vil nye besøkere på nettsiden din få muligheten til å laste ned nettsiden som en app. Med en gang den er installert vil den dukke opp på startskjermen for brukernes enhet, uansett om det er Iphone eller Android, Mac eller Windows.

App-ikonet blir som et reklameskilt for nettsiden din. Når netthandel-giganten Alibaba lagde en PWA for nettbutikken sin rapporterte de at brukere som la til appen på startskjermen sin kom tilbake fire ganger oftere enn andre. Et app-ikon på brukerens enhet kan derfor bidra til å gjøre brukere til returnerende kunder.

Personer som bruker en datamaskin fra en bedrift eller skole kan ofte installere PWA-er selv når installasjoner av andre apper ikke er mulig. Slik kan man også nå ut til et publikum som man ikke ville nådd ut til med en vanlig app.

App med dedikert visning

En vanlig nettside vises i en fane i nettleseren, men en PWA fungerer som en vanlig app og vil derfor få sitt eget vindu på en datamaskin, og fremstår som en enkeltstående app på mobiltelefoner. Brukere kan lukke nettleseren uten å luke din Progressive Web App, og kan bytte mellom apper uten å merke forskjellen på en vanlig app og en PWA.

Synlig i App-butikker

Når du har laget en Progressive Web App, kan du legge den til som en app i Google Play Store og Apple App Store. Dette får appen din til å se mer profesjonell ut og har større sjanse for å bli oppdaget av nye brukere. Et stort pluss med å være i en app-butikk at det møter brukernes forventninger til hvordan man går frem for å installere en app. Brukere føler seg trygg på at appen er sikker når man kan laste den ned fra en app-butikk de stoler på.

Åpen på alle plattformer

Når du lager en Progressiv Web App åpner du en portal til din nettside. Portalen er bygd på en standard som brukes på alle moderne plattformer. På samme måte som at du kan bygge en nettside som fungerer på alle enheter, kan du også lage en Progressive Web App som fungerer for alle. Du kan oppdatere innholdet i alle appene ved å endre på nettsiden. Oppdateringene vil bli sendt til brukerne også, uten at de trenger å oppdatere appen..

Rask lastetid

Den første gangen en bruker laster ned din PWA, er appen lagret på brukerens enhet. Det betyr at den lastetiden når den åpnes neste gang vil være superkjapp, til og med kjappere enn en nettside ville brukt på å laste inn. Det samme gjelder ved hvert klikk inne i appen. For hver nye side vil enheten lagre lokalt for å forkorte lastetiden.

Kan brukes offline

En Progressive Web App kan lages med en tilgjengelig offline-modus. Dette betyr at de mest kritiske funksjonene alltid kan være tilgjengelig og kan laste kjapt, selv når brukere har dårlig internettforbindelse. Det betyr også at du kan ha viktige funksjoner i appen din som brukerne får brukt til en hver tid. Dette kan for eksempel være event-bookinger. Bookingen kan være tilgjengelig til tross for at internettforbindelsen er treg der hvor eventet finner sted.

Send notifikasjoner

Med en Progressive Web App kan du sende notifikasjoner til brukerne. Du kan for eksempel informere dem om siste nytt og sende personlige meldinger. Notifikasjoner kan øke bruken av appen og sørge for mer trafikk.

Billigere enn å utvikle en vanlig app

Det er mye billigere å lage en Progressive Web App enn å utvikle en vanlig app både for iOS og Android. Hvis du allerede har en god nettside kan kostnaden for å lage en PWA være minimal. Selv med store, komplekse planer for appen din kan en Progressive Web App være et billig alternativ mens den er i utvikling.

Øker trafikken og konverteringsraten

Mange store teknologiselskaper bruker PWA-teknologi, og det er det god grunn til. En god brukeropplevelse er alfa omega for høy trafikk og gode konverteringer. Alibaba rapporterer 76% høyere konverteringsrate med Progressive Web App. Programvareselskapet Corel så 31% økning av returnerende kunder med deres PWA.

Ulemper med Progressive Web App

Det finnes også noen ulemper med å lage en Progressive Web App. Spesielt om man sammenligner med vanliger apper som utvikles for iOS og Android.

Fungerer ikke på gamle enheter

PWA-er er relativt ny teknologi og er derfor ikke tilgjengelig på alle enheter. Når det gjelder Apple iOS, har det støttet PWA siden iOS 14. En Iphone fra 2014 eller tidligere vil ikke støtte Progessive Web Apps. Det samme gjelder for Windows, hvor PWA ikke støttes av Windows 8 eller tidligere versjoner enn dette. Det vil si at enheter stort sett må være mer enn ti år gamle før det blir et problem.

Begrenset funksjonalitet

En Progressive Web App har ikke den samme funksjonaliteten som en vanlig app. Det er for eksempel begrensninger når det kommer til hvordan en app kan integreres med en skjermleser. Noen operativsystemer har lav terskel på hvor mye plass en PWA kan ta på mobilen din.Det vanligste er 50 MB. Dette kan gjøre det vanskelig for noen av de større nettsidene å bli lagd som en Progressive Web App.

Langsommere enn vanlige apper

Siden en Progressive Web App helt egentlig er en nettside som bare er designet til å se ut som en app, er den ikke bygd på samme måte som en vanlig app. En konvesekvens av dette er at en Progressiv Web App ofte responderer saktere enn en vanlig app ville gjort. En PWA er fremdeles markant raskere enn en nettside, men en vanlig app vil igjen være raskere enn en WPA.

Bør du lage en Progressive Web App?

Har du en nettside som du tror at brukere ville ha brukt som en app? Er nettsiden din også bygd med WordPress? Da bør du lage en Progressive App i dag. Det er veldig enkelt og kan være veldig fordelaktig for både deg og besøkere. En Progressive Web App kan øke trafikken til nettsiden din, øke konverteringer og gir deg muligheten til å kommunisere med besøkere og kunder gjennom varsler.

Om du ikke har en nettside i WordPress kan en PWA fremdeles være verdifullt, men den kan bli litt vanskeligere å få laget. Det er mange ressurser å finne på nett, men dette er nok noe som egner seg mer for gode webutviklere. 

Vi håper du har lært alt du trenger for å komme i gang med en Progressive Web App og forstår hvorfor det er god teknologi for deg og dine besøkere. Om du ikke allerede har en WordPress-nettside kan du trykke her for å komme i gang!