Progresīvās tīmekļa lietotnes (PWA)

Kas ir progresīvās tīmekļa lietotnes jeb PWA?

Progresīvās tīmekļa lietotnes ir natīvo lietotņu un mums zināmo HTML5 balstīto tīmekļa lietotņu tehnoloģisks apvienojums. PWA ir radušās, lai novērstu tehnoloģisko plaisu starp lietotnēm un tīmekļa lapām.

Google ir bijis viens no galvenajiem šāda veida tehnoloģiju izstrādes atbalstītājiem. Lai labāk izprastu tās īpašības, mums jārunā par lietotnēm, kurām jābūt uzticamām, ātrām un saistošām.

Īpašības, kādām jāpiemīt progresīvajām tīmekļa lietotnēm

Lai PWA jēdziens būtu pietiekami skaidrs un izskaidrots, iedziļināsimies būtiskajās īpašībās, kādām šīm tehnoloģijām jāpiemīt.

Protams, mēs runājam vispārīgi. Tālāk katrs uzņēmējdarbības / pakalpojuma modelis pielāgos savus mērķus savas mērķauditorijas vajadzībām.

Ātrums

Laiks ir nauda ne tikai Google, bet arī visiem tiem uzņēmumiem, kur lēna produktu ielāde var likt lietotājiem atteikties no iespējamā pirkuma.

Google jau ilgu laiku uzsver šo priekšnoteikumu. AMP projekta dzimšanai bija tieši šis mērķis, un tagad ātras informācijas piekļuves nepieciešamībai no lietotnēm pievienojas arī PWA.

Mūsdienu lietotājiem nav pacietības; viņi negaida, kamēr vietne pilnībā ielādējas. 53 % lietotāju negaidīs ilgāk par 3 sekundēm, kamēr vietne ielādēsies, kā ziņo Think with Google

Uzticamība

Runājot par uzticamību, mēs domājam vietnes darbības garantijas. Pateicoties tā sauktajiem Service Worker, tīkla savienojuma problēmām nevajadzētu traucēt PWA ielādēties.

Instalējamība

PWA var instalēt, nedodoties uz „Chrome Store", „Apple Store" vai jebkuru citu esošu lietotņu veikalu. Atcerieties, ka tās nav natīvās lietotnes, tāpēc mēs varam tām piekļūt, neejot cauri šiem veikaliem.

Instalēšana darbojas vienkārši kā saīsne; tai nav nepieciešama vieta dažādu failu glabāšanai.

Dažādas ierīces: mobilās un galddatori

Koda bāze ir vienota abām ierīcēm, kas nozīmē, ka atsaucīgā (responsive) dizaina metodes attiecas gan uz mobilajām ierīcēm, gan galddatoriem.

PWA priekšrocības un trūkumi

Dažas priekšrocības jau tika minētas iepriekš, izskaidrojot progresīvo lietotņu īpašības. Taču ir vēl daudz vairāk iemeslu apsvērt šīs tehnoloģijas izmantošanu mūsu uzņēmumā.

• ›Resursu ietaupījums
• ›Nav nepieciešama instalēšana
• ›Ļoti liels ielādes ātrums
• ›Push paziņojumi tieši uz viedtālruņiem
• ›Darbojas visās operētājsistēmās
• ›Uzlabota drošība
• ›Mazāk izstrādes un uzturēšanas darba nekā natīvai lietotnei.
• ›Ekonomiskāka nekā natīvā lietotne.

Trūkumi

• ›Nepieciešams interneta savienojums.
• ›Ne visas pārlūkprogrammas atbalsta PWA.
• ›Liels akumulatora patēriņš

Kas ir Service Worker?

Īsi atgriežoties pie tehniskās puses, mums jārunā par dažiem aspektiem, bez kuriem progresīvās lietotnes nevarētu darboties. Service worker ir skripti, kas darbojas fonā, veicot pieprasījumus tīmekļa lietotnēm, kešatmiņai vai pašam tīklam.

Viena svarīga lieta, kas mums jāzina, ir tā, ka Service Worker var darboties tikai tad, ja jums ir SSL sertifikāts un jūs tos pasniedzat, izmantojot https.

Tagad apskatīsim to visu ar piemēru: BMW vietne un tās PWA.

PWA piemērs: BMW

Es centos uzrakstīt rakstu, neiedziļinoties tehniskajos aspektos, un tagad mēs apskatīsim lietotnes piemēru, kas palīdzēs labāk izprast PWA jēdzienu.

Ja mēs ieejam BMW vietnē, mēs redzam, ka tiem ir ļoti pievilcīgs dizains, kas prioritāti piešķir vizuālajam, taču, neskaitot runas par dizainu, apskatīsim, ar kāda veida vietni mums ir darīšana.

No pirmā acu uzmetiena tā ir „parasta" vietne, taču, ja iedziļināsieties kodā, mēs sagaidīsim pirmo pārsteigumu. Patiešām, tā ir vietne, kas pilnībā izstrādāta ar AMP, ne tikai mobilā versija.

Bet ķersimies pie šodienas jautājuma.

Kad esam vietnē, dosimies uz „Chrome" „pielāgošanas un vadības" joslu.

Kā jūs redzējāt, ir atvēries logs ar BMW vietnes saturu. Salīdzinot abus saturus, mēs redzam, ka tie ir praktiski identiski.

Vietnes attēls pārlūkprogrammā (Chrome)

Vietnes attēls PWA galddatora versijā

BMW izstrādātājiem ir izdevies saglabāt identisku vizuālo izskatu. Kad mēs pieņemam PWA „instalēšanu" savā „Chrome" lietotņu mapē vai pat darbvirsmā (atkarībā no OS; pašlaik es izmantoju MacOS), tiek lejupielādēta saīsne uz PWA.

Ja mūs nomāc lietotņu instalēšana un vēlamies atinstalēt, mums vienkārši jādodas uz mūsu PWA versijas logu, jānoklikšķina labajā pusē tāpat kā „Chrome" un jāizvēlas atinstalēt.

Mobilajā versijā tas ir praktiski līdzīgi. Kad mēs ieejam vietnē ar PWA versiju, mēs saņemam paziņojumu „izveidot saīsni".

Ieejot vietnē ar PWA; mēs redzēsim iespēju izveidot saīsni.

Ja mēs piekrītam, savā mobilās ierīces darbvirsmā redzēsim PWA ikonu.

„DevTools", lai uzzinātu vairāk par PWA

Šajā brīdī es vēlos iedziļināties piemēros, lai izskaidrotu šāda veida lietotņu jēdzienus un īpašības.

Šim nolūkam mēs izmantosim izstrādātāja rīku, ko nodrošina „Chrome" (DevTools). Mēs atveram inspektoru ar labo pogu un dodamies uz „Application" (Lietojumprogramma).

Chrome Devtools

Lietotnes manifests (Web Application Manifest)

Manifests ir neliels JSON fails ar pamata stila aspektiem, ko tas sniedz pārlūkprogrammai, lai izvairītos no pēkšņām izmaiņām.

Manifesta piemērs (JSON)

Service Workers

Kā mēs iepriekš paskaidrojām, tagad mēs varam redzēt, kas tas ir. Mēs redzam JS failu un tajā izmantotos skriptus. Service Worker tiek instalēts pārlūkprogrammā. Mums būs vairāki no citām tīmekļa lietotnēm.

Viena no galvenajām šāda veida koda funkcijām ir nodrošināt, ka vienmēr tiek pasniegta tā pati versija (tas pārvalda kešatmiņu), pat ja mēs atveram citu cilni.

Kā ieviest PWA sistēmā „WordPress"?

Ja mēs esam izstrādājuši savu vietni ar paša kodu, mums būs jāveic diezgan daudz manuālā darba, taču situācija būs pavisam citāda, ja mēs esam izstrādājuši savu vietni sistēmā „WordPress". Šajā gadījumā mūsu rīcībā būs vairāki spraudņi, kas ļaus iespējot PWA tehnoloģiju ar pāris klikšķiem. „SEO Alive" PWA versija patiesībā ir rezultāts tieši šim spraudnim, ko mēs iesakām.

Populārākie spraudņi PWA ieviešanai sistēmā „WordPress".

PWA mārketingā

Tiem no mums, kas strādā mārketingā, progresīvās tīmekļa lietotnes var palīdzēt sasniegt mērķus, kas ir prātā katram mārketinga departamentam, lai izaudzētu zīmolu.

Lojalitāte un pārdošana

Viens no mērķiem, ko daži zīmoli apstrādā vissliktāk. Mēs visi zinām, cik zema iesaiste ir mobilo tālruņu zīmoliem, izturoties pret saviem klientiem, ja minam piemēru.

Push paziņojumi PWA ir viena no darbībām, kas darbojas vislabāk un veicina pārdošanas ģenerēšanu.

Gartner veiktais pētījums par PWA sniedz mums virkni ļoti interesantu statistisko datu par Lancome un Alibaba; Lancome ziņo par 17 % konversiju pieaugumu, 51 % sesiju no mobilajām ierīcēm un 52 % operētājsistēmā „iOS". Alibaba (grupa, kurai pieder Aliexpress) ir uzlabojusi savu konversijas rādītāju par 76 %.

Lai gan mēs runājām par 2 pasaules gigantiem, ir pierādīts, ka lietotnes esība mobilajā tālrunī, kurā ielādes un izpildes laiks nav kavēklis un tiek ievērots labs dizains, palielina konversijas rādītāju.

Noslēgumā mēs varam teikt, ka PWA arvien vairāk izplatās, galvenokārt starp lielajiem zīmoliem. Spānijā mums, iespējams, būs nepieciešams neliels laiks, lai apzinātos šīs tehnoloģijas milzīgo potenciālu, taču drīzāk agrāk nekā vēlāk tā tiks ieviesta.

Jebkurai tehnoloģijai, kas atvieglo navigāciju mobilajā ierīcē, ir liela nozīme; mēs pavadām daudz stundu ar saviem viedtālruņiem, un galu galā piekļuve gan saturam, gan produktiem ir bizness.

Atsauces

• ›Google dokumentācija par PWA