Mik azok a progresszív webalkalmazások?
Mik azok a progresszív webalkalmazások?
Benned is felmerülhetett már az elképzelés, hogy milyen jó lenne egy saját applikáció. Legyen csak az a cél, hogy ezáltal is mutasd céged komolyságát, professzionális módon szeretnéd kiszolgálni meglévő ügyfeleidet, esetleg újakat bevonzani, vagy éppen a napi munkaszervezést, nyilvántartást szeretnéd korszerűsíteni.
Pár évvel ezelőtt alapvetően két lehetőség, a mobilra optimalizált weboldal vagy az úgynevezett natív alkalmazás közül választhattál. Napjainkra egy harmadik, hibridnek vagy köztesnek nevezett megoldás is megjelent a piacon: az Progressive Web Application (PWA), magyarul progresszív webalkalmazás. A „progresszív” szó is erre az újdonságra utal: a PWA-k folyamatosan fejlődnek, alkalmazzák a legmodernebb webes technikákat, működésükben pedig egyre inkább közelítenek a applikációkhoz. Mostani cikkünkben igyekszünk bemutatni a PWA-ban rejlő igazi újdonságot, innovációt, majd mutatunk is néhány példát az ezzel a technikával működő, ismertebb applikációkra.
Natív alkalmazások és mobilra optimalizált weboldalak
A „natív” kifejezés a köznapi szóhasználatban általában valamilyen helyszínhez kötődik, jelenthet szülőföldet, anyanyelvi környezetet vagy akár természetes élőhelyet. Hasonlóképpen van ez az informatikai szakzsargonban is, a natív applikáció arra utal, hogy egy alkalmazás valamilyen rendszeren, mint „saját környezetében” fut: akár Windowson, IPhoneon vagy Androidon. Ezek úgynevezett „platform-specifikus” alkalmazások, ami fut Androidon az nem lesz jó IPhone-ra, ami IPhonra készült, az nem fut Windowson és így tovább..
A mobilra optimalizált, másképpen mobilbarát weboldal olyan weblap, ami okostelefonról felkeresve ugyanazt az élményt nyújtja, mintha számítógépről érnéd el. Szakszóval ezeket reszponzív weboldalaknak hívjuk. Megnyitásukhoz internetkapcsolat szükséges, mobiltelefonról és asztali számítógépről elérve ugyanazt a telejsítményt nyújtják, ugyanazokat a funkciókat tudják. Napjainkban az internetes forgalom több, mint háromnegyede mobil készülékekről történik, így – különösen egy kereskedelmi alkalmazás esetén – nagyon fontos, hogy az alkalmazás gyorsan és hibátlanul betöltődjön egy mobiltelefon vagy egy tablet képernyőjén is. Ez keresőoptimalizálás (azaz hogy az oldal jó helyet foglaljon el az internetes keresések találatai között) szempontjából kiemelten fontos, de a megfelelő felhasználói élmény elérése miatt már alapvető követelménynek számít.
Progresszív webalkalmazások (PWA)
Applikáció vagy weboldal?
A PWA lényegében a két kategória közötti köztes megoldásként jött létre, igyekszik mind a natív appok, mind az optimalizált weblapok előnyeit hasznosítani. Egy olyan webalkalmazás, amely képes egy applikációhoz hasonló funkciókat és megjelenést biztosítani, legalább is erre törekszik. A használathoz nem kell letölteni, így alapvetően nem foglalja a helyet az eszközön, maga az alkalmazás teljes egészében az azt készítő cég weboldalán és szerverén található.
Maga az alkalmazás a mobiltelefon vagy a számítógép böngészőjében fut, mégis szinte ugyanazt a hatást kelti, mintha azt a készülékre telepítetted volna: létrehoz egy parancsikont az asztalon vagy egy ikont az okostelefon kezdőképernyőjén. Ha innen nyitod meg őket, továbbra is a böngészőből fog futni, azonban a böngésző kerete, fejléce és lábléce nélkül. Ha a mobilkészülékeden váltani szeretnél a futó programok között, akkor a PWA-t, mint önálló applikációt fogod látni, nem pedig úgy, mint egy megnyitott lap a böngészőben. Valamint a készüléked „beállítások” menüjében megtalálhatóak a PWA beállításai is, ezzel is tovább fokozva az appszerű élményt.
Melyek a legnépszerűbb PWA-k napjainkban?
A PWA még mindig újdonságnak számít, így természetesen a natív appok és a webalkalmazások túlsúlya a jellemző. Azonban több ismert, már befutott alkalmazás váltott PWA-ra. Így az AliExpress, a Spotify, a Twitter a Trivago vagy a Tinder is ezt használja. De több, neves külföldi újság, így a The Guardian, a Forbes vagy a Financial Times applikációja is ezen az elven működik.
A PWA funkciójában tehát nagyon közelít a natív applikációkhoz, így lehet, hogy te is használtál már ilyet, csak nem vetted észre a különbséget. Mindenesetre ezen a linken (http://progressivewebapproom.com) te is kipróbálhatsz most párat, ha eddig még nem tetted volna.
Gyors betöltődés és offline funkció
Bár maga az alkalmazás nem települ az eszközödre, azonban így is hozzáférést kap a készülék tárhelyéhez. Nem pusztán egy ikon kerül kitűzésre a kezdőképernyőre, hanem a PWA bizonyos adatokat is tárol a készüléken. Így lehetséges az alkalmazás bizonyos erőforrásainak és adataitainak gyorsítótárazása is. Ez tulajdonképpen egyrészt gyorsabb betöltődést biztosít, valamint a megfelelő beállítások mellett offline módban is elérhetővé teszi a PWA bizonyos funkcióit.
Mi az a gyorsítótár?
A gyorsítótár (cache) francia eredetű szó, rejtekhelyet jelent. Sokszor találkozhattál már a kifejezéssel akár mobiltelefonod, akár számítógéped operációs rendszerében. Lényege, hogy az ebben tárolt adatok gyorsabban előhívhatóak, mintha például le kéne tölteni az internetről. Ha meglátogatsz egy weblapot, ennek bizonyos statikus elemei időlegesen tárolódnak a gyorsítótárban. Ha újra felkeresed a honlapot, akkor ezek az elemek a rendszer a gyorsítótárból fogja előhívni, nem kell ismét letöltenie. Ebből te pedig annyit fogsz érzékelni, hogy az oldal sokkal gyorsabban betölt, hiszen azokat a készülékeden található gyorsítótárból lesznek betöltve, nem pedig az internetről kell letölteni, amely az internetkapcsolat sebességétől függetlenül, biztosan hosszabb idő lenne. |
Hogyan lehetséges ez? Röviden: ebből a szempontból egy applikációt két részre lehet osztani: van a statikus, azaz változatlan, állandó rész, ez az applikáció váza. És van a dinamikus, azaz változó rész, ez pedig a tartalom, vagyis a képek, bejegyzések, videók stb. Amikor először megnyitod a PWA-t, akkor annak a váza, azaz a statikus része letöltődik és tárolásra kerül a készüléken. Ez akkor is ott lesz, ha éppen nincsen internetkapcsolat. Ha pedig van kapcsolat, akkor ez már ott van a gyosítótárban, így ezt nem kell letölteni, csak az applikáció dinamikus részét, a legfrissebb képeket, videókat, bejegyzéseket és a többit.
Értesítések küldésének lehetősége
A PWA a tárhelyen túl hozzáférhet a készülék további funkcióihoz is. Így kezelheti a kamerát, a mikrofont, hozzáférhet helyadatokhoz, a háttérben különböző szinkronizálási feladatokat végezhet, valamint offline is futtathat bizonyos folyamatokat a háttérben. Értesítéseket (úgynevezett push üzeneteket) is küldhet, melyek ugyanúgy fognak megjelenni a készülékeden, mint például egy Facebook értesítés és azokhoz hasonló módon lehet őket kezelni (például időlegesen kikapcsolni).
Az PWA további előnye, hogy olyan módon épül be a készülék operációs rendszerébe, mint egy natív alkalmazás. Ennek köszönhetően lehetséges a PWA és a többi applikáció közötti információátadás. Tehát például egy Facebook Messengeren vagy Viberen küldött link közvetlenül a PWA-ban is megnyitható lesz (úgy, mint ahogy egy Youtube videó linkje közvetlenül a YouTube alkalmazásban vagy egy koordináta közvetlenül a Google Térképben nyílik meg).
Kereshetőség
Egy natív applikációval ellentétben a PWA a keresőmotorok által is listázható, azaz például egy Google keresés esetén megjelenhet a találatok között. Ennek köszönhetően a felhasználók elérése sokkal könnyebb, nagyban segíti a felhasználói bázis organikus (nem fizetett hirdetéseken keresztül történő) növekedését. Ráadásul jellemzően gyorsan betöltődnek, ami a keresőoptimalizálás szempontjából is kifejezetten előnyös, tehát jó eséllyel előre fognak kerülni a Google találatok listájában. Ezen túl is megtalálhatóak lehetnek az AppStoreban, a Chrome vagy akár a Play Áruházban, ami a telepítésükhöz ugyan nem szükséges, de a felhasználók könnyebb elérését szintén segíti.
Platformfüggetlen elérés
PWA esetén egy és ugyanaz az alkalmazás fut minden böngészőben és operációs rendszerben, ami számos további előnyt biztosít üzemeltetői oldalon is. Egyfelől egy webfejlesztő is simán elkészít egy ilyen alkalmazást, nem kell hozzá mobilapplikációkra szakosodott szakembert megbízni. Másfelől, natív alkalmazás esetén célszerű mindkettő platformra, azaz Androidra és IOS-re is lefejleszteni az alkalmazást (és akkor még mindig nem lesz elérhető asztali gépről), míg a PWA ugyanúgy érhető el akármelyik eszközről, minden további fejlesztés nélkül.
Ezeknek köszönhetően egy PWA sokkal költséghatékonyabb, összességében egy natív alkalmazás fejlesztés díjának nagyjából negyedéből ki tudod hozni, ráadásul az alkalmazásboltokban (Google Play vagy AppStore) való közzététel költségeivel sem feltétlen kell számolnod (ezek után ugyanis díjat kell fizetni).
Egyszerűbb, költséghatékonyabb fenntartás
A fenntartása is egyszerűbb, sokkal kevesebb karbantartást igényel, mint egy natív applikáció. Nem települ közvetlenül a készülékre, így nem kell frissíteni akkor, ha kijön a készülék operációs rendszerének egy újabb verziója. Ha pedig magát az alkalmazást szeretnéd frissíteni, az úgy történik, mint egy webes alkalmazás esetében: azaz elég a “saját példányodat”frissíteni, hiszen mint említettük, a PWA nem a felhasználók készülékén, hanem az üzemeltető szerverén található; a felhasználók gyakorlatilag innen nyitják meg minden egyes használatkor, ezért mindegyik felhasználó az éppen aktuális verziót fogja használni. Egy natív applikáció esetén a frissítést el kell küldened az alkalmazásboltoknak, a felhasználók pedig innen letöltve tudják frissíteni saját példányaikat.
Miért éri meg PWA fejlesztése?
A PWA tehát ötvözi a natív applikációk és a reszponzív weboldalak legelőnyösebb tulajdonságait. Kicsit ugyanúgy „része” lesz az eszköznek, amin futtatod, mint egy natív alkalmazás: helyet kap a kezdőképernyőn, offline módban is működik, olvashat és létrehozhat fájlokat közvetlenül a tárhelyen, használhatja a kamerát, a mikrofont, hozzáférhet a helyadatokhoz. Ugyanakkor ugyanúgy elérhető különböző eszközökről, mint egy weblap, a keresőmotorok által listázható és könnyen megosztható.
Emellett költséghatékony megoldás mind a fejlesztés, mind az üzemeltetés során. Napjainkban egy felhasználót rengeteg impulzus ér, heti szinten hall újabb és újabb fejlesztésekről, lehetőségekről, különböző kényelmi funkciókat biztosító appokról. Ráadásul az informatika folyamatosan és gyorsan fejlődik: ami ma újdonság, lehet, hogy már fél év múlva kétszeresen is meghaladott megoldás lesz. Ezért a felhasználók is sűrűn cserélgetik az alkalamzásokat mobilkészülékükön. Lehet, hogy két hónapig használ valamit, aztán vagy nem lesz már rá szüksége, vagy kijön valamilyen újabb, komplexebb esetleg dizájnosabb megoldás, és máris törli a feleslegessé vált a régi alkalmazást.
Ezek a trendek mind abba az irányban mutatnak, hogy egy reszponzív (azaz bármilyen eszközről megnyitható), költséghatékonyabb és könnyen fenntartható webalkalmazás hosszú távon optimális alternatívája lehet a platformfüggő natív alkalmazásoknak.
Mikor éri meg jobban a natív alkalmazás?
Amennyiben az applikáció sebessége, illetve a felhasználói élmény kulcs fontosságú, ezen a területen noha a PWA-k is jók, egyenlőre nem érik utol a natív alkalmazásokat.
Továbbá a PWA-k hozzáférése a hardverekhez sokkal korlátozottabb, ráadásul ha a mobilon található többi applikációval kell szorosan együttműködnie, ebben is a natív alkalmazások a nyerők.
A PWA-k tehát olyan web alapú megoldások, amelyek igyekeznek egyre inkább app-szerű élményt nyújtani. Ebből az is következik, hogy vannak olyan területek, ahol a PWA-ak ugyan törekszenek erre, de még mindig nem tudják utolérni a natív alkalmazásokat.
Bár a PWA hozzáférhet bizonyos a hardverekhez, ez még mindig nem teljeskörű, például a Bluetooth-t egyáltalán nem tudja használni. A hardveres hozzáférés más webes applikációkhoz képest előny, azonban a natív alkalmazások még mindig erősebbek ezen a téren.
Nem csak a hardverekhez való hozzáférés, hanem a mobiltelefonon található más programokkal – például a Facebookkal – való együttműködés tekintetében is a natív applikációk teljesítenek jobban. Egy PWA ráadásul nem tud hozzáférni a naptárhoz vagy a telefon névjegyeihez, nem tudja kezelni a hívásokat vagy az SMS-eket sem.
Hasonló a helyzet akkor, ha a jó UX-ről van szó (azaz felhasználói élményről, hogy ez pontosan mit jelent, itt írtunk részletesen). A PWA-ak ezen a területen is folyamatosan fejlődnek, de még mindig elmaradnak a natív alkalmazásoktól. A natív appok, bár több helyet foglalnak a készülék tárhelyén, gyorsabbak a PWA-knál, a készülék akkumulátorát is jobban kímélik és grafikus megjelenítés területén is erősebbek.
Összegezés
Bár a PWA-ak folyamatosan fejlődnek, vannak olyan területek, ahol még mindig a natív alkalmazások teljesítenek jobban. Gyorsabbak, könnyebben működnek együtt más applikációkkal és a hardveres hozzáférésük is jobb. Ráadásul a PWA, mint megoldás fejlesztésében a Google ösztönözte jelentősen: így vannak olyan funkcióik, melyek IPhone-on, különösen a Safari böngészőbén még nem képesek teljes körű funckionalitásra.
Ha az a cél, hogy gyorsan, egyszerűen és olcsón fejlesz egy működőképes, az adott célra megfelelő alkalmazást alacsony fenntartási költségekkel, akkor egy PWA remek választás lehet. Ha azonban az applikáció sebessége, illetve a felhasználói élmény kulcsfontosságú, esetleg széles körű hardveres hozzáférés szükséges, akkor ezen a területen még mindig a natív applikációk jelentik a megoldást.