PWA, Egy új módja annak, hogy csodálatos felhasználói élmény legyen a mobilon netezés!


Az internet sokat fejlődött az elmúlt években, viszont nem minden fejlesztés ment át zökkenőmentesen a mobilunkra is. Ha megkérdezzük az emberket mobil appként vagy mobil böngészőben nyitnák meg a kedvenc oldalukat (mondjuk a Facebookot), 10 ből 9 ember az Appot preferálja. Azért nem kell mindenkinek rögvest fejest ugrania Natív App fejlesztésbe, hiszen az átlagos mobil felhasználó csak a legismertebb Appokat használja és abból is csak átlagosan hármat. Ha nem vagy a Facebook Google Twitter Pinterest stb... magaságban akkor egyeltalán nincs szükséged natív mobil Applikációra. Továbá nehezíti a dolgot, hogy átlagosan 1 hónapban "NULLA" új aplikációt telepítenek az emberek. Egy applikáció telepítése nagy elkötelezetség időben, és tárhelyben egyaránt. Ne is említsük azt a tényt, hogy a felhasználókat 10-50 szer nehezebb drágább rávenni egy Applikáció telepítésére mint egy weboldal meglátogatására.

Progresszív Web Applikáció (PWA)

Jelenleg a mobilról többet netezünk mint asztali gépről, ami igencsak kiemeli a mobilos fejlesztések fontosságát! A mobil oldalak eléggé sokat fejődtek, és itt jön képbe a Google, aki elkezdte támogatni a PWA fejlesztéseket. A PWA egy olyan web technológia ami lehetővé teszi az Applikáció szerű megjelenést. A kezdő képernyőn való ikon elhelyezést az offline böngészést. Az összes nagyobb böngésző már rendelkezik PWA megoldással vagy fejleszti azt. A PWA oldalak gyorsan töltődnek, és az, hogy ez mennyire fontos a lentebbi diagrammon tökéletesen látszik. Ha a weboldal több mint 3 másodpercig tölt a látogatók 20% egyből elhagyja az oldalt. hihetetlen de az Amazon 1% bevétel kiesésést mért minden tized másodperc oldal betöltés késésnél.

 
 

 

Minden PWA oldalnak 4 kulcsfontosságú tulajdonsága létezik:

1. Gyors

A kezsőoldalon az apllikáció csempéjére klikkelve az azonnal betölt a hálózat aktuális állapotától függően. Egy gyorsan görgethető jó felhasználói élményt biztosít.


2. Integrált

Az első hagyományos böngészőben való megnyitáskor egyből felajánlja a kezdő oldalon való elhelyezést. A kezdő oldalról megnyitva Applikáció szerűen nyílik meg teljes képernyőn az oldal betöltése közben "Splash" töltés képernyőt láthatunk. Hoppá vagyis nincs webcím rész? Igen nincs, ahogy bármelyik másik applikációnál sincs!


3. Megbízható

A PWA webáruházaink már meglátogatott oldalai elérhetőek még akkor is ha szakadozó a hálózati kapcsolat vagy egyeltalán nincs


4. Megnyerő

Push üzenetek küldésével, ami a mobil "notification" részében is megjelenik, visszahozza a látogatót. Jelenleg csupán ez, az egyetlen funkció amit nem fejlesztettem le. hiszen egy webáruháznak hacsak nem Emagról beszélünk erre nincs szüksége. Üsse kavics ha egy Emag méretű áruház keres meg webáruháza elkészítésével lefejlesztem nekik :-) Elvégre a szükséges Technológiák már üzemelnek.

 

A technológia háttere.

Ahhoz, hogy egy oldal PWA lehessen számos dolog kell, leginkább egy Service Worker ami helyi kiszolgálóként fut a felhasználó eszközén. Viszont ahhoz, hogy ezt megléphessük az oldalnak már eleve gyorsnak kell lennie mobilon (lassú CPU) és lassú 3G kapcsolattal. Azt , hogy az oldalunk hogyan teljesít a Google lighthouse tesztjével ellenőrizhetjük google Chrome fejlesztői nézetben.

 

Ebben a tesztben tényleg csak az a lényeg, hogy minden Zöld legyen, nem kell törekedni a 100%-okra. Fontos, hogy a teszt nem a szerver sebességét méri hanem a legjobb gyakorlatokat, vagyis mennyire alkalmazza az oldal a legujabb web technikákat. Ez a teszt gyakorlatilag az újabb verziója a "Google Page Speed Insight" programnak amit a google még mindig rangsorolási faktorként használ.

Google Lighthouse

 
 

Tesztelje le oldalunkat, (Ezt az oldalt) nyisa meg mobilról a ShopteQ kezdő oldalát majd tegye ki kezdő képernyőre. Ha nem ajánlja fel a kezdő képernyőre való helyezést akkor a jobb odali hamburger menure majd a kezdőoldalra helyezésre kel klikkelni! Csukja be a böngészőt és nyissa meg a kezdőoldalon lévő applikációt!


2018 Jun 26 - Szabó Zoltán


Vélemények

Még nincs vélemény ehhez a cikkhez legyél te az első aki véleményezi


Mit gondolsz a cikkről?
captcha text
Ha látja ezt a mezőt kérem hagyja üresen
A csillaggal (*), jelölt mezők kötelezőek. Az értékelés jóváhagyásunk után lesz látható.

Tudjon meg többet az e-kereskedelmről

Mindent elmondunk amit tudni érdemes a webaruházakról

Ingyenes anyagok