Blog – 16.02.2018 Mi az a Progressive Web App (PWA) és miért érdekel?

Amilyen gyorsan eljutottál ehhez a blogbejegyzéshez, valószínűleg már hallottad valahol a PWA kifejezést. Jó neked – a PWA-król fog emlékezetes maradni a 2018-as év, szóval pont a vérző élvonalban vagy. Milyen izgalmas! Ebben a blogbejegyzésben elmagyarázom, mit is jelent valójában ez a kifejezés, és miért érdemes foglalkoznod vele.
Progresszív webes alkalmazás

Progresszív webes alkalmazás

(forrás: Google Developer site)

Mi az a PWA?

A PWA a Progressive Web Application rövidítése. Vizsgáljuk meg két részre bontva. Az utóbbi két szó (“Web Application”) önmagáért beszél. A PWA-k webes alkalmazások. A webalkalmazás itt egyszerűen egy weboldalként futó alkalmazást jelent, mint például a Twitter. A kifejezés első része – Progressive – azt jelenti, hogy a felhasználói élményt a böngésző képességei alapján fokozatosan fejlesztik. Ez lényegében azt jelenti, hogy a webalkalmazás jól működik a régebbi böngészőkben, de az élmény fokozásához újabb technológiákat is felhasználhat, ha a felhasználó olyan böngészőt használ, amely támogatja ezeket. Egyszerűen hangzik, igaz? Honnan származik tehát a kifejezés?

A progresszív azt jelenti, hogy a felhasználói élményt a böngésző képességei alapján fokozatosan javítják

A kifejezést Alex Russell, a Google Chrome mérnöke vezette be 2015-ben blogbejegyzésében. Azóta a Google aktívan népszerűsíti a használatukat, és rengeteg forrást biztosított a témában, például egy olyan oldalt, amely részletesebben elmagyarázza őket.
A PWA-kkal kapcsolatos előadások tartása során ezen a ponton mindig ugyanazzal a zűrzavarral találkozom. “Szóval… Ez egy technológia? Ez egy szabvány? Ez valami, ami a Google tulajdona/szabadalma?” Nem, egyik sem. Egyszerűen csak egy kifejezés, amely az alkalmazások tervezésének és építésének egy sajátos módját írja le. Ezután próbáljuk megérteni, hogy mi is ez, ha végigmegyünk a jellemzőin.
Itt van a PWA eredeti 9 jellemzője Alex Russell által, magyarázattal, hogy mit jelentenek ebben a kontextusban:

  • Responsive: Az oldal jól néz ki különböző képernyőméreteken (pl. telefon, tablet, asztali számítógép)
  • Kapcsolatfüggetlen: Internetkapcsolat nélkül is működik
  • alkalmazás-szerű interakciók: A natív alkalmazás kinézete és érzése
  • Friss: Mindig naprakész
  • Biztonságos: Biztonságos kapcsolat használata a többféle biztonsági fenyegetés mérséklésére
  • Felfedezhető: A böngészők automatikusan azonosítják a PWA-kat
  • Újra felismerhető: Visszahozhatja a felhasználókat az alkalmazáshoz, például Push értesítések segítségével
  • Telepíthető: A natív alkalmazásokhoz hasonlóan a kezdőképernyőre tárolható, de az App Store extra gondjai nélkül
  • Linkelhető: Megosztható egyszerű URL-ként

A blogbejegyzés olvasója számára a legfontosabb funkciók:

  • Telepíthetőség a kezdőképernyőre
  • Hozzáférés több natív API-hoz, például kamera, geolokáció, rezgés, fizetés stb.
  • Push értesítések támogatása
  • Offline használat
  • Teljes képernyő és splash screen támogatás

(forrás: Alex Russell blogbejegyzése)

A fentieket összefoglalva a PWA-k a legtöbb olyan dologra képesek, amire a natív alkalmazások képesek, és a szakadék a natív és webes alkalmazások képességei között egyre szűkül.

Miért most?

Most talán arra gondolsz, hogy mindez olyan jól hangzik, hogy biztos van valami buktató, hiszen a PWA-k nem az alkalmazások alapértelmezett megvalósítási módja. Igen, igazad van. Van egy bökkenő. Egyes környezetekben nem támogatják a PWA-kat lehetővé tevő technológiákat. Az Android-támogatás már egy ideje létezik, az Android 5-től kezdve, ami azt jelenti, hogy a világ Android készülékeinek több mint 80%-a (forrás: Google Android-statisztikák) támogatja a PWA-k megvalósításához szükséges technológiákat. Az elfogadottság még nagyobb, ha csak Európát vagy Észak-Amerikát vesszük figyelembe. Tehát az Android támogatása már most is nagyon jó.
Sajnos a mobiltelefonok piacán osztozó másik kulcsszereplő nem volt túl lelkes a technológiák bevezetésében (olvassa el, miért). Hiányzik az iOS-támogatás, ami megakadályozza a PWA-k szélesebb körű elterjedését. A hamarosan megjelenő iOS 11.3-tól kezdve azonban a támogatás elérhető lesz iOS-re is. Szerencsére az új iOS-verziók elfogadása viszonylag gyors, így feltételezhető, hogy még idén elérhető lesz a magas szintű támogatás. Az Apple szerint a 10-es és 11-es verzió az összes használt iOS-verzió 93%-át teszi ki.
Míg a PWA-król beszélve a hangsúly gyakran a mobil környezeten van, a PWA-k asztali környezetben is működnek. A hónap elején volt egy fontos bejelentés a Microsoft részéről, miszerint a PWA-kat mostantól támogatja az Edge és a Windows 10. A Chrome és a Firefox már támogatja a PWA-kat, és az asztali Safari következő kiadása is támogatni fogja.

Példa: Lite

A PWA-k leghíresebb példája a Twitter PWA változata, a Twitter Lite (próbáld ki Androiddal vagy asztali gépen a mobile.twitter.com oldalon). A Twitter közzétette a PWA verzió megalkotásának indoklását is. A posztból kiemelve néhány tényt, a natív alkalmazásukhoz képest a PWA verzió mérete mindössze 1-3%, az átlagos betöltési idő pedig 30%-kal kevesebb.
A PWA-k további ismert példái a Forbes, a Trivago, a Washington Post, a Telegram, az Alibaba és legutóbb a Google Maps Go. A PWA-król egy könyvtár is elérhető.

Következtetések

A 2018-as év várhatóan a PWA-k éve lesz. Az eszköztár már most is nagyszerű szinten van, és egyre több PWA jelenik meg folyamatosan. Amint az iOS támogatása nagymértékben elérhetővé válik, a PWA-k reális opcióvá válnak a natív alkalmazások számára. Abban az esetben, ha azon gondolkodik, hogy a PWA-k a megfelelő választás-e az Ön számára, nézzen vissza hamarosan, mert írok egy útmutatót a Should I do a PWA instead of a native app?
Gofore már rendelkezik tapasztalattal a PWA-k terén, és széleskörű tapasztalattal rendelkezik a reszponzív, jól kinéző, offline-első és hatékony webes alkalmazások építésében is. Akár a PWA-k architektúrájának kiválasztásában, tervezésében vagy megvalósításában van szüksége segítségre, forduljon hozzánk bizalommal.

TOVÁBBI OLVASMÁNYOK A GOFORE BLOGBÓL

Az agilis átalakítás gyakorlatban – 1. rész
Az agilis átalakítás gyakorlatban – 2. rész
Mi a lényeg az agilis skálázás

.

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.