Bananas rejse til App: Fra selvbetjening til PWA-mesterstykke

For at udforske, i en mere detaljeret beskrivelse, hvordan vi bruger Progressive Web Apps til at bygge en selvbetjening, som beskrevet i min tidligere artikel ”Når hjemmesider bliver til Apps”, har jeg valgt at tage udgangspunkt i et fiktivt firma. Firmaer med frugtnavne har generelt været meget succesfulde, så derfor hedder vores firma selvfølgelig ”Banana”.

Introduktion til Banana

Banana er et fiktivt onlinebaseret firma, der specialiserer sig i at levere friske og lækre bananer direkte til forbrugernes dørtrin. Med en brugervenlig hjemmeside og en effektiv selvbetjening har Banana opnået stor succes inden for online frugtlevering.

Nu står Banana over for en spændende udfordring; at lancere deres nye produkt. En abonnementsbaseret ydelse, der sikrer regelmæssige leveringer af bananer - ”Banana as a Service (BaaS)”. For at kunderne kan administrere deres bananleverance (BaaS), kræver det en selvbetjening, og kunderne forventer, at denne selvbetjening også findes som en app. For at imødekomme det ønske har Banana vendt blikket mod PWAs. Det er en simpel og effektiv vej til at skabe en cross-platform app uden at skulle starte helt fra bunden.

Hvorfor udvider Banana deres selvbetjening med en PWA?

Banana har valgt at udvide deres selvbetjening med en PWA af flere strategiske grunde, som alle sigter mod at forbedre brugeroplevelsen og øge tilgængeligheden. Her er nogle af de vigtigste årsager til, at Banana har truffet denne beslutning:

1. Øget tilgængelighed:
   En PWA giver Banana mulighed for at nå deres kunder på tværs af forskellige enheder og platforme. Dette gør Bananas tjenester mere tilgængelige, så brugerne nemt kan få adgang til dem fra enhver enhed med en browser.
   
   

2. Omkostningseffektivitet:
   Sammenlignet med udviklingen af separate native apps til forskellige platforme, er udviklingen af en PWA meget mere omkostningseffektiv, især fordi Banana allerede har en responsiv og effektiv online selvbetjening. Dette gør det muligt for Banana at investere i teknologiske forbedringer uden at skulle håndtere kompleksiteten af flere appversioner.
   
   

3. Brugerengagement:
   PWAs tilbyder muligheder for øget brugerengagement ved at tillade push-notifikationer og installation af appen på hjemmeskærmen. Dette holder brugerne informeret og skaber en sammenhængende oplevelse.
   
   

4. Hurtig time-to-market:
   Udviklingen af en PWA til Bananas selvbetjening giver mulighed for en hurtigere implementering og udgivelse sammenlignet med udviklingen af native apps til forskellige platforme. Dette reducerer time-to-market, hvilket er afgørende i en konkurrencepræget branche som online frugtlevering. Ved at vælge en PWA kan Banana hurtigere introducere nye funktioner, rette fejl og tilpasse sig brugernes behov uden de lange godkendelsesprocesser, der ofte er forbundet med traditionelle appbutikker.

Hvordan gør Banana det – den tekniske del

Banana vil gerne hurtigt ud på markedet med sin PWA, derfor går de efter at udvikle en MVP (minimum viable product ). MVP’en hos Banana skal kun overholde minimumskravene for at kunne udgives som en PWA. Så det, første Banana gør, er at gennemgå de officielle krav for en PWA.

• En webapplikations manifest med de korrekte felter udfyldt – den del skal udvikles.

• Hjemmesiden skal serveres fra et sikkert (HTTPS) domæne – det krav er selvfølgelig allerede opfyldt.
  

• Et ikon for at repræsentere appen på enheden – Banana har selvfølgelig allerede et logo, der hurtigt kan tilpasses til et ikon.
  

• En JavaScript service-worker for at tillade, at appen fungerer offline – den del skal udvikles.
  

Så de mangler faktisk kun at udvikle to ting. En manifest fil der skal give browseren informationer om appen, som den skal bruge for at kunne installere en PWA og en JavaScript service-worker, der er en fil med JavaScript kode, så den kan køre for sig selv.

For at komme hurtigt fra start vælger Banana at bruge en PWABuilder – https://www.pwabuilder.com/. Det er et open source-værktøj, der kan analysere en hjemmeside og hjælpe med byggestenene til en PWA.

I første omgang bygger Banana en manifest fil:

Så mangler Banana kun en JavaScript service-worker, der som minimum kan håndtere, hvis PWA’en ikke har internetforbindelse. Den er udviklet med følgende kode:

Med de to filer lagt ud i produktion opfylder Banana minimumskravene og er klar at lancere den første MVP af deres PWA. Banana har dog flere planer med deres app.

Bananas PWAs fremtid

Banana har en liste af ønsker til deres nye app, og de første er meget ligetil.

1. Udgivelse af appen i Google Play Store
   Lige nu kan MVP’en kun hentes ved at gå ind på Bananas hjemmeside og vælge ”Installer App”. Derfor har det højeste prioritet at få appen ud i diverse App Stores. Banana vælger Google Play Store som første valg, da den næsten bare kan uploades 1 til 1.
   
   

2. Udgivelse af appen i iOS App Store
   En stor del af Bananas kunder er iOS brugere, så derfor skal appen også udgives i iOS App Store. Her skal man dog lægge en smule mere arbejde , da det kræver, at man bygger en standard iOS App-skal udenom PWA’en. PwaBuilder kan generere koden, men det kræver stadig en Mac og en Apple Developer account for at udgive appen i iOS App Store.
   
   

3. Implementering af push notifikationer
   Efter udgivelsen i de to største App Stores skal appen udvides med push notifikationer for at kunne informere brugerne om tilbud, nye produkter, leveringer og andre vigtige oplysninger.
   
   

4. Biometrisk login
   Integrering af biometrisk login, såsom fingeraftryk eller ansigtsgenkendelse for en mere sikker og bekvem loginoplevelse.

Afsluttende tanker

Bananas beslutning om at udvikle deres selvbetjening som en PWA viser deres forpligtelse til at forbedre brugeroplevelsen og gøre deres tjenester mere tilgængelige for alle. Ved at implementere teknologier som push notifikationer og biometrisk login er Banana klar til at tage det næste skridt ind i fremtiden af online frugtlevering.

Med disse teknologiske fremskridt kan Banana fortsætte med at levere lækre bananer, som nu er understøttet af en førsteklasses digital oplevelse for deres kunder, der abonnerer på Banana-as-a-Service. Meget af det skabt effektivt, hurtigt og økonomisk ved brug af Progressive Web Apps.

Fremtiden er moden til at blive plukket, og Banana er klar til at lede an!