Progresyviosios žiniatinklio programėlės (PWA)

Kas yra progresyviosios žiniatinklio programėlės (PWA)?

Progresyviosios žiniatinklio programėlės – tai natyviųjų programų ir mums pažįstamų HTML5 pagrindu veikiančių žiniatinklio programų technologinis derinys. PWA atsirado tam, kad panaikintų technologinį atotrūkį tarp programėlių ir tinklalapių.

„Google" yra vienas pagrindinių šios technologijos kūrimo skatintojų. Kad geriau suprastume jos savybes, turime kalbėti apie programas, kurios privalo būti patikimos, greitos ir įtraukiančios.

Savybės, kurias privalo turėti progresyviosios žiniatinklio programėlės

Kad PWA sąvoka taptų pakankamai aiški ir paaiškinta, panagrinėkime esmines savybes, kurias šios technologijos privalo turėti.

Žinoma, kalbame bendrais bruožais. Toliau kiekvienas verslo / paslaugos modelis pritaikys savo tikslus prie savo tikslinės auditorijos poreikių.

Greitis

Laikas – pinigai ne tik „Google", bet ir visiems tiems verslams, kuriuose lėtas produktų įkėlimas gali priversti vartotojus atsisakyti galimo pirkinio.

„Google" jau seniai pabrėžia šią prielaidą. AMP projekto gimimas turėjo būtent šį tikslą, o dabar prie greito informacijos pasiekimo iš programų poreikio prisijungia ir PWA.

Šiandienos vartotojai neturi kantrybės; jie nelaukia, kol svetainė visiškai įsikraus. 53 % vartotojų nelauks ilgiau nei 3 sekundes, kol svetainė įsikraus, kaip teigia Think with Google

Patikimumas

Kalbėdami apie patikimumą, turime omenyje svetainės veikimo garantijas. Dėl vadinamųjų Service Worker'ių tinklo ryšio problemos neturėtų sutrukdyti PWA įsikrauti.

Įdiegiamumas

PWA galima įdiegti nesikreipiant į „Chrome Store", „Apple Store" ar bet kurią kitą esamą programėlių parduotuvę. Atminkite, kad tai nėra natyviosios programos, todėl jas galime pasiekti neeidami per šias parduotuves.

Diegimas veikia paprasčiausiai kaip nuorodos šaukinys; jam nereikia vietos skirtingiems failams saugoti.

Skirtingi įrenginiai: mobilieji ir staliniai

Kodo bazė yra vieninga abiem įrenginiams, o tai reiškia, kad reaguojančiojo (responsive) dizaino metodai taikomi tiek mobiliesiems, tiek staliniams įrenginiams.

PWA privalumai ir trūkumai

Kai kurie privalumai jau buvo paminėti aukščiau aiškinant progresyviųjų programų savybes. Tačiau yra daug daugiau priežasčių apsvarstyti šios technologijos naudojimą savo versle.

• ›Išteklių taupymas
• ›Nereikia diegti
• ›Labai didelis įkėlimo greitis
• ›Tiesioginiai push pranešimai į išmaniuosius telefonus
• ›Veikia visose operacinėse sistemose
• ›Padidintas saugumas
• ›Mažiau kūrimo ir priežiūros darbų nei natyvioji programa.
• ›Ekonomiškesnė nei natyvioji programa.

Trūkumai

• ›Reikalingas interneto ryšys.
• ›Ne visos naršyklės palaiko PWA.
• ›Didelės baterijos sąnaudos

Kas yra Service Worker?

Trumpam grįžtant prie techninės pusės, turime aptarti tam tikrus aspektus, be kurių progresyviosios programos negalėtų veikti. Service worker'iai yra fone veikiantys scenarijai, kurie siunčia užklausas žiniatinklio programoms, podėliui (cache) arba pačiam tinklui.

Vienas svarbus dalykas, kurį turėtume žinoti, yra tas, kad Service Worker'iai gali veikti tik tuomet, jei turite SSL sertifikatą ir pateikiate juos per https.

Dabar pažiūrėkime viską su pavyzdžiu: BMW svetainė ir jos PWA.

PWA pavyzdys: BMW

Stengiausi parašyti straipsnį nesigilindamas į techninius aspektus, o dabar pažiūrėsime programos pavyzdį, kuris padės geriau suprasti PWA sąvoką.

Jei įeisime į BMW svetainę, pamatysime, kad jie turi labai patrauklų dizainą, prioritetą teikiantį vizualumui, tačiau, be kalbų apie dizainą, pažiūrėkime, su kokio tipo svetaine turime reikalą.

Iš pažiūros tai „įprasta" svetainė, bet jei pasigilinsite į kodą, sulauksime pirmosios staigmenos. Iš tiesų tai svetainė, visiškai sukurta su AMP, ne tik mobilioji versija.

Bet grįžkime prie šiandienos temos.

Kartą jau būdami svetainėje, eikime į „Chrome" „tinkinimo ir valdymo" juostą.

Kaip galėjote pastebėti, atsivėrė langas su BMW svetainės turiniu. Palyginę abu turinius, matome, kad jie praktiškai identiški.

Svetainės vaizdas naršyklėje (Chrome)

Svetainės vaizdas PWA staliniame kompiuteryje

BMW kūrėjams pavyko išlaikyti identišką vizualinę išvaizdą. Kai priimame PWA „diegimą" į savo „Chrome" programų aplanką ar net į darbalaukį (priklausomai nuo OS; šiuo metu naudoju MacOS), atsisiunčiamas PWA šaukinys.

Jei mus slegia programėlių diegimas ir norime jas pašalinti, tereikia nueiti į savo PWA versijos langą, spustelėti dešinėje pusėje, kaip ir „Chrome", ir pasirinkti pašalinti.

Mobiliojoje versijoje viskas praktiškai panašiai. Kai įeiname į svetainę su PWA versija, gauname pranešimą „sukurti šaukinį".

Įeinant į svetainę su PWA; matysime galimybę sukurti šaukinį.

Jei sutiksime, savo mobiliojo darbalaukyje pamatysime PWA piktogramą.

„DevTools" – daugiau sužinoti apie PWA

Šiame etape noriu pasigilinti į pavyzdžius, kad paaiškinčiau šio tipo programų sąvokas ir savybes.

Tam naudosime kūrėjo įrankį, kurį teikia „Chrome" (DevTools). Inspektorių atveriame dešiniuoju mygtuku ir einame į „Application" (Programa).

Chrome Devtools

Programos manifestas (Web Application Manifest)

Manifestas – tai nedidelis JSON failas su pagrindiniais stiliaus aspektais, kuriuos jis pateikia naršyklei, kad būtų išvengta staigių pokyčių.

Manifesto pavyzdys (JSON)

Service Workers

Kaip paaiškinome anksčiau, dabar galime pamatyti, kas tai yra. Matome JS failą ir jame naudojamus scenarijus. Service Worker įdiegiamas naršyklėje. Turėsime kelis iš kitų žiniatinklio programų.

Viena pagrindinių šio tipo kodo funkcijų yra užtikrinti, kad visada būtų pateikiama ta pati versija (jis valdo podėlį), net jei atveriame kitą kortelę.

Kaip įdiegti PWA „WordPress" sistemoje?

Jei savo svetainę sukūrėme naudodami savo pačių kodą, teks atlikti nemažai rankinio darbo, tačiau situacija bus visiškai kitokia, jei svetainę sukūrėme „WordPress" sistemoje. Tokiu atveju turėsime keletą papildinių, kurie leis įjungti PWA technologiją keliais paspaudimais. Tiesą sakant, „SEO Alive" PWA versija yra būtent šio papildinio, kurį rekomenduojame, rezultatas.

Populiariausi papildiniai PWA įdiegti „WordPress" sistemoje.

PWA rinkodaroje

Tiems, kurie dirbame rinkodaros srityje, progresyviosios žiniatinklio programėlės gali padėti pasiekti tikslus, kuriuos turi omenyje kiekvienas rinkodaros skyrius, siekiantis auginti prekės ženklą.

Lojalumas ir pardavimai

Vienas prasčiausiai kai kurių prekių ženklų išnaudojamų tikslų. Visi žinome, kokį menką įsitraukimą rodo mobiliųjų telefonų prekių ženklai bendraudami su savo klientais, jei paimtume pavyzdį.

Push pranešimai PWA yra vieni geriausiai veikiančių veiksmų ir prisideda prie pardavimų generavimo.

Gartner atliktas tyrimas apie PWA pateikia mums keletą labai įdomių statistinių duomenų apie Lancome ir Alibaba; Lancome praneša apie 17 % konversijų padidėjimą, 51 % iš mobiliųjų įrenginių sesijų ir 52 % „iOS" platformoje. Alibaba (grupė, kuriai priklauso Aliexpress) savo konversijos rodiklį pagerino 76 %.

Nors kalbėjome apie 2 pasaulinius milžinus, turėti mobiliajame telefone programą, kurioje įkėlimo ir vykdymo laikas nestabdo, o dizainas išlaikomas geras, kaip įrodyta, padidina konversijos rodiklį.

Apibendrinant galima teigti, kad PWA vis labiau plinta, daugiausia tarp didžiųjų prekių ženklų. Ispanijoje tikriausiai užtruks šiek tiek laiko, kol suvoksime milžinišką šios technologijos potencialą, tačiau anksčiau ar vėliau ji bus įdiegta.

Bet kuri technologija, palengvinanti naršymą mobiliajame, turi didelę reikšmę; su išmaniaisiais telefonais praleidžiame daug valandų, o galų gale prieiga tiek prie turinio, tiek prie produktų yra verslas.

Šaltiniai

• ›Google dokumentacija apie PWA