PWA, SPA ja headless – ostajan opas markkinointihutussa navigointiin

Verkkopalveluita uusittaessa puhutaan kasvavissa määrin headless tai PWA-toteutuksista – ainakin jos ostaja on vähän teknisempi. Headlessin edut eivät kuitenkaan ole teknisiä, vaan niillä voidaan saavuttaa merkittävästi parempi käyttökokemus, jolla puolestaan on suora, tutkittu korrelaatio palvelun tuottamaan liiketoimintahyötyyn. Avaan teknisen termistön taustat ja millaisia hyötyjä eri toteutustavoilla saavutetaan.

Headless-ratkaisut

Headless ratkaisuilla tarkoitetaan sitä, että palvelun taustajärjestelmä on eriytetty käyttöliittymästä, eli asiakassovelluksista. Ne rakennetaan erikseen tarkoituksenmukaisella tekniikalla, ja voivat olla esimerkiksi JavaScriptilla toteutettu web-käyttöliittymä tai natiivi iOS-mobiilisovellus. Tai molemmat: samaa taustajärjestelmää voi käyttää usea käyttöliittymä tai asiakassovellus. 

Toteutustavan liiketoimintaedut ovat taustajärjestelmän ja käyttöliittymän riippumattomuus toisistaan. Saman järjestelmän kautta voidaan luoda sisältö sekä verkkopalveluun, että mobiilisovelluksiin. Toisaalta jos taustajärjestelmä pitää liiketoiminnan kehittyessä vaihtaa, ovat vaikutukset asiakassovelluksiin minimoitavissa. Toisaalta myös uusia asiakassovelluksia voidaan kehittää liiketoiminnan tarpeiden mukaan.

Single Page -sovellus (SPA)

Headless-arkkitehtuuri puolestaan mahdollistaa web-sovelluksen käyttöliittymän toteuttamisen täysin “sovellusmaiseksi” ns. Single Page -sovellukseksi (SPA). Se tarkoittaa kasvanutta nopeutta ja monipuolisempaa käyttöliittymää. Siinä missä perinteisessä webissä kuvakkeen klikkaaminen johtaa sivunlautaukseen, hoitaa SPA-latailut taustalla ja palvelu toimii sulavammin. Klassinen verrokki on Googlen sähköpostisovellus Gmail. 

Single Page -sovellukset kehitetään useimmiten JavaScriptillä. Vielä muutamia vuosia sitten JavaScript oli toisen luokan kansalainen, mutta kielen ja komponenttien kehittyminen on tuonut sen tärkeäksi osaksi moderneja web- ja mobiiliratkaisuja. JavaScriptiä hyödyntämällä voidaan verkkopalveluun toteuttaa ominaisuuksia jotka hyödyntävät mm. paikannusta ja kameraa, sekä laitteesta riippuen puhesynteesiä, offline-tallennusta ja bluetoothia.

SPA on siis käytännössä selainikkunassa elävä sovellus joka käyttää internet-yhteyttä satunnaisesti oman tietonsa päivittämiseen. Se voidaan paketoida asennettavaksi sovellukseksi esimerkiksi Apache Cordovan tai Adoben PhoneGapin avulla. Näin sovellus voidaan levittää sovelluskauppojen kautta. Tälläisen paketoinnin haittana, joskin pienenä sellaisena, on ollut ainakin aiemmin käyttökokemuksen puutteet – kuluttaja kuvittelee käyttävänsä natiivisovellusta, mutta sovelluksen käyttöliittymä ei pohjaudukaan puhelimen standardikomponentteihin vaan on toteutettu HTML:llä. 

Sovelluskaupat ottavat siivunsa niiden kautta tehdystä liiketoiminnasta ja niiden kautta levittäminen sopii mielestäni huonosti usein päivittyville ja sisäisille sovelluksille (intra- ja extranetit, sisäiset liiketoimintasovellukset yms). Mikäli sovellusta ei haluta levittää sovelluskauppojen kautta, tai levitykseen halutaan enemmän joustavuutta, voidaan sovellus rakentaa progressiiviseksi web-sovellukseksi.

Progressive Web Application eli PWA

Progressive Web Application, eli PWA, on webbiin rakennettu sovellus, jonka voi asentaa omaan puhelimeensa. Puhelimessa ollessaan se toimii itsenäisesti ja käyttää taustapalvelua (se headless-ratkaisu) tarpeen mukaan esimerkiksi maksutapahtumiin tai tuotetiedon lataamiseen. PWA-sovelluksen edut ovat mm. nopeus, hakukoneystävällisyys, helppo levitettävyys ja päivitettävyys sekä se, että käyttäjä voi valita omien tarpeidensa mukaan sen, asentaako palvelun puhelimeensa vai käyttääkö sitä selaimen kautta.

Esimerkkinä voi toimia vaikka lääkärikeskuksen ajanvaraus. Satunnainen käyttäjä voi varata ajan verkon kautta, mutta työterveysasiakas on kiinnostunut käyttämään palvelua jatkuvasti ja asentaa sovelluksen puhelimeensa kun sitä vaihtoehtoa tarjotaan. Palvelu voi tallentaa käyttäjän kirjautumistiedot tai osan niistä välimuistiinsa ja näin jatkoajanvaraukset sujuvat nopeasti parilla klikkauksella. Android-puhelimella ja työpöytäkoneella palvelu mahdollistaa myös muistutusten lähettämisen push-notifikaatioilla mikäli käyttäjä sallii tämän. Muut käyttäjät puolestaan saavat muistutukset perinteisesti tekstiviestillä.

Googlen PWA-sovelluksista tekemät case-studyt ovat mielenkiintoista luettavaa: AliExpress nosti uusien käyttäjien konversioita 104%, sai sessiossa vierailtujen sivujen määrän tuplautumaan ja nosti sessiokohtaista käyttöaikaa 74%. Brittiläinen vaatebrändi George.com mm. kasvatti palvelunsa latausnopeutta keskimäärin 3,8 -kertaiseksi, kasvatti konversioiden määrää 31% ja sivuvierailujen määrää 20%.

Hienompien palveluiden kehittäminen toki maksaa, mutta kuinka paljon? Se riippuu lähtötasosta ja tavoitteista. Yksinkertaisimmillaan verkkopalveluun lisätään PWA-ominaisuudet nopeasti, mutta eniten palvelusta saadaan hyötyä jos suunnittelu tehdään kunnollisesti ja otetaan ratkaisuista kaikki irti. Perinteinen verkkopalvelu jouduttaneen rakentamaan alusta asti uudelleen, mutta jos sivusto on jo toteutettu SPA-sovelluksena, voidaan pohjatyötä melko varmasti hyödyntää uudistuksessa. 

Mikäli olet uudistamassa nykyistä tai rakentamassa uutta palvelua, kannattaa vähintään harkita modernien tekniikoiden käyttämistä. Vanhoillakin toki pärjää jos palvelu on yksinkertainen tai ei sisällä juurikaan käyttäjätoiminnallisuutta. Annan mielelläni lisätietoja eri ratkaisuvaihtoehdoista.