PWA for Black Red White eCommerce – Vær der kundene dine er

**automatisk oversatt tekst**

Med selskapets utvikling vokser behovene, og det er reelt i e-handelsmiljøet. Vi engasjerer oss i jakten på å forbedre produkttilgjengeligheten. Vi velger e-handelsplattformer som kan garantere samme høye tilgjengelighet for våre kjøpende kunder.

I e-handel har vi ingen muligheter til å samhandle med kunder, da salget går via internettplattformer, dermed er det kvaliteten som spiller en avgjørende rolle. Det påvirker kjøpet, uansett om det er et spesifikt produkt eller en tjeneste. Det er også den høye tilgjengeligheten vi streber etter og som krever en flerkanalstilnærming. Mens vi får nye kunder, kan vi ikke begrense oss til kun én salgskanal. Vi bør alltid lete etter flere ideer for forretningsvekst.

Black Red White e-handelsteamet kan tauene. Derfor har de valgt Ideo for å øke selskapets tjenestetilbud for å nå flere potensielle kunder. De satte standarden veldig høyt. Det involverte implementering av mobilapplikasjoner, både funksjonell og intuitiv.

«Nesten 70 % av nettstedtrafikken vi fikk, kom fra mobile enheter. Smarttelefonbrukere genererte over 40 % transaksjoner mens ordreverdien var enda mindre. Det var et tydelig signal til oss, noe virket ikke. Så vi tok en grundig titt på mobilnettet. Vi tok skritt for å forbedre brukervennligheten og optimalisere kjøpsprosessen.»- forklarer Mariusz Nowak, strategidirektør for e-handel og omnichannel hos Black Red White SA. "Vi ønsket å tilby brukere en lignende opplevelse, de hadde i en innebygd applikasjon, men likevel mye forbedret, uten å installere den fra Google Play eller App Store. Ifølge våre forutsetninger skulle nettsiden lastes raskt, fungere problemfritt. Selv om det var en svak tilkobling eller midlertidig mangel på Internett-tilgang. Dessuten ønsket vi ikke å vedlikeholde og utvikle to uavhengige plattformer: den gamle appen og nettsiden. PWA virket i så måte som den mest optimale IT-løsningen.»

PWA-teknologi er den siste trenden innen å lage webapplikasjoner. Google-teamet satte en ny retning for utviklingen, mens andre populære nettlesere fulgte etter. Med et lite unntak av Safari, som støtter en stor del av PWA-relaterte metoder, deaktiverer imidlertid appinstallasjonen som standard.

PWA gir deg flere muligheter. Via BRW e-handelsappen kan du få tilgang til enhetsressurser og lagre dem i nettleserens lokale database (IndexedDB). Du kan bufre hele nettstedsvisninger selv mens du arbeider i frakoblet modus. PWA gjør det også mulig å installere applikasjonen på både mobile og stasjonære enheter.

Den originale Black Red White var en klassisk applikasjon som overbelastet hver gang brukeren tok affære. Det var verken tiltalende eller praktisk. Mens de brukte den, hadde kjøpere av mobilenheter et inntrykk av at det fortsatt var det gamle nettstedet, men likevel pakket inn i en "fin boks". BRW-teamet var klar over problemet og visste at det påvirket kundenes endelige kjøpsbeslutninger alvorlig. Så, de hadde bestemt seg; det var på beste tid å gjenoppbygge nettstedet totalt.

For å gjøre det var det viktig å redesigne hele UX sammen med de grafiske elementene. På denne måten vil nettstedet ligne mobilapplikasjonen. Bortsett fra å introdusere det nye appkonseptet, måtte teamet også ta opp noen få mindre nyanser i mobilapplikasjonen, som å legge til et "Gå tilbake" pilsymbol.

SPA-teknologien (Single Page Application) kombinert med Vue.js-rammeverket var den ultimate løsningen på problemet med hyppig gjeninnlasting av nettsider. Nå gjengir alle nettsteds individuelle elementer etter brukernes aktivitet. Nettleseren utfører færre operasjoner, og den optimerer serverbelastningen veldig bra. Dessuten øker det nettstedets ytelse enormt. Det fungerer raskere, og grensesnittet er mer dynamisk, noe som gjør at selv de mest komplekse grafiske layoutene kan kjøre problemfritt. Dermed er den nye digitale opplevelsen unik. Nettstedsurfing via hvilken som helst mobilenhet gir brukerne den samme komforten og følelsen som mobilappen. Nettstedet er like effektivt når det brukes på en stasjonær PC eller en bærbar PC. Denne tilnærmingen utvidet BRWs nettbutikkmuligheter betydelig.

Vi, Ideo-teamet, gikk imidlertid for store teknologiske endringer og foreslo SSR (Server-Side Rendering) som er langt mer overlegen SPA. For eksempel overfører standard SPA-type nettstedgenerering til kundenes nettlesere. Det er to trinn før brukere ser hele nettstedet. Først må nettleseren hente nettdataene fra serveren, og deretter gjengi den endelige webvisningen basert på de samme dataene. Det tar tid å vente på at siden skal lastes helt inn, spesielt med store sider. SSR-teknologi løser problemet, men reduserer lastetiden som SPA-type nettsteder vanligvis trenger. Det har bare en positiv innvirkning på nettposisjonering.

Gjengivelsen på serversiden (SSR), som navnet antyder, foregår på en server hvorfra den sender klar HTML-kode til brukerens nettleser. Den inneholder bare datanettleseren som må vise visningen valgt av brukeren. Ethvert nettsted som er bygget slik, tar kortere tid å laste sammenlignet med klassiske SPA-nettsteder. Brukerne legger ikke merke til at dataene blir lastet.

Med nettbutikken BRW.pl brukte vi Nuxt-rammeverket med SSR, som vi senere lanserte på Node-serveren. Det er viktig her å nevne én faktor. Ved behandling av koden på serveren har vi ikke tilgang til all informasjon som er tilgjengelig i nettleserne. Ting som globale variabler; vindu, dokument eller navigator.

I stedet er det tilgang til Connection-hodets detaljer, som gjør dem i stand til å gjenkjenne en spesifikk enhet og generere tilpasningsdyktig HTML til dens evner. Den endelige serverresponsen er mindre og øker hastigheten på HTML-behandlingsstrukturen for enhver enhet.

Sørger du for en smidig overgang mellom individuelle butikkvisninger, bidrar du til en positiv digital brukeropplevelse. PWA gir også flere forbedringer mens brukerne ser nettbutikken. Den viktigste er en praktisk installasjon av mobilapplikasjoner. I det øyeblikket en potensiell kunde går inn i den PWA-baserte nettbutikken, ber nettleseren først automatisk mobilbrukeren om tillatelse til å bruke mobilapplikasjonen. Den gjør det på en diskret og ikke-påtrengende måte, så man har friheten til å akseptere eller fornekte. Når brukeren godtok tillatelsen til å kjøre programmet, vil ikonet vises på skrivebordet. Den lagrede informasjonen om nettstedtilgang vil gjøre det mulig for brukere å få tilgang til PWA enkelt under fremtidige besøk.

Den viktigste PWA-fordelen er å surfe på butikkens side offline.

Selv brukere uten internettforbindelse kan se butikkens digitale katalog og legge til produkter i Favoritter. Som selger er det mulig å sende push-varsler for å holde kontakten med kundene og informere dem om nye produkter og aktuelle avtaler. Applikasjonen kan behandle all data offline, takket være Service Worker-skriptet. Funksjonen er hevet over tvil, et av de viktigste PWA-elementene. Hver forbindelse med serveren går gjennom Service Worker og samler data fra en bestemt underside, som du senere kan vise offline. Strategien faller inn i Network First (Network Falling Back to Cache)-tilnærmingen.

Hver gang brukeren viser en bestemt side på nettet, griper cachen og lagrer nye elementer. Teknisk sett oppdateres dataene i cachen. PWA samler ikke inn store mengder informasjon, men bare dataene på undersidene du har sett. Når du mister forbindelsen midlertidig, vil Service Worker automatisk omdirigere forespørslene sine til hurtigbufferdataene. Den lar deg gå tilbake og se produktbildene eller beskrivelsene, og til og med bruke andre funksjoner jevnt.

Som for eksempel favorittlister - en veldig populær PWA-funksjon drevet av IndexedDB (dvs. Indexed Database API). Det er den nettleserbaserte JavaScript-grensesnittapplikasjonen for å administrere en NoSQL-database med JSON-objekter. Så, applikasjonen kan lagre data om brukernes aktivitet offline. I det øyeblikket en internettforbindelse er tilgjengelig, finner datasynkronisering sted. Informasjon behandlet offline sendes deretter til den eksterne databasen.

"I løpet av tiden har vi observert at mange brukere uopprettelig sluttet å besøke nettstedet vårt. Noen kunder var misfornøyde med de lange sidene lastetidene, mens andre ble motet av applikasjonens manglende respons. Med den nye PWA-appen kan kundene våre fortsette netthandelsprosessen - selv om internettforbindelsen deres blir alvorlig og midlertidig utilgjengelig. Med teknologi har vi til hensikt å redusere avbruddsraten» - forklarer Mariusz Nowak.

PWA-løsning kombinert med Google Analytics er veldig praktisk. Den samler alle applikasjonsdata generert av brukere i frakoblet modus. Når applikasjonen gjenoppretter internettforbindelsen, sender den disse dataene rett til analyseverktøyet. Ved å gjøre dette får vi innsikt i brukernes adferd offline og studerer det i dybden. Vi kan sammenligne både offline og online kunders tilstedeværelse.

IndexedDB har en verdt å nevne fordel - versjonering. Den lar deg raskt og automatisk oppdatere databasestrukturen. Ingen brukerhandling er nødvendig, og ingen data går tapt under prosessen.

Med PWA-applikasjoner er det utfordrende å designe riktige og justerbare mobile visninger. Derfor, hver gang du kjører applikasjonen på enhetens skrivebord, husk å gjøre via ikonet. Fordi det ikke finnes tradisjonelle navigasjonsknapper, som i nettlesere. Som et resultat må grafisk design alltid inkludere alternativ navigasjon for å muliggjøre fri bevegelse på nettstedet. Mens vi jobbet med navigasjon, ble det grafiske designet levert av kundens team. Vi foreslo løsninger som viste seg å være vellykkede. Mens implementeringen gjorde mobilbutikkapplikasjonen svært fleksibel å bruke.

PWA-applikasjoner kan utvide virksomhetens rekkevidde betydelig. Likevel, hvis kombinert med den nyeste teknologien kan føre til å skape stadig mer fleksible applikasjoner som gir den friske følelsen av muligheter.

Når vi starter en slik implementering, får vi én plattform i to former. En mobilapplikasjon som er kompatibel med alle mobile enheter og et nettsted. I det lange løp blir kostnaden for vedlikeholdstjenesten rimeligere. Du får dobbelt så mange fordeler.

Og det er mer... PWA-oppdateringene blir raskere, spesielt for mobilbrukere. Det blir automatisert, og de trenger ikke endre telefoninnstillinger i det hele tatt. Du kan gi ut PWA-applikasjoner på App Store og Google Play for å øke synligheten for potensielle kunder.