Egyre gyorsabb, dinamikusabb, folyamatosan változó világban élünk. Egymást követik az emberekre ható inkrementális innovációk, amelyek egyre inkább a következőkre összpontosítanak:
- teljesítmény, gondoljunk csak a nap mint nap használt, egyre nagyobb teljesítményű eszközökre vagy a feladatok gyorsabb elvégzését lehetővé tevő feladatokra;
- élmény, a szoftver/hardver használata során felmerülő súrlódások kiküszöbölése;
- intelligencia, a ma már előrejelző szemléletben működő algoritmusokkal.
Ez az irány, amely elsősorban a teljesítményre és a végfelhasználó felhasználói élményére összpontosít, a Progressive Web App (PWA) fejlesztése, egy olyan megoldás, amely a natív alkalmazások és a webes technológia legjobb tulajdonságait kívánja ötvözni.
A Progressive Web App (PWA) egy olyan alkalmazás, amely a modern webes lehetőségeket használja arra, hogy a felhasználóknak a natív alkalmazásokhoz nagyon hasonló (ha nem jobb) élményt nyújtson.
A hagyományos alkalmazásokkal ellentétben a progresszív webes alkalmazások a hagyományos weboldalak és a mobilalkalmazások hibridjei. A “progresszív” kifejezés arra utal, hogy új funkciókat vezetnek be, és a felhasználói élmény szempontjából kezdetben normál weboldalaknak tűnnek, de fokozatosan egyre inkább úgy viselkednek, mint a mobilalkalmazások, többek között többplatformosak.
- A progresszív webes alkalmazások előnyei és hátrányai
- A Manifest és a Service Workers fontossága
- Melyek a leggyakrabban használt technológiák a PWA-khoz?
- Hogyan válasszunk egy PWA vagy egy natív megoldás között
- A telepítési folyamat eltérései: PWA vs. natív alkalmazás
- A Progressive Web App főbb példái
- Szóval a jövő “progresszív”?
A progresszív webes alkalmazások előnyei és hátrányai
A főbb jellemzőik:
- Progresszív – A választott böngészőtől függetlenül minden felhasználó számára működnek, mivel alapvetően progresszív fejlesztési elvek alapján épülnek.
- Responsive – Alkalmazkodnak a különböző képernyőméretekhez: asztali, mobil, táblagép, illetve a későbbiekben elérhetővé váló méretekhez.
- App-like – Úgy viselkednek a felhasználóval, mintha natív alkalmazások lennének, az interakció és a navigáció tekintetében.
- Updated – Az információk mindig naprakészek a szervizmunkások által kínált adatfrissítési folyamatnak köszönhetően.
- Biztonságos – HTTPS protokollon keresztül exponáltak, hogy a kapcsolat ne jeleníthessen meg információkat vagy ne módosíthassa a tartalmat.
- Kereshető – “Alkalmazásként” azonosítják őket, és a keresőmotorok indexelik őket.
- Reaktiválható – Az alkalmazás újraaktiválását megkönnyítik az olyan képességeknek köszönhetően, mint a webes értesítések.
- Telepíthető – Lehetővé teszik a felhasználó számára, hogy “elmentse” az általa leghasznosabbnak tartott alkalmazásokat a megfelelő ikonnal a mobil végberendezés képernyőjén (kezdőképernyő) anélkül, hogy az alkalmazásbolt használatával kapcsolatos összes lépéssel és problémával szembesülnie kellene.
- Linkelhető – Könnyen megosztható URL-en keresztül, bonyolult telepítések nélkül.
- Offline – Ismét arról van szó, hogy a felhasználót helyezik mindenek elé, elkerülve a szokásos hibaüzenetet gyenge vagy semmilyen kapcsolat esetén. A PWA-k két sajátosságon alapulnak: először is az alkalmazás “vázán”, amely az oldal szerkezetét idézi, még akkor is, ha annak tartalma nem reagál, és elemei közé tartozik a fejléc, az oldal elrendezése, valamint az oldal betöltését jelző illusztráció.
A gyengeségek a következőkre vonatkoznak:
- iOS támogatás a 11. verziótól.3-tól kezdve;
- nagyobb mértékben igénybe veszi a készülék akkumulátorát;
- nem minden eszköz támogatja a PWA funkcióinak teljes körét (ugyanaz a beszéd az iOS és az Android operációs rendszerek esetében);
- nem lehet erős re-engagementet létrehozni az iOS felhasználók számára (URL séma, standard webes értesítések);
- az offline végrehajtás támogatása azonban korlátozott;
- jelenlét hiánya az áruházakban (nincs lehetőség forgalmat szerezni erről a csatornáról);
- nincs “ellenőrző szerv” (mint az áruházak) és jóváhagyási folyamat;
- korlátozott hozzáférés az eszközök egyes hardverkomponenseihez;
- kevés rugalmasság a felhasználóknak szánt “speciális” tartalmak tekintetében (pl. hűségprogramok, lojalitás stb.).
A Manifest és a Service Workers fontossága
A modern böngészők új funkciói, amelyek lehetővé teszik a PWA-k számára a legjobbat, a “manifest” és a “service workers”.
Manifest
Ez egy egyszerű JSON fájl, amely meghatározza a PWA alapvető paramétereit, hogy szabályozza, hogyan jelenjen meg az alkalmazás a felhasználó számára, és meghatározza a megjelenését indításkor: ikonok, egyéb alapvető jellemzők, például színek, betűtípusok, képernyőorientáció és a kezdőképernyőre telepítés lehetősége.
Szolgáltatók
Ők az igazi kulcsa azoknak a fejlett élményeknek, amelyeket egy PWA nyújthat. A service worker egy olyan szkript, amelyet a böngésző a háttérben, a weboldaltól elkülönítve futtat, hogy olyan funkciókat használjon, amelyek nem igényelnek weboldalt vagy felhasználói interakciót.
A SW-k ma már olyan funkciókat tartalmaznak, mint a push-értesítések és a háttérben történő szinkronizáció. A jövőben olyan funkciókat fognak támogatni, mint az időszakos szinkronizáció vagy a geofencing. A fő funkció a hálózati kérések elfogásának és kezelésének képessége, beleértve a válaszok gyorsítótárának programozott kezelését. Ez egy olyan API, amely támogatja az offline élményeket azáltal, hogy a fejlesztőknek teljes kontrollt biztosít az élmény felett.
Azzal, hogy az iOS legújabb verziója kiegészült a szervizmunkások támogatásával, az Apple megnyitotta az ajtót a PWA-k előtt, hogy minden értelemben elérjék a teljes mobilpiacot.
Melyek a leggyakrabban használt technológiák a PWA-khoz?
Egy Progressive Web App létrehozásához több, elsősorban JavaScript alapú, különböző tulajdonságokkal rendelkező technológia létezik.
A főbbek között vannak:
- React
Egy nagy teljesítményű JavaScript könyvtár dinamikus és modern felhasználói felületek építéséhez - Polymer
A komponensek kombinációja, eszközök és modellek PWA-k létrehozására tervezett - Angular
Egy JavaScript keretrendszer dinamikus webes alkalmazások létrehozására, amely a HTML-t használja sablonnyelvként - Ionic
Egy JavaScript keretrendszer nagy teljesítményű alkalmazások létrehozására a következő célokra több platformra egy alapkód segítségével - Accelerated Mobile Pages (AMP)
A nyílt forráskódú projekt a weboldalak teljesítményének javítására
Hogyan válasszunk egy PWA vagy egy natív megoldás között
Eljön a választás pillanata, milyen megoldást fogadjunk el?
Előnyösebb a PWA fejlesztést választani, ha:
- Az alkalmazást könnyen, még szélesebb felhasználói körhöz kell eljuttatni
- A rendelkezésre álló költségvetés nem magas
- Az induláshoz kevés idő áll rendelkezésre
- A keresőmotorokban való megfelelő indexelés fontos
- Keresztplatformos kompatibilitás szükséges
- Szoros idő alatt több frissítésre van szükség
Azzal szemben a natív alkalmazás fejlesztése akkor előnyösebb, ha:
- Az áruházakban való mozgásra van szükség
- A sebesség és a reakciókészség kulcsfontosságú pontok az alkalmazás sikeréhez
- Az alkalmazás megköveteli az eszköz hardverfunkcióinak fontos használatát
- Az üzleti modell alapja például a letöltésenkénti költség és/vagy az IAP (In App Purchase)
- Az alkalmazást integrálni kell más, harmadik féltől származó alkalmazásokkal
A telepítési folyamat eltérései: PWA vs. natív alkalmazás
A natív alkalmazások telepítésének általános folyamata a következő folyamatot követi:
- Elérés a referencia áruházba (App Store vagy Google Play)
- Az alkalmazás keresése
- Kattintás a “Telepítés”
- A különböző engedélyek elfogadása
- Az alkalmazás megnyitása és elindítása
- Az alkalmazás használata
A PWA telepítése az összehasonlításban a következőket tartalmazza:
- A webhely meglátogatása
- A készülék kezdőképernyőjének hozzáadása (opcionális)
- Az alkalmazás megnyitása
- Az alkalmazás használata
A Progressive Web App főbb példái
A PWA-nak már számos példája “kitüntetett”, amelyet a felhasználók használnak a készülékeiken, és a főbbek között jelentünk:
Többet megtudhat:
Addy Osmani on Medium > A Pinterest Progressive Web App Performance Case Study
A jelenlegi PWA nagyon hasonlít a natív alkalmazáshoz, és rendelkezik az összes főbb interakciós funkcióval, az értesítésektől a Stories megtekintésének lehetőségéig.
Google Maps
Tovább:
The Next Web > A Google könnyed Maps Go csak egy Progressive Web App
Tinder
Tovább:
Addy Osmani on Medium > A Progressive Tinder Web App Performance Case Study
Twitter Lite
Hogy többet tudjon meg:
Twitter Blog > Hogyan építettük a Twitter Lite-ot
Google Developers > Twitter Lite PWA Significantly Increases Engagement and Reduces Data Usage
Paul Armstrong on Medium > Twitter Lite and High Performance React Progressive Web Apps at Scale
YouPorn
A PWA-k használata mellett elsősorban azért döntöttek, hogy megkerüljék azokat a korlátozásokat, amelyeket az Apple és a Google állít fel a pornográf tartalmakra a boltokban, valamint a jobb felhasználói élmény biztosítása érdekében.
To know more:
YouPorn Blog > YouPorn App Experience
VentureBeat > YouPorn goes progressive with new mobile web apps for Android and iOS
Néhány hivatkozás a Progressive Web App témájának elmélyítéséhez
Google Progressive Web App > https://developers.google.com/web/progressive-web-apps/
Google PWA Checklist > https://developers.google.com/web/progressive-web-apps/checklist
Appscope, Könyvtár a progresszív webes alkalmazásokhoz (PWA) > https://appsco.pe/
Szóval a jövő “progresszív”?
A válasz, mint mindig, attól függ. A PWA fejlesztésére vonatkozó döntés elemzéseket és mérlegeléseket követ, amelyeket időről időre, projektről projektre, felhasználóról felhasználóra kell elvégezni. Ezzel szemben hozzátehetnénk egy további összetettséget: a keresőmotorban való pozicionálást: mindent helyesen kezeltünk-e, vagy kannibalizáljuk a weboldalunk forgalmát?
A döntéshez vezető tényezők sokfélék, ahogyan azt ez a tanulmány előrevetíti, így nincs egy meghatározott és szabványos recept, hanem az, amelyik a kontextust adja, megfelelően illeszkedik a stratégiához és a célokhoz. Beszéljünk erről együtt.