Progressive Web App

Kirjoitin muutama vuosi sitten kolmesta tavasta kehittää mobiilisovellus. Tällöin kutsuin yhtä kolmesta tavasta HTML5 web-sovellukseksi. Nyt rakkaalla lapsella on uusi nimi ja uudet kujeet – Progressive Web App.
Mobiilisovelluksilla riittää edelleen kysyntää, mutta havaittavissa on ollut loppukäyttäjien näkökulmasta eräänlainen sovellus ”ähky”. Käyttäjiä on yhä vaikeampi saada asentamaan uusia sovelluksia ja varsinkin käyttämään niitä useammin kuin yhden kerran.
Samaan aikaan mobiili web (tarkoitan tällä mobiililaitteiden selaimella käytettäviä verkkopalveluita sekä toiminnallisuuksia joita nämä mahdollistavat) on jatkanut kehitystään ja kuronut umpeen monia natiivisovellusten etuja. Viimeisimpiä mobiilin webin parhaita käytäntöjä ja teknologioita kutsutaan termillä Progressive Web App tai PWA. En ole vielä törmännyt hyvään suomennokseen, mutta se voisi olla esimerkiksi jotain tämän suuntaista: Edistynyt web-sovellus.

Mikä PWA?

Mikä sitten tekee web-sovelluksesta edistyneen? Web-kehityksessä on kautta sen historian ollut trendejä parhaista käytännöistä, joilla on pyritty siihen että verkkopalvelut toimivat mahdollisimman hyvin mahdollisimman kattavalla valikoimalla päätelaitteita. Ensin oli ”progressive enhancement”, jolla saatiin verkkosivut toimimaan ilman JavaScriptia (sittemmin JavaScriptista on tullut vakio ominaisuus eikä tälle käytännölle ole enää tarvetta). Mobiililaitteiden yleistyessä tuli responsiivisuus ja ”mobile first”, joilla parannettiin sivustojen käytettävyyttä erikokoisilla näytöillä, erityisesti mobiililaitteilla.
Progressive Web App ei ole mikään yksi uusi teknologia vaan se rakentuu olemassaolevien parhaiden käytäntöjen päälle ja lisää muutamia uusia toiminnallisuuksia, joilla web-sovellukset saadaan toimimaan enemmän mobiilisovellusten tyyppisesti. Tämä ei kuitenkaan tarkoita että näistä käytännöistä olisi hyötyä ainoastaan sovellus tyyppisissä web-palveluissa, sillä PWA:n perimmäisenä tavoitteena on luoda web-sovelluksia, jotka ovat turvallisia, laadukkaita ja niissä on hyvä käyttäjäkokemus. Useimmat PWA käytännöt ovatkin tämän hetken webin parhaita käytäntöjä, joista on hyötyä mille tahansa verkkosivustolle. Tästä syystä uutta verkkopalvelua suunniteltaessa kannattaakin ”Miksi PWA?” sijaan kysyä ”Miksi ei PWA?”
En lähde nyt tässä erittelemään sen tarkemmin niitä teknologioita, jotka tekevät web-sovelluksesta PWA:n, koska tästä löytyy jo olemassaolevia artikkeleita jotka käsittelevät näitä melko hyvin. Mainittakoon kuitenkin tärkeimmät ominaisuudet: nopeat latausajat, asennus laitteelle (ikoni kotiruudulle), ilmoitukset (push notifikaatiot) sekä offline käyttö.

Mutta entäs App Store?

Monien mielestä sovellus on saatava sovelluskauppaan, jotta ihmiset löytävät sen. Mutta todellisuudessa kuinka moni ihminen oikeasti löytää sovelluskauppojen miljoonien turhien äppien seasta juuri sinun sovelluksesi? Käytännössä saadaksesi ihmiset asentamaan sovelluksesi, tulee sitä markkinoida. Sovellus pitää löytyä myös Google haulla, ja haun päätteeksi käyttäjä päätyy sovelluskauppaan ja hänen pitää tehdä päätös siitä että haluaako/tarvitseeko hän todella sovelluksen niin että tekee päätöksen asentaa sen laitteensa vähiin käyvään muistiin. Mitä jos sen sijaan käyttäjä päätyisikin hausta suoraan sovellukseen ja hän voisi käyttää sitä saman tien? Jos hän jatkaa sovelluksen käyttämistä, ehdottaa selain hänelle sovelluksen asentamista. Ja vaikka käyttäjä ei sitä heti asentaisikaan, jos hän tarvitsee sitä uudelleen hän löytää sen jälleen haulla jolloin järjestelmä tunnistaa palaavan käytäjän.
Webistä löytyy paljon kertomuksia siitä miten PWA-sovellusten latausajat ovat pienentyneet ja sitä kautta palvelussa vietetty aika sekä erityisesti konversiot ovat kasvaneet suhteessa sekä aiempaan verkkosivustoon että mobiilisovelluksiin verrattuna.
Microsoft on myös juuri avannut pelin PWA-sovellusten tuomisesta sovelluskauppoihin julkaisemalla ensimmäiset PWA-sovellukset Windows 10:lle Microsoft Store:ssa. Nähtäväksi jää seuraavatko Google ja Apple esimerkkiä ja jos seuraavat niin milloin, veikkaisin itse että ainakin Google tulee lisäämään PWA:t Play kauppaan lähitulevaisuudessa.
PWA:n hyödyt eivät siis rajoitu pelkästään mobiilikäyttöjärjestelmiin, vaan niitä voi asentaa myös työpöytäkoneille. Microsoftin lisäksi myös Google on mukana tuomassa web-sovelluksia työpöytäkoneisiin tukemalla PWA-sovellusten asentamista omassa Chrome OS käyttöjärjestelmässään, sekä Chrome selaimen kautta Windowsissa ja Linuxissa.

Miten PWA toimii?

Android puhelimet (ja tabletit) tarjoavat kirjoitushetkellä parhaan tuen PWA-sovelluksille. Androidilla Chrome tunnistaa automaattisesti kun käyttäjä vierailee PWA-sovelluksessa ja ehdottaa käyttäjälle tämän asentamista kotiruudulle mikäli hän käyttää sovellusta tarpeeksi. Kotiruudulle asennettu PWA-sovellus toimii käyttäjän näkökulmasta vastaavasti kuin natiivi sovellus. Se löytyy muiden sovellusten seasta niin kotiruudulta, sovellus valikosta kuin asetuksistakin. Sovellus kuitenkin osaa päivittyä automaattisesti verkkoyhteyden yli, eli sitä ei tarvitse erikseen päivittää niinkuin sovelluskaupasta asennettuja sovelluksia.
Suurin este web-sovellusten maailmanvalloituksen tiellä on eräs laite- ja käyttöjärjestelmävalmistaja nimeltään Apple. iOS ja Mac käyttöjärjestelmät eivät edelleenkään tue kaikkia PWA-sovellusten ominaisuuksia, vaikka edistystä on viimeisimmissä päivityksissä tapahtunut. Toki PWA-sovelluksia voi käyttää myös iOS laitteilla, jotkut ominaisuudet vain eivät ole käytettävissä (esim. push notifikaatiot eli ilmoitukset silloin kun sovellus ei ole laitteella aktiivisesti käytössä) ja toiset toimivat hieman eri tavalla (esim. asentaminen kotiruudulle täytyy aina tehdä valikon kautta itse). Merkit kuitenkin viittaavat siihen että myös Apple on tulossa kunnolla mukaan PWA-sovellusten maailmaan ja PWA-tuki varmasti paranee myös tulevissa päivityksissä.
Perinteiset natiivi- ja hybridisovellukset ovat toki edelleen parempia vaihtoehtoja tietyissä tilanteissa, esimerkiksi jos sovelluksessa tarvitaan 3d-grafiikkaa (kuten peleissä) tai joitain sellaisia mobiililaitteen toiminnallisuuksia joihin ei vielä ole pääsyä web-pohjaisilla sovelluksilla (esim. NFC tai se toimii vain tietyissä laitteissa/selaimissa kuten Bluetooth). Edelleenkään ei siis ole yhtä oikeaa tapaa toteuttaa kaikkia sovelluksia, vaan toteutustapa tulee valita tarpeen mukaan.
Loppuun vielä muutama esimerkki hyvin toteutetusta PWA-sovelluksesta:

• Twitter https://mobile.twitter.com/ (ensimmäisiä korkean profiilin PWA-toteutuksia, vastaava käyttäjäkokemus kuin natiivissa applikaatiossa)
• Instagram https://www.instagram.com/ (vastaava käyttäjäkokemus kuin natiivissa applikaatiossa)
• DEV https://dev.to/ (äärimmäisen nopeasti latautuva sivusto, sisältää sovelluskehitykseen liittyviä artikkeleita)
• HighTide https://hightide.earth/ (esimerkki PWA joka näyttää vuoroveden korkeuden valitussa sijainnissa)

Lisää esimerkkejä PWA toteutuksista ja niillä saavutetuista hyödyistä löytyy esimerkiksi Googlen Case Studies -sivustolta tai tästä PWA-sovelluksia listaavasta sivustosta.