04.12.2018 | Ville Toni

Käyn tässä postauksessa läpi Progressive Web Apps -käsitettä ja jaan omia ajatuksiani PWA:n parhaista puolista sekä kehityksen aikaisista huomioista. Tarkastelemme myös lyhyesti PWA-sovellusten nykyistä selain- ja laitetukea sekä miten ne tulevat haastamaan natiivit sovellukset.

Mikä ihmeen PWA?

Moni viime aikoina webbimaailmaa seurannut on varmasti kuullut progressiivisista selainapplikaatioista ja kuinka ne jo nyt tarjoavat vaihtoehdon natiiveille sovelluksille. PWA:t ovat tavallisia verkkosivustoja, jotka käyttäytyvät enemmän tai vähemmän kuin natiivit sovellukset. Ne voidaan asentaa puhelimen aloitusnäyttölle ja ne niiden avulla on mahdollista lähettää sovellusilmoituksia. Lisäksi ne toimivat offline-tilassa.

Natiivien sovelluksien eduksi on edelleen luettava parempi suorituskyky, sillä ne eivät vaadi web-selainta toimiakseen. Lisäksi niillä on paremmat edellytykset päästä käsiksi puhelimen sisäisiin rajapintoihin kuten viesteihin ja yhtestietoihin - sekä ehkä tärkeimpänä - muihin asennettuihin sovelluksiin. Selaimet pystyvät tosin jo nyt käyttämään esimerkiksi kameraa ja galleriaa, gps-signaalia ja esimerkiksi laitteen orientaatio- ja kiihtyvyysantureita. Selaintukea parannetaan ja uusia toiminnallisuuksia (mm. Payment Request API) määritetään jatkuvasti.

Verkossa on PWA-sovelluksista suhteellisen paljon teknistä dokumentaatiota ja esimerkkejä. Aihealueen seuraamista kuitenkin hankaloittaa se, että varsinkin Service Worker -spesifikaatio on edelleen työn alla, vaikka sen 1. versio onkin jo julkaistu. Lisäksi laite- ja selaintuki kehittyy jatkuvasti, ja jotta aihe olisi varmasti monijakoinen, pelkästään Google (konseptin kapellimestari vuodesta 2015) on muuttanut PWA:n määrittelyä toistuvasti. Selkeän kokonaiskuvan muodostaminen onkin melkoisen hankalaa.

Omasta mielestäni PWA-sovelluksen tärkeimmät ominaisuudet:

  • App manifest (määrittää sovelluksen värit, logon ja sen käynnistykseen liittyvät asiat)
  • HTTPS-tuki (pakollinen)
  • Offline-tuki kaikille sivuston osioille
    • Minimissään yleinen offline-sivu, joka kertoo että verkkoyhteyttä ei ole.
    • SPA-sovellusten (Single-Page-Application) kohdalla on hyvä varmistaa, että kaikilla sivuilla on oma uniikki osoite ja että niiden perusteella sovellus osaa alustaa oman tilansa.
  • Sivuston latausnopeuden parantaminen mm. välimuististrategioiden avulla
    • Ensimmäisen latauskerran tulee olla nopea.
    • Seuraavilla latauskerroilla vähintään sivuston staattisten osien tulisi latautua lähes välittömästi.
      • Tässä voi käyttää esimerkiksi cache-first -välimuististrategiaa

Huom: Mikään käytetty PWA-ominaisuus ei saa rikkoa sovelluksen ydintoimintoja millään selaimella/laitteella.

Motivaatio

PWA lisää yleisesti verkkosivuston nopeutta, kasvattaa myyntiä ja sitouttaa käyttäjiä. Menestyksekkäitä esimerkkitapauksia pääsee selaamaan PWA Stats -sivustolla. Useimmat toimijat ovat saaneet samaan aikaan:

  • nostettua konversiota
  • vähennettyä latausaikoja
  • kasvatettua sivustolla käytettyä aikaa ja
  • lisättyä mainostuloja.

Asennus

PWA:n asennusta tarjotaan lähtökohtaisesti heti tai jonkin ajan kuluttua siitä kun käyttäjä on saapunut verkkosivustolle. Itse ehdottaisin käyttäjälle sovelluksen asentamista vasta kun käyttäjästä huokuu kiinnostus sovellusta kohtaan. Muussa tapauksessa käyttäjä saattaa jopa ärsyyntyä.

Nykyisen tutkimustiedon varassa tämä vaikuttaa tehokkaimmalta sitouttamisratkaisulta sillä keskimäärin käyttäjät eivät halua käyttää sovelluskauppoja uusien sovellusten lataamiseen.

Sivuston nopeus ja käyttäjien sitouttaminen

Sivuston nopeutta pystytään hienosäätämään erilaisten Service Workerin tarjoamien välimuististrategioiden avulla. Sivusto voi tarjota esimerkiksi välimuistista edellisen jo-ladatun version sivusta, minkä jälkeen taustalla haetaan uusi korvaava versio.

Erilaisia strategioita hyödyntämällä kehittäjillä onkin ensimmäistä kertaa todella hyvät hallintamahdollisuudet resurssien lataamisen, säilömisen ja versioinnin suhteen.

Useimpien verkkosivujen tavoitteena on tarjota käyttäjille jatkuvasti uusiutuvaa sisältöä. PWA-sovellusten avulla sitouttaminen voidaan viedä uudelle tasolle. Esimerkiksi verkkokaupan kohdalla uutuustuotteen julkaisusta lähtevä sovellusilmoitus voi johtaa nopeaan kauppaan.

Asteittainen kehitys

Verkkosivuston muuntaminen progressiivikseksi selainapplikaatioksi kannattaa aloittaa oman sovelluksen käyttäjäryhmille tärkeimmistä ominaisuuksista. Esimerkiksi epävakaissa verkko-olosuhteissa surffaavia käyttäjiä voi hyödyttää eniten offline-ominaisuudet ja välimuististrategioiden käyttöönotto. Perinteiselle blogisivustolle taas paras hyöty saattaa tulla lähettämällä käyttäjille ilmoituksia julkaistuista artikkeleista.

Kaikki selaimet eivät tue PWA-sovellusten hienouksia, joten kehitys kannattaa aloittaa asteittain selainten parhaiten tuetuista ominaisuuksista. Itse aloittaisin tekemällä App Manifest -tiedoston, kytkemällä sivuston HTTPS-tilaan ja rekisteröimällä Service Workerin. Service Workerin ensimmäinen tehtävä voisi olla esimerkiksi offline-sivun tarjoaminen kaikista sivuston osioista, mikäli verkkoyhteyttä ei ole.

Ilmoitukset

Sovellusilmoitukset ovat yksi mielenkiintoisimmista PWA-ominaisuuksista. Hallitusti käytettynä niiden tuottamat hyödyt on hyödynnettävissä useimmissa sovelluksissa. Ilmoitukset toimivat, vaikka selain ei olisikaan aktiivisena, sillä Service Workerit toimivat niin kauan taustalla kunnes k

PWA-sovelluksen tulee kysyä erikseen käyttäjältä lupa näyttää ja lähettää ilmoituksia niin työpöytä- kuin mobiililaitteisiin. Eri selaimet toteuttavat lupaprosessin hieman eri tavoin, mutta yleisiä ohjenuoria ovat mm.:

  • Ilmoitukset vain oikeasti merkityksellisistä asioista - ei spämmiä
  • Kerro lupapyynnössä selkeästi mihin käyttäjä sitoutuu
  • Tee tilauksen tila näkyväksi - näytä mitä tilauksia käyttäjällä on ja tarjoa tapa poistaa tilaus
  • Älä kysy lupaa ilmoituksiin ennen kuin käyttäjä on selannut sivustoa jonkin aikaa.

Mikäli käyttäjä ei vielä luota sovellukseesi ja vastaa lupapyyntöön kieltävästi, voi kieltävä päätös olla lopullisesti selaimen muistissa.

Tuetut laitteet ja selaimat

Kirjoitushetkellä Service Worker -selaintuki on globaalisti n. 85 %, joten voidaan puhua jo hyvin tuetusta kokonaisuudesta.

Yleisesti paras tuki tällä hetkellä löytyy Googlen Chrome-selaimesta ja Android-puhelimista. Esimerkiksi Chrome on edelleen ainoa selain (versiosta 49 lähtien), joka tukee Background Sync -ominaisuutta. Muissa selaimissa se on määrittelyn tai kehityksen alla.

Googlella on vahva edustus Service Workers W3C -spesifikaation teossa, mikä puoltaa Chromen adoptoivan tulevaisuudessakin uusimmat ominaisuudet ensimmäisenä.

IOS-käyttäjien riemuksi uusimmissa iOS-versioissa Service Workerit on tuettuina ja muutenkin Apple on tuntunut lisäävän vauhtia PWA-ominaisuuksien tukemisessa. Maximiliano Firtmanin artikkelissa on hyvä listaus PWA:n tuetuista ominaisuuksista iOS-alustalla ja mm. eroista Androidiin.

Sovelluskaupat

Toistaiseksi PWA-sovelluksia tarjoaa sovelluskaupassaan pelkästään Microsoft. Oman PWA-sovelluksen voi lisätä Microsoft Storeen manuaalisesti, mutta jos applikaatio täyttää tietyt Microsoftin määrittämät kriteerit, Bing-hakukone voi lisätä sen automaattisesti.

Jotta PWA-sovellus olisi löydettävissä, sen tulee sisältää sovelluksen yleisiä tietoja sisältävä manifest.json -tiedosto. Yleisiin tietoihin kuuluvat mm. sovelluksen nimi, kuvaus, värimaailma, ikonit ja muut käynnistysvalinnat.

Yhteenveto

Yleisessä tarkastelussa natiivit sovellukset voittavat ominaisuuksiensa puolesta, mutta natiivius tuo mukanaan myös omat ongelmansa, jotka liittyvät sekä kehityksen aikaisiin (laite-riippuvainen koodi) että julkaisuun (sovelluskaupat, lisensointi, jakelu jne.) liittyviin asioihin.

Kunhan puhelimien eri komponenttirajapintojen tuki saadaan riittävälle tasolle, näen PWA:t vahvoina haastajina natiiveille sovelluksille nopeasti muuttuvassa ja hektisessä bisnesskentässä. Tähän ei välttämättä mene kovin kauaa.

Risut:

  • Speksi ei ole täysin valmis
  • Laite- ja selaintuki kokonaisuudessaan keskinkertainen
  • Ei pääsyä puhelimen sovelluksiin
  • Rajattu tuki puhelimen rajapintojen käyttöön
  • Hitaampi verrattuna natiiviin sovellukseen
  • Ei juurikaan saatavilla sovelluskaupoista

Ruusut:

  • Yksi codebase kaikille laitteille ja selaimille
  • Yksi yhtenäinen standardi tehdä asioita (Notifications API ym.)
  • Olemassa olevat verkkosivustot helposti muunnettavissa PWA:ksi
  • Kehittäjien ei tarvitse opetella alustakohtaisia ohjelmointikieliä
  • Helppo asennus kotinäyttöön
  • Progressiivinen kehitys, voi lisätä ominaisuuksia tarpeen ja resurssien mukaan