Elämme yhä nopeammassa, dynaamisemmassa ja alati muuttuvassa maailmassa. Ihmisiin vaikuttavat inkrementaaliset innovaatiot seuraavat toisiaan, ja yhä selkeämmin keskitytään:

• suorituskykyyn, ajatellaanpa yhä tehokkaampia laitteita, joita käytämme päivittäin, tai tehtäviä, jotka mahdollistavat nopeamman tekemisen;
• kokemus, jotta voidaan poistaa kitkaa ohjelmiston/laitteiston käytöstä;
• älykkyys, algoritmeilla, jotka nykyään työskentelevät ennakoivassa perspektiivissä.

Juuri tähän suuntaan, keskittyen ensisijaisesti suorituskykyyn ja loppukäyttäjän käyttökokemukseen, menee Progressive Web App (PWA) -kehitys, ratkaisu, joka haluaa yhdistää natiivien sovellusten ja web-teknologian parhaat puolet.

Progressiivinen web-sovellus (Progressive Web App, PWA) on sovellus, joka käyttää nykyaikaisia web-ominaisuuksia tarjotakseen käyttäjille natiivin sovelluksen kaltaisen (ellei jopa paremman) käyttökokemuksen kuin natiivin sovelluksen.

Perinteisten sovellusten tapaan progressiiviset web-sovellukset ovat hybridi tavallisten web-sivujen ja mobiilisovellusten välillä. Termi “progressiivinen” viittaa siihen, että niissä otetaan käyttöön uusia ominaisuuksia, ja käyttäjäkokemuksen kannalta ne mielletään aluksi tavallisiksi verkkosivuiksi, mutta ne käyttäytyvät vähitellen enemmän mobiilisovellusten tavoin, muun muassa monialustaisina.

Progressiivisen verkkosovelluksen hyvät ja huonot puolet

Pääpiirteet ovat:

• Progressiivinen – Ne toimivat jokaiselle käyttäjälle valitusta selaimesta riippumatta, koska ne on rakennettu lähtökohtaisesti progressiivisen parantamisen periaatteilla.
• Responsiiviset – Ne mukautuvat erilaisiin näyttökokoihin: työpöytä-, mobiili- ja tablettikokoihin tai myöhemmin saataville tuleviin mittoihin.
• Sovelluksen kaltaiset – Ne käyttäytyvät käyttäjän kanssa vuorovaikutuksen ja navigoinnin osalta kuin natiivit sovellukset.
• Päivitetyt – Tiedot ovat aina ajan tasalla palvelutyöntekijöiden tarjoaman tietojen päivitysprosessin ansiosta.
• Turvallisia – Paljastetaan HTTPS-protokollan kautta, jotta yhteys ei voi näyttää tietoja tai muuttaa sisältöä.
• Hakukelpoisia – Tunnistetaan “sovelluksiksi”, ja hakukoneet indeksoivat ne.
• Uudelleenaktivoitavissa – Tekevät sovelluksen uudelleenaktivoimisen helpoksi esimerkiksi verkkoilmoitusten kaltaisten ominaisuuksien ansiosta.
• Asennettavissa – Niiden avulla käyttäjä voi “tallentaa” hyödyllisimpinä pitämänsä sovellukset vastaavalla kuvakkeella matkapuhelimensa päätelaitteen näytölle (aloitusnäyttö) joutumatta kohtaamaan kaikkia sovelluskaupan käyttöön liittyviä vaiheita ja ongelmia.
• Linkitettävissä – Jaetaan helposti URL-osoitteen kautta ilman monimutkaisia asennuksia.
• Offline – Jälleen kerran kyse on siitä, että käyttäjä asetetaan etusijalle kaikessa, ja näin voidaan välttää tavanomaiset vikailmoitukset heikon tai puuttuvan yhteyden tapauksessa. PWA:t perustuvat kahteen erityispiirteeseen: ensinnäkin sovelluksen “luurankoon”, joka muistuttaa sivurakennetta, vaikka sen sisältö ei vastaisikaan, ja sen elementteihin kuuluvat otsikko, sivun ulkoasu sekä kuvitus, joka viestii sivun latautumisesta.

Heikkoudet viittaavat:

• iOS-tuki versiosta 11 alkaen.3:sta alkaen;
• laitteen akun suurempi käyttö;
• kaikki laitteet eivät tue kaikkia PWA-ominaisuuksia (sama puhe iOS- ja Android-käyttöjärjestelmille);
• ei ole mahdollista luoda voimakasta uudelleenkytkentää iOS-käyttäjille (URL-skeema, tavanomaiset verkkoilmoitukset);
• tuki offline-toteutukselle on kuitenkin rajallinen;
• läsnäolon puute kaupoissa (ei ole mahdollisuutta hankkia liikennettä kyseisestä kanavasta);
• ei ole “valvontaelintä” (kuten kaupat) ja hyväksymisprosessia;
• rajoitettu pääsy joihinkin laitteiden laitteistokomponentteihin;
• pieni joustavuus käyttäjille suunnatun “erikoissisällön” osalta (esim. kanta-asiakasohjelmat, kanta-asiakkuus jne.).).

Manifestin ja palvelutyöläisten merkitys

Nykyaikaisten selainten uudet ominaisuudet, joiden avulla PWA:t pystyvät tarjoamaan parhaan mahdollisen tarjouksen, ovat “manifestaatti” (engl. manifest) ja “palvelutyöläiset”.

Manifest
Se on yksinkertainen JSON-tiedosto, jossa määritellään PWA:n perusparametrit, joilla ohjataan sitä, miten sovelluksen tulisi näyttäytyä käyttäjälle, ja määritellään sen ulkoasu käynnistyksen yhteydessä: kuvakkeet, muut perusominaisuudet, kuten värit, fontit, näytön suuntaus ja mahdollisuus asentua aloitusnäyttöön.

Palvelutyöntekijät
Ne ovat varsinainen avain edistyneisiin kokemuksiin, joita PWA voi tarjota. Palvelutyöntekijä on skripti, jota selain ajaa taustalla, erillään verkkosivusta, käyttääkseen toimintoja, jotka eivät vaadi verkkosivua tai käyttäjän vuorovaikutusta.

Tänä päivänä SW:t sisältävät jo ominaisuuksia, kuten push-ilmoitukset ja taustasynkronointi. Tulevaisuudessa ne tukevat sellaisia toimintoja kuin jaksottainen synkronointi tai geofencing. Tärkein toiminto on kyky siepata ja hallita verkkopyyntöjä, mukaan lukien vastausten välimuistin ohjelmallinen hallinta. Kyseessä on API, joka tukee offline-kokemuksia antamalla kehittäjille kokemuksen täydellisen hallinnan.

Palvelutyöntekijöiden tuen lisäämisen myötä iOS:n uusimmassa versiossa Apple on avannut PWA:ille mahdollisuuden tavoittaa kaikin puolin koko mobiilimarkkinat.

Mitkä ovat PWA:n käytetyimpiä tekniikoita?

Progressiivisen web-sovelluksen luomiseksi on olemassa useita tekniikoita, jotka pohjautuvat pääosin JavaScriptiin ja joilla on erilaiset ominaisuudet.

Tärkeimpien joukossa meillä on mm:

• React
  Tehokas JavaScript-kirjasto dynaamisten ja modernien käyttöliittymien rakentamiseen
• Polymer
  Komponenttien yhdistelmä, työkaluja ja malleja, jotka on suunniteltu PWA:n luomiseen
• Angular
  Javaskriptikehys dynaamisten verkkosovellusten luomiseen, joka käyttää HTML:ää mallinnuskielenä
• Ionic
  Javaskriptikehys tehokkaiden sovellusten luomiseen for useille alustoille peruskoodin avulla
• Nopeutetut mobiilisivut (AMP)
  Avoimen lähdekoodin hanke verkkosivujen suorituskyvyn parantamiseksi

Miten valita PWA:n tai natiiviratkaisun välillä

Valinnan hetki koittaa, minkä ratkaisun ottaa käyttöön?

PWA:n kehittäminen kannattaa valita silloin, kun:

• Sovellus on jaettava helposti entistä laajemmalle käyttäjäkunnalle
• Käytettävissä oleva budjetti ei ole suuri
• Käyttöönottoon on vain vähän aikaa
• Tarkka indeksointi hakukoneissa on tärkeää
• Yhteensopivuus eri alustojen kanssa on tarpeen
• Määrällisesti enemmän päivityksiä tarvitaan tiukassa aikataulussa

Natiivisovelluksen kehittäminen on päinvastoin suositeltavampaa silloin, kun:

• Sovelluksen on liikuttava kaupoissa
• Nopeus ja reagointikyky ovat sovelluksen menestyksen avainkohtia
• Sovellus edellyttää laitteen laitteiston ominaisuuksien tärkeää käyttöä
• Liiketoimintamalli perustuu esimerkiksi latauskohtaisiin kustannuksiin ja/tai IAP:hen (In App Purchase)
• Sovellus on integroitava muiden kolmansien osapuolten sovellusten kanssa

Asennusprosessin eroavaisuudet: PWA vs. natiivisovellus

Natiivisovellusten yleinen asennusprosessi noudattaa tätä kulkua:

• Pääsy viitekauppaan (App Store tai Google Play)
• Sovelluksen haku
• Klikkaa “Asenna”
• Erilaisten valtuutusten hyväksyminen
• Sovelluksen avaaminen ja käynnistäminen
• Sovelluksen käyttö

Vertailussa PWA:n asennukseen sisältyy:

• Käynti sivustolle
• Lisääminen laitteen aloitusnäyttöön (valinnainen)
• Sovelluksen avaaminen
• Sovelluksen käyttäminen

Progressiivisen web-sovelluksen pääesimerkkejä

Käyttäjien laitteillaan käyttämien PWA:iden “erottautumisesta” on jo monia esimerkkejä, ja tärkeimpinä raportoimme:

Pinterest

Tietääksesi lisää:
Addy Osmani on Medium > A Pinterest Progressive Web App Performance Case Study

Instagram

Nykymuotoinen PWA on hyvin samankaltainen kuin natiivisovellus, ja siinä on kaikki tärkeimmät vuorovaikutusominaisuudet ilmoituksista Storiesin katseluun.

Google Maps

Tietää lisää:
The Next Web > Googlen kevyt Maps Go on vain progressiivinen web-sovellus

Tinder

8471>>

Tietää enemmän:
Addy Osmani on Medium > A Progressive Tinder Web App Performance Case Study

Twitter Lite

Tietääksesi lisää:
Twitter Blog > How we built Twitter Lite
Google Developers > Twitter Lite PWA Significantly Increases Engagement and Reduces Data Usage
Paul Armstrong on Medium > Twitter Lite and High Performance React Progressive Web Apps at Scale

YouPorn

Päätöksellä PWA:iden käyttämiseen halutaan lähinnä ohittaa rajoitukset, joita Apple ja Google asettavat kaupoissa esiintyvälle pornografiselle sisällölle, sekä paremman käyttäjäkokemuksen varmistamiseksi.

To know more:
YouPorn Blog > YouPorn App Experience
VentureBeat > YouPorn goes progressive with new mobile web apps for Android and iOS

Joitakin viitteitä progressiivisen web-sovelluksen teeman syventämiseksi

Googlen progressiivinen web-sovellus

https://developers.google.com/web/progressive-web-apps/

Googlen PWA-tarkistuslista > https://developers.google.com/web/progressive-web-apps/Tarkistusluettelo

Appscopen sovellusalueeseen, hakemisto progressiivisille verkkosovelluksille (PWA) > https://appsco.pe/

Onko tulevaisuus siis “progressiivinen”?

Vastaus on, kuten aina, riippuu. Päätös PWA:n kehittämisestä seuraa analyysejä ja pohdintoja, joita on tehtävä aika ajoin, projektista toiseen, käyttäjästä toiseen. Päinvastoin, voisimme lisätä vielä yhden monimutkaisuuden: sijoittumisen hakukoneissa: olemmeko onnistuneet kaikessa oikein vai kannibalisoimmeko verkkosivujemme liikennettä?

Tekijöitä, jotka johtavat valintaan, on monia, kuten tässä tutkimuksessa ennakoitiin, joten ei ole olemassa määriteltyä ja vakioreseptiä, vaan se, joka antaa asiayhteyden, sopii oikein strategiaan ja tavoitteisiin. Puhutaan siitä yhdessä.