PWA (Progressive Web Application) tarkoittaa teknologiaa, jonka avulla tehostat sivustoasi ja annat yrityksellesi mahdollisuuden tavoittaa asiakkaita monilla uusilla tavoilla. Mutta kuinka PWA tarkemmin ottaen toimii ja miten yrityksesi voi hyötyä siitä?
Tutustu tarkemmin headless-verkkokauppaan »
Johdanto PWA:han
PWA auttaa yrityksiä rakentamaan verkkosovelluksia, jotka näyttävät ja tuntuvat natiiveilta mobiilisovelluksilta (applikaatiokaupasta ladattavat sovellukset), mutta käyttävät verkkotekniikoita, kuten JavaScript, HTML ja CSS. Ne ovat äärimmäisen nopeita, ne voidaan lisätä älypuhelimen aloitusnäyttöön mobiilisovelluksen tavoin, niillä voidaan lähettää mobiililaitteisiin push-ilmoituksia ja niitä voi välimuistin tehokkaan hyödyntämisen ansiosta käyttää myös offline-tilassa, kun verkkoa ei ole käytettävissä.
Progressive Web App siis käynnistyy normaalina verkkosivuna selaimessa ja käyttäjän selatessa sivustoa, hän saa kehotuksen lisätä verkkosivu puhelimen aloitusnäyttöön. Kun käyttäjä on hyväksynyt pyynnön, PWA näkyy puhelimen aloitusnäytössä muiden sovellusten tapaan. Ulkoisesti se myös näyttää samalta kuin muut sovellukset, mutta oleellinen osa toimintaperiaatetta on juuri se, ettei sitä tarvitse ladata applikaatiokaupasta natiivisovellusten tavoin. Voit tarvittaessa myös piilottaa selaimen käyttöliittymän (esim. hakupalkin) kokonaan.
Lisää PWA-aiheista luettavaa: Kuinka PWA vaikuttaa hakukoneoptimointiin? »
Mobiiliverkkokauppa ja PWA
Tärkeä syy PWA:n kasvavaan merkitykseen on, että mobiililiikenne on ylittänyt muun verkkoliikenteen. Konversiot ovat edelleen pienempiä mobiilikaupassa, mutta ne ovat kasvaneet ajan myötä. Esimerkiksi vuonna 2020 mobiilikonversiot kasvoivat Black Friday -viikolla 47 % vuositasolla ja kattoivat 39 % kaikista konversioista. On siis selvää, että mobiilikauppa on tullut jäädäkseen.
Käyttäjät kuitenkin muuttavat mobiiliostoskäyttäytymistään. Sovellusten käyttö vähenee ja globaalisti 53 % ostajista käyttää jälleenmyyjän mobiilisivustoa sovelluksen sijaan. Kuluttajat haluavat parhaan kokemuksen mobiililaitteella suoraan selaimesta lataamatta sovellusta, mikä nopeuttaa siirtymistä PWA:an.
Tutustu vinkkeihimme: 8 tapaa parantaa verkkokaupan asiakaspalvelua »
Miksi PWA?
Nykyaikainen asiakaskokemus
Modernit asiakkaat eivät halua etsiä ja ladata sovelluksia. He eivät myöskään pidä hitaista latausajoista. PWA ratkaisee molemmat ongelmat paremmin kuin natiivisovellus. Lisäksi PWA mahdollistaa offline-ominaisuudet ja paremman tuen sivuston käytölle heikoilla internet-yhteyksillä. Jos asiakas menettää internet-yhteytensä kassalla, hän voi silti käyttää verkkosivustoa ja sivu tallentaa hänen tietonsa. Kun yhteys on palannut, PWA lähettää asiakkaalle muistutuksen jatkaa ostoprosessia palaamalla kassalle.
Kiinnostaako sinua, kuinka hyvä asiakaskokemus luodaan verkkokaupassa? »
Tavoitettavuus
Mobiiliyleisö on kasvanut viime vuosina. Nykyään Google Chromella on miljardi mobiilikäyttäjää verrattuna 400 miljoonaan käyttäjään vuonna 2016. Comscoren raportin mukaan mobiiliverkon kattavuus on 2,5 kertaa suurempi kuin sovellusten, kun otetaan huomioon 1000 suosituinta sivustoa ja sovellusta.
Asiakashankinta
Mobiilisovelluksia on edelleen vaikea löytää verkkosivustoihin verrattuna. Tästä syystä verkko voittaa alkuperäiset sovellukset halvemmilla käyttäjien hankintakustannuksilla. Paremmalla saavutettavuudella ja helpolla käyttöönotolla, PWA houkuttelee enemmän käyttäjiä halvemmalla.
Konversio
PWA auttaa viemään sivuston seuraavalle tasolle ja lisäämään konversiota. Esimerkiksi Flipkart toi markkinoille PWA-ratkaisunsa Flipkart-liten. Heidän mukaansa konversioaste kasvoi 70 % pienemmillä hankintakustannuksilla. Jopa heikoilla yhteyksillä PWA parantaa konversiota.
7 faktaa PWA:sta
- PWA:lla on yksi koodikanta kaikille alustoille.
- PWA:lla on pääsy useimpiin mobiililaitteiden ominaisuuksiin.
- PWA voi lähettää push-ilmoituksia.
- PWA:n käyttöliittymä toimii responsiivisena verkkosivustona tai kuin mobiilisovelluksena käyttäjän laitteesta riippuen.
- PWA:ta ei tarvitse ladata tai asentaa – riittää, että vierailet verkkosivustolla.
- PWA käyttää selaimen sisäistä välimuistia ja tallennustilaa, jotta se toimisi kunnolla heikolla Internet-yhteydellä tai jopa offline-tilassa.
- PWA:n avulla voidaan tavoittaa enemmän ihmisiä verrattuna natiivisovelluksiin ja hyötyä hakukoneoptimoinnista.
Kuinka luoda PWA?
PWA:n rakentaminen ei ole niin vaikeaa kuin ehkä luulisit – olemme koonneet listan, josta näet mitä tarvitset aloittaaksesi:
- HTTPS – Aluksi tarvitset palvelimen HTTPS-yhteydellä varmistaaksesi, että data on luotettavaa ja turvattua.
- Sovelluskuori – Sovelluskuori näyttää käyttäjälle esimakua sivustosta samalla, kun sovellus latautuu. Sovelluskuori on siis se, mitä käyttäjä näkee, kun ottaa PWA:n käyttöön ensimmäistä kertaa.
- Kehittäjät – Kehittäjät ovat suuressa roolissa PWA:n takana. He huolehtivat sovelluksen toimivuudesta offline-tilassa, tekevät taustatyötä, sekä huolehtivat välimuistista. He voivat myös lähettää push-ilmoituksia, badge-merkkejä ja työskennellä erilaisten taustatehtävien parissa.
- Manifest-tiedosto – On JSON-tiedosto, joka sisältää kaikki tiedot, jotka kontrolloivat PWA:n ulkoasua ja toimintaa. Sen avulla voidaan määrittää esimerkiksi nimi, kuvaus, värit ja muut PWA:n toiminnot ja ominaisuudet.
PWA – parhaat vinkit
Yksinkertaista
PWA voi toimia tehokkaana työkaluna, joka nostaa mobiilikäyttökokemuksesi uudelle tasolla. Yleinen sudenkuoppa on kuitenkin liiallinen innostuminen ja kaikkien ominaisuuksien käyttöönotto yhdellä kertaa, mikä ei ole pidemmän päälle järkevää. Hiljaa hyvä tulee, kun haluat saavuttaa intuitiivisen ja suoraviivaisen käyttökokemuksen – ei häiritsevän tai tunkeilevan.
Priorisoi sisältöä
PWA:n tarkoitus on auttaa saavuttamaan mahdollisimman sujuva käyttökokemus. Selkeä arvolupaus, selkeät toimintakehotukset (CTA) sekä yksinkertainen ja houkutteleva design ovat oleellisimpia ominaisuuksia saumattoman kokemuksen luomiseen.
Vähennä kitkaa
Pitkät latausajat eivät ole ainut asia, joka saa ihmiset ärsyyntymään. Tylsät lomakkeet ja monimutkaiset kassaprosessit ovat myös omiaan vaikuttamaan nopeampaan poistumiseen sivustolta. Voit vähentää kitkaa mahdollisimman paljon valitsemalla automaattisen täytön, integroidut maksut, yhden napautuksen uloskirjautumisen ja niin edelleen.
Minimoi odotusaika
Luo käyttäjälle tunne siitä, että sivuston latautuminen etenee, esimerkiksi latausnäkymiä ja siirtymäanimaatioita käyttäen. Näin odotusaika tuntuu lyhyemmältä ja vähemmän turhauttavalta.
Huomio offline
Ota kaikki irti PWA-ratkaisustasi toimittamalla kaikki olennaiset ominaisuudet myös offline-tilaan, käyttöönottamalla selaimen välimuisti ja tallennustila.
Auditioi sovelluksesi Lighthousen avulla
Voit käyttää sovelluksesi tai sivusi auditointia varten Googlen avoimen lähdekoodin suorituskyvynhallintatyökalua Lighthousea. Lighthouse antaa sinulle sivusta tarkistusraportin, sekä viiteasiakirjan jokaisesta tarkistuskohdasta, jotka tulisi korjata.
Progressive Web App antaa mahdollisuuden ottaa käyttöön parhaat tekniset ratkaisut nopeasti ja parantaa näin asiakaskokemusta. Asiakaskokemukseen panostaminen on nykyaikaa ja sen parantaminen kasvattaa konversiota. Kiinnostuitko PWA:sta? Ota yhteyttä alta, niin keskustellan lisää!
