Progressiivinen verkkosovellus ( eng. progressive web app, PWA) on verkkokehityksen tekniikka, joka visuaalisesti ja toiminnallisesti muuttaa sivuston sovellukseksi (mobiilisovellukseksi selaimessa).
Tilastot osoittavat, että 66 % käyttäjistä ei lataa yhtään sovellusta kuukaudessa (comScore-tiedot vuodelta 2014 – keskimäärin kolme kuukautta). Suurimman osan ajastaan - noin 85 % - käyttäjä viettää viidessä suosikkisovelluksessa. Yleensä nämä ovat pikaviestintäpalveluita, sosiaalisia verkostoja, videopalveluita.
Samaan aikaan mobiiliselain ei myöskään ole suurelta osin ensisijainen pääsy Internetiin. ComScoren mukaan älypuhelinten ja tablettien käyttäjät viettivät 87 % ajastaan sovellusten parissa vuonna 2017, kun vastaava luku oli 13 % selaimessa.
PWA on hybridiratkaisu, jonka avulla voit avata sovelluksen mobiiliselaimella. Samaan aikaan alkuperäisen sovelluksen toiminnallisuus säilyy täysin:
PWA-tekniikan loi Microsoft vuonna 2000 ( HTA ), sitten Apple loi oman versionsa HTML-sovelluksista vuonna 2007. Alkuperäisen iPhonen sovellukset kehitettiin verkkoalustalla, ja ne olivat saatavilla Safarissa, macOS:n ja iOS:n selaimessa. Tekniikka ei kuitenkaan onnistunut huonon käyttökokemuksen (huono käyttäjäkokemuksen) vuoksi, ja vuotta myöhemmin App Store ilmestyi käyttöjärjestelmän toisessa versiossa. Samaan aikaan aloitettiin aktiivinen natiivisovellusten kehittäminen, mikä lykkäsi PWA-teknologian kehitystä.
Muutamaa vuotta myöhemmin muut alustat kloonasivat idean, kuten Nokia N9:n MeeGo-selain.
PWA-teknologia saavutti laajan suosion vuonna 2015 Google Chrome -selaimen ominaisuuksien laajentamisen sekä Service Workerin ja Web App Manifestin edistämisen ansiosta. Samaan aikaan suunnittelija Francis Berriman (Frances Berriman) ja Google Chromen insinööri Alex Russell (Alex Russell) loivat termin PWA.
Maaliskuussa 2018 verkkostandardien käyttöönotossa tapahtui merkittäviä muutoksia. iOS 11.3 -päivityksen myötä Apple lisäsi Service Worker -tuen Safarin mobiiliversioon. Samaan aikaan Safariin lisättiin tuki macOS:lle.
Vain kuukausi Applen jälkeen, huhtikuussa 2018, Microsoft puolestaan lisäsi Service Worker -tuen Microsoft Edge -selaimeensa. Lisäksi Windows 10 esitteli mahdollisuuden jakaa PWA:ita Microsoft Storen kautta.
Huhtikuussa 2020 offline-työskentely PWA:n kanssa voi tarjota iOS-, Android-, Windows-, Linux-, macOS- ja Chrome-käyttöjärjestelmän selaimissa Chrome, Safari, Firefox, Edge ja Samsung Internet.
Yksi vaihtoehto on käyttää valmiita ilmaisia avoimen lähdekoodin puitteita . Ionic ja Vue Storefront erottuvat niistä.
Ionic on kehys, jossa on sisäänrakennettu kirjasto vakioelementeistä ja maksullisista laajennuksista. Edustaa SDK :ta . Se sisältää joukot JavaScript- ja CSS -komponentteja, jotka on rakennettu Angular 2 :n , Sassin ja Apache Cordovan päälle .
Vue Storefront on ilmainen ja avoimen lähdekoodin PWA-kehys verkkokaupalle. Kirjoitettu Vue.js : ssä. Siinä on joustavia asetuksia ja mukautumiskykyä, mikä tekee siitä varsin monipuolisen ratkaisun integroitavaksi Pimcore/CoreShopin, BigCommercen, PrestaShopin, Shopwaren tai esimerkiksi Magenton kanssa API :n kautta .
Myös yksi universaaleista ratkaisuista PWA:n toteuttamiseen on Quasar-kehys.
Kehyksen käytön lisäksi voit integroida PWA-teknologiaa laajennuksilla. Jokaisella sisällönhallintajärjestelmällä on oma vakiolaajennus. Tässä tapauksessa sinun on ensin tarkistettava, että sivusto täyttää vaatimukset:
Service worker on JavaScript-tiedosto, joka toimii taustalla erillisenä palveluna. Se ei liity DOM : iin tai verkkosivuihin, se toimii eri säikeessä ja käyttää DOM:ia postMessage API:n avulla.
Käyttäjän näkökulmasta Service Workerin avulla voit suorittaa toimintoja, kuten lähettää push-ilmoituksia ja esilataa sisältöä offline-katselua varten.
Sovelluskuori on virtuaalinen kuori. Kuten alkuperäisen sovelluksen kuori, se ladataan käynnistyessään, ja sitten siihen ladataan verkosta dynaamisia tietoja.
Web App Manifest tarjoaa tietoja sovelluksesta JSON -tekstitiedostossa . On välttämätöntä, että verkkosovellus ladataan ja näytetään visuaalisesti käyttäjälle samalla tavalla kuin natiivisovellus.
Se voi sisältää seuraavat elementit: background_color, kategoriat, kuvaus, dir, näyttö, iarc_rating_id, icons, kieli, nimi, laajuus, kuvakaappaukset, serviceworker, short_name, start_url, theme_color jne. Kaikki ne ovat vastuussa tiedoista, joita käyttäjä näkee yleensä asennuksen jälkeen: nimi, taustaväri, kuvakkeen luominen älypuhelimen näytölle jne.
Push Notifications on tekniikka push - ilmoitusten lähettämiseen .
Lisäksi PWA edellyttää, että kaikki sivuston resurssit siirretään HTTPS :n kautta .
PWA yhdistää alkuperäisen sovelluksen ominaisuudet ja selaimen toiminnot, jolla on etunsa:
PWA-tekniikka ei ole universaali, ja sillä on useita haittoja:
Verkkokaupat käyttävät aktiivisesti PWA:ta.
Yli 60 % maailman verkkokaupan vähittäismyynnistä tapahtuu verkkokanavien kautta. Vuoteen 2021 mennessä tämän indikaattorin odotetaan kasvavan 73 prosenttiin ( Statistan mukaan ).
PWA tarjoaa mahdollisuuden työskennellä verkkokaupan kanssa offline-tilassa ja lisätä konversioita istunnon jatkuvuuden ansiosta.
PWA:n avulla käyttäjä voi hallita push-ilmoituksia, kirjoittaa "Oma tili" yhdellä napsautuksella, maksaa ostoksia pankkikorteilla tai Apple Pay- ja Google Pay -järjestelmillä.
Käyttöönoton helppous riippuu siitä, käyttääkö verkkokauppa avoimen lähdekoodin alustaa. SaaS-ratkaisut vaativat mukautetun PWA-kehityksen toimittajalta.
Yksi PWA-toteutukseen käytettävissä olevista alustoista on Magento CMS. PWA-tekniikka on yleistynyt ei niin kauan sitten, mutta kokemusta on jo saatu PWA:n integroinnista Magentoon.
Pääsääntöisesti nopeutetussa toteutuksessa käytetään sisäänrakennettua ratkaisua - PWA Studio. Siihen ei kuitenkaan ole vielä otettu käyttöön SSR (server-side rendering) -tekniikkaa, joka antaisi hakukoneelle valmiin sivun pyynnöstä. Tässä tapauksessa Vue Storefrontin käyttö on mahdollista. Hakurobotille Vue Storefrontin sivu näyttää samalta kuin tavallinen sivusto – tämä on tärkeää hakukoneoptimoinnin kannalta.
Aloittava SWEETY tarjosi mikroyrityksille täysin ilmaisen alustan, jossa jokainen voi luoda oman PWA SPA -sivustonsa. Tässä Reactin avulla rakennetussa rakentajassa on sisäänrakennettuja ominaisuuksia aloitussivun ja verkkokaupan luomiseen. Rakentajaan saapunut projekti voidaan myöhemmin asentaa omalle isännöinnille.
Starbucks-ketju on kehittänyt PWA:n tilausten keräämiseen tavallisen mobiilisovelluksen lisäksi. Lähes samalla käyttöliittymällä PWA:n koko oli 99,84 % pienempi, mikä teki siitä suositumman käyttäjien keskuudessa. Tämän seurauksena mobiilin Internetin kautta tehtyjen tilausten määrä on kaksinkertaistunut ja lähes sama kuin työpöytätilausten määrä.[ mitä? ] .
PWA:n luominen on tuonut menestystä myös AliExpressille. Uusien käyttäjien tulosprosentti nousi 104 %. PWA-toiminto auttoi heitä myös tuottamaan kaksi kertaa enemmän sivuosumia istuntoa kohden. Istuntoaika kasvoi keskimäärin 74 % kaikilla selaimilla ( developers.google.com mukaan ).
PWA:ita käyttävät myös tunnetut yritykset, kuten Twitter , Nikkei , Lancôme , Forbes ja muut.
PWA-kehitykseen erikoistuneita venäläisiä yrityksiä ovat INDIFICA , GetGain , SDBG .
PWA:t on liitetty useisiin tietosuojaongelmiin vuosien varrella. Tämä on johtanut siihen, että Apple on estänyt useita PWA-ominaisuuksia Safarissa.
Muut selaimet, kuten Chrome ja Firefox, tukivat kuitenkin edelleen aktiivisesti PWA-kehitystä. Mozilla julkaisi äskettäin Firefox 85:n, joka luopui tärkeästä työpöydän PWA-ominaisuudesta.