Progressiivsed veebirakendused (PWA)

Mis on progressiivsed veebirakendused ehk PWA-d?

Progressiivsed veebirakendused on natiivrakenduste ja meile tuttavate HTML5-põhiste veebirakenduste tehnoloogiline kombinatsioon. PWA-d on saabunud selleks, et ületada tehnoloogiline lõhe rakenduste ja veebilehtede vahel.

Google on olnud üks peamisi seda tüüpi tehnoloogia arendamise eestkõnelejaid. Selle omaduste paremaks mõistmiseks peame rääkima rakendustest, mis peavad olema usaldusväärsed, kiired ja kaasahaaravad.

Omadused, mis peavad progressiivsetel veebirakendustel olema

Et PWA mõiste oleks piisavalt selge ja lahti seletatud, süveneme olulistesse omadustesse, mis neil tehnoloogiatel peavad olema.

Muidugi räägime üldiselt. Sealt edasi kohandab iga äri-/teenusemudel oma eesmärgid oma sihtrühma vajadustega.

Kiirus

Aeg on raha mitte ainult Google'i jaoks, vaid kõigi nende ettevõtete jaoks, kus toodete aeglane laadimine võib panna kasutajad võimalikust ostust loobuma.

Google on seda eeldust juba pikka aega rõhutanud. AMP projekti sünnil oli just see eesmärk, ja nüüd liituvad PWA-d vajadusega pääseda kiiresti rakendustest teabele juurde.

Tänapäeva kasutajatel pole kannatust; nad ei oota, kuni sait täielikult laadib. 53 % kasutajatest ei oota veebisaidi laadimist kauem kui 3 sekundit, nagu teatab Think with Google

Usaldusväärsus

Kui räägime usaldusväärsusest, peame silmas saidi töögarantiisid. Tänu niinimetatud Service Worker'itele ei tohiks võrguühenduse probleemid takistada PWA laadimist.

Paigaldatavus

PWA-sid saab paigaldada ilma, et oleks vaja minna „Chrome Store'i", „Apple Store'i" või mõnda muusse olemasolevasse rakenduspoodi. Pidage meeles, et need ei ole natiivrakendused, seega saame neile ligi pääseda ilma neid poode läbimata.

Paigaldamine toimib lihtsalt otseteena; see ei vaja ruumi erinevate failide salvestamiseks.

Erinevad seadmed: mobiil ja lauaarvuti

Koodibaas on mõlema seadme vahel ühtne, mis tähendab, et responsiivse disaini tehnikad kehtivad nii mobiili kui ka lauaarvuti puhul.

PWA-de eelised ja puudused

Mõned eelised on juba eespool progressiivsete rakenduste omadusi selgitades mainitud. Kuid on veel palju rohkem põhjuseid kaaluda selle tehnoloogia kasutamist meie äris.

• ›Ressursside kokkuhoid
• ›Paigaldamist pole vaja
• ›Väga suur laadimiskiirus
• ›Push-teavitused otse nutitelefonidesse
• ›Töötab kõigis operatsioonisüsteemides
• ›Parem turvalisus
• ›Vähem arendus- ja hooldustööd kui natiivrakendusel.
• ›Ökonoomsem kui natiivrakendus.

Puudused

• ›Nõuab internetiühendust.
• ›Kõik brauserid ei toeta PWA-sid.
• ›Suur aku tarbimine

Mis on Service Worker?

Naastes lühidalt tehnilise poole juurde, peame rääkima teatud aspektidest, ilma milleta progressiivsed rakendused ei saaks toimida. Service worker'id on skriptid, mis töötavad taustal, tehes päringuid veebirakendustele, vahemälule või võrgule endale.

Üks oluline asi, mida peaksime teadma, on see, et Service Worker'id saavad toimida ainult siis, kui teil on SSL-sertifikaat ja te pakute neid https kaudu.

Nüüd vaatame kõike näite abil: BMW veebisait ja selle PWA.

PWA näide: BMW

Püüdsin kirjutada artikli tehnilistesse aspektidesse süvenemata, ja nüüd vaatame rakenduse näidet, mis aitab PWA mõistet paremini mõista.

Kui siseneme BMW veebisaidile, näeme, et neil on väga atraktiivne disain, mis seab esikohale visuaalse, kuid lisaks disainist rääkimisele vaatame, millist tüüpi veebisaidiga on tegemist.

Pealtnäha on see „tavaline" veebisait, kuid kui kaevate koodi sisse, saame oma esimese üllatuse. Tõepoolest, see on veebisait, mis on täielikult arendatud AMP-is, mitte ainult mobiiliversioon.

Kuid asugem tänase teema juurde.

Kord juba veebisaidil olles läheme „Chrome'i" „kohanda ja halda" ribale.

Nagu võisite näha, on avanenud aken BMW veebisaidi sisuga. Mõlemat sisu võrreldes näeme, et need on praktiliselt identsed.

Veebisaidi pilt brauseris (Chrome)

Veebisaidi pilt PWA lauaarvuti versioonis

BMW arendajatel on õnnestunud säilitada identne visuaalne välimus. Kui nõustume PWA „paigaldamisega" oma „Chrome'i" rakenduste kausta või isegi töölauale (olenevalt operatsioonisüsteemist; kasutan praegu MacOS-i), on alla laaditud otsetee PWA-le.

Kui rakenduste paigaldamine meid koormab ja soovime desinstallida, peame lihtsalt minema oma PWA versiooni aknasse, klõpsama paremal küljel, nagu „Chrome'iski", ja valima desinstallimise.

Mobiiliversioonis on see praktiliselt sarnane. Kui siseneme PWA versiooniga veebisaidile, saame teavituse „loo otsetee".

PWA-ga veebisaidile sisenedes näeme võimalust luua otsetee.

Kui nõustume, näeme oma mobiili töölaual PWA ikooni.

DevTools, et PWA-de kohta rohkem teada saada

Selles etapis soovin süveneda näidetesse, et selgitada seda tüüpi rakenduste mõisteid ja omadusi.

Selleks kasutame arendajatööriista, mida „Chrome" pakub (DevTools). Avame inspektori parema nupuga ja läheme jaotisse „Application" (Rakendus).

Chrome Devtools

Rakenduse manifest (Web Application Manifest)

Manifest on väike JSON-fail põhiliste stiiliaspektidega, mille see brauserile edastab, et vältida järske muutusi.

Manifesti näide (JSON)

Service Workers

Nagu varem selgitasime, saame nüüd näha, millega on tegemist. Näeme JS-faili ja selles kasutatavaid skripte. Service Worker paigaldatakse brauserisse. Meil on neid mitu teistest veebirakendustest.

Üks seda tüüpi koodi peamisi funktsioone on tagada, et alati serveeritakse sama versioon (see haldab vahemälu), isegi kui avame teise vahekaardi.

Kuidas rakendada PWA-d WordPressis?

Kui oleme oma veebisaidi arendanud oma koodiga, tuleb meil teha üsna palju käsitsitööd, kuid olukord on hoopis teistsugune, kui oleme oma veebisaidi arendanud WordPressis. Sel juhul on meie käsutuses mitu pluginat, mis võimaldavad PWA tehnoloogia paari klõpsuga sisse lülitada. „SEO Alive'i" PWA versioon on tegelikult just selle plugina tulemus, mida me soovitame.

Populaarseimad pluginad PWA rakendamiseks WordPressis.

PWA-d turunduses

Neile meist, kes töötavad turunduses, saavad progressiivsed veebirakendused aidata saavutada eesmärke, mida iga turundusosakond silmas peab, et brändi kasvatada.

Lojaalsus ja müük

Üks eesmärke, mida mõned brändid kõige halvemini käsitlevad. Me kõik teame, kui madal on mobiiltelefonibrändide kaasatus oma klientidega suheldes, kui tuua näide.

Push-teavitused PWA-des on üks paremini toimivaid tegevusi ja aitavad kaasa müügi genereerimisele.

Gartner läbi viidud uuring PWA-de kohta annab meile hulga väga huvitavaid statistilisi andmeid Lancome ja Alibaba kohta; Lancome teatab 17 % konversioonide kasvust, 51 % mobiilseadmete seanssidest ja 52 % iOS-is. Alibaba (grupp, kuhu kuulub Aliexpress) on parandanud oma konversioonimäära 76 %.

Kuigi rääkisime 2 globaalsest hiiglasest, on tõestatud, et rakenduse olemasolu telefonis, kus laadimis- ja käivitusaeg ei ole takistuseks ning kus järgitakse head disaini, suurendab konversioonimäära.

Kokkuvõtteks võime öelda, et PWA-d levivad üha enam, peamiselt suurte brändide seas. Hispaanias läheb meil ilmselt veidi aega, et mõista selle tehnoloogia tohutut potentsiaali, kuid varem või hiljem see rakendatakse.

Igal tehnoloogial, mis hõlbustab mobiilset navigeerimist, on suur tähtsus; veedame oma nutitelefonidega palju tunde, ja lõppkokkuvõttes on juurdepääs nii sisule kui ka toodetele äri.

Viited

• ›Google'i dokumentatsioon PWA-de kohta