(PWA) 2021-ben hódítanak a Progresszív Web Alkalmazások

PWA jól működik a természetben is, offline.
forrás: Unsplash.com / Nature Mobile

A Progresszív Web Alkalmazás, röviden PWA, olyan megoldás, ami a weblap és a mobil app között helyezkedik el. Részben tartalmazza azokat a funkciókat, amiket egy mobil app tud, de kényelmesebb egy weblapnál. Ebben a cikkben ennek részleteit gyűjtöttem össze.

Mi egy PWA pontosan?

A PWA nem más, mint egy weboldal (HTML, CSS) technológiájára épülő mobil alkalmazás. Ennél persze többről van szó!

Az előző gondolat egy leegyszerűsített értelmezés, de kétség kívül ez az alapja. Alex Russell és Frances Berriman fogalmazták meg azt a 9 ismérvet, amit egy PWA -nak tudnia kell.

  1. Reszponzív: bármelyik kijelzőn jól mutat
  2. Kapcsolat független: internet kapcsolat nélkül is használható
  3. App-szerű használat: a mobil app-okban megszokott módon navigálhatunk benne
  4. Naprakész: egy un. Service Worker automatikusan figyeli, hogy mindig a legfrissebb verziót használjuk
  5. Biztonságos: TLS kapcsolatot használ, ami gondoskodik róla, hogy a forgalmat ne lehessen lehallgatni
  6. Könnyen megtalálható: egy megfelelően kitöltött un. Manifest írja le a tartalmat, amit a keresők gyorsan megtalálhatnak és indexelhetnek
  7. Elköteleződés: hozzáfér az operációs rendszer újbóli elköteleződést (re-engagement) segítő beállításaihoz, pl. Push Notification
  8. Telepíthető: Kitűzhető a mobilunk kezdőképernyőjére, hogy kézre essen a következő használatkor
  9. Linkelhető: egy linken érhető el az első használathoz, ezért könnyedén elérhető, megosztható másokkal

Hol lehet hasznos egy PWA?

A 2020-as évben beköltöztünk az online térbe egycsapásra. Naponta nyíltak (először csak kényszerből) a webshop-ok. Akinek addig nem létezett üzlete vagy vállalkozása, azok is felismerték az online vásárlás erejét. Ez felerősítette, hogy tovább bővüljenek az online vásárlások.

Nem minden webshop volt felkészülve a mobilra optimalizált megoldásokkal, ami gyors oldal elhagyást jelent a konkurencia javára. Ebből látszott, hogy a fizikai boltok szinte teljesen megszűntek, akinek nem volt online megoldása, az komoly gondba került (nagyon sokan bezártak végleg).

Egy mobilos felhasználói élményt javíthat a PWA:

  • Push Notification-k és értesítések küldése
  • Gyorsan lehet bejelentkezni a Facebook vagy Google felhasználónkkal
  • Internet nélkül is lehet vásárolni, gyűjtögetni a kosárba
  • Egyedi analitika nyomonkövetése
  • Könnyített mobil fizetési módok

Egy PWA jó belépő lehet akkor, ha nem akarjuk a felhasználót rákényszeríteni egy újabb app telepítésére, viszont a vállalkozásunkat pörgetni akarjuk.

Egy fodrászat, műkörmös időpontfoglalása egyszerűsödik. Mindenki magának intézheti, kényelmesen. A fodrásznak sem kell a hajas kezével, az ügyfelét késlekedve telefonokat bonyolítania. Ehelyett egy naptárat lát, aki szeretne menni, megadhatja a frizura típusát, így ez alapján becsülhető az idő. Elegendő az időpontra érkezni, ami csökkenti a sorbanállást.

A turisztikai app-ok töretlen sikernek örvendenek. A korlátozott utazások miatt egyéb, eddig nem ismert megoldásokat igényelnek a kirándulók.

A webshop-okról már volt szó, előnyük egyértelmű.

Meg kell jelenni az online térben, különben nem létezik az a vállalkozás, amelyik nem így tesz. Az egyszerű, tájékoztató jellegű, céges honlapok ideje lejárt.

A cégek berendezkedve a hibrid munkavégzésre, a munkaerőnek új szolgáltatásokat szeretne biztosítani. A Home Office elterjedésével már jóval túlmutat ez az egyszerű munkaidő regisztrálásán. Egy feladatkezelő könnyedén naprakészen tartja, hogy ki-mikor-mit végez? Céges eseményekről lehet értesíteni a dolgozókat. Visszajelzéseket kérni a felhasználóktól, hogy csak egy pár példát említsek.

A fentiek inkább a mobiltelefonos felhasználását hangsúlyozták, azonban van egy fontos terület még: az asztali számítógépen való használat. Egy ügyviteli rendszer, egy webshop adminisztrációs felület ugyan olyan jól kialakítható vele, mint egy mobil app. Véd a váratlan internet kapcsolat megszakadása ellen, és tovább tudunk dolgozni a programmal.

A PWA hátrányai

Azáltal, hogy nem az alkalmazás áruházakból (Google Play vagy App Store) telepítjük őket a telefonjainkra, elveszítjük annak a mérésnek a lehetőségét, hogy feltárjuk a célközönségünket. Ezek némileg kiküszöbölhetőek más analitikai megoldásokkal. Lényegében nem biztos, hogy az fontos számunkra, hogy mikor telepítették, és kik, hanem hogy valóban hozott-e forgalom növekedést. Minden esetre ez egy olyan tényező, amit SEO szempontjából érdemes figyelembe venni.

Bár egy PWA jobban kihasználja egy mobil képességeit, bizonyos funkciókhoz nem biztos, hogy hozzáférünk. Ilyen lehet a Bluetooth kapcsolat, vagy a GPS adatok. Főleg az Apple az iPhone-okon korlátozza ezek telepítését. Mérlegelni kell, hogy a fenti funkciókra valóban szükségünk van-e, és ha tényleg elengedhetetlen, akkor választani egy natív megoldást, ami ezt megoldja.

Alapvetően a telefonunkon lévő böngésző szab gátat a telefonon elérhető funkcionalitások kihasználásához, de néhány trükkel ezek bizonyos mértékig tágíthatóak. Azonban fontolóra kell venni, hogyha egy speciális képesség kell a telefonunkról, akkor a PWA szűk lesz egy idő után, és a natív irányba kell elmozdulnunk.

Mit kapunk a pénzünkért?

Azok a jó megoldások, amik belátható beruházások mellett a megtérülést szem előtt tartva valósulnak meg. Jó szempont az, ha kicsiben indulunk, és az igények növekedésével tudjuk fejleszteni a terméket.

Ma már van rá lehetőség, hogy a prototípustól (Figma), egy PWA-n keresztül el tudunk jutni egy natív app-ig. Közben nem kell mindig az elejéről kezdeni a fejlesztést. Ha ugyan az a csapat, a későbbiekben onnan tudja folytatni, ahol abbamaradt a fejlesztés, azzal sok idő és pénz takarítható meg.

Megoldások

A Flutter Web-es megoldása kínál olyan PWA megoldást, ami a későbbiekben natív Android vagy iOS applikációkká bővíthető. Ennek tetejében a két platformra egyszerre készül el a program. A Flutter keretrendszerről írtam korábban, ami nagyon jó megoldást kínál egy PWA vagy SPA (Single-Page Application) kiadásához.

Amennyiben nem vagy biztos benne, hogy merre indulj el, keress meg bizalommal, hogy beszéljünk a személyre szabott megoldásodról!

További Flutter-ről szóló cikkjeimet érdemes elolvasni.

A cikk megírásához a www.coredna.com hasonló posztjából szemezgettem.

Útjára indult a Flutter (Dart) Hungary csoport a LI-en

A Flutter Dart Hungary LI csoport logója

Útjára indult a Flutter (Dart) Hungary csoport a LinkedIn-en.

Csatlakozz, hogy érdekes cikkeket és beszélgetéseket olvashass a modern mobil-, és webalkalmazás fejlesztésekről!

Gondoltunk a CEO-kra, döntéshozókra, designerekre, fejlesztőkre, hogy mindenki megtalálja a számára ideális tartalmat.

Várok mindenkit szeretettel a csoportban. (A jelentkezés kéréshez kötött.)

Ha csak kapcsolódnál velem, akkor azt itt tudod megtenni.

LinkedIn logo

UICode Low-code: egy Figma plugin, ami Flutter kódot generál
Terjedőben a Low-code megoldások

Tetszetős szlogen: mindenki azt végezze, amihez ért!

A UICode egy olyan low-code Figma plugin, ami képes elég jó Flutter kódot generálni. A mai UI tervezők a Figma online eszközt használják, ami kitűnő prototípus építésre, wireframe építésre. Tovább finomítva, egy bemutatható alkalmazást adhatunk a célcsoportunk kezébe. A UICode ezen túlment, és a népszerű Flutter keretrendszerhez készített egy plugin-t, amivel már kódot is tudunk generálni. Az, hogy mire elegendő, megnéztem.

A Flutter 2.0 alig pár hete, március 3-án debütált. Nagyon várta a közösség, hiszen olyan fantasztikus funkciókat kapott, hogy a Web végre stable, azaz éles környezetben is bevethető. Ezen kívül 3 desktop OS-re is megkapta ugyan ezt a státuszt: Linux, Windows, macOS.

Előkészületek

Nem célom most a Figma lehetőségeit taglalni. Ezeket jól ismerjük. Én személy szerint nagyon szeretem, mert gyorsan lehet vele haladni. Kitűnő intuitív funkcionalitásával az ingyenes verzió bőven kielégíti a szükségleteimet. De a havi 12 USD sem drága érte, ha valaki komolyan gondolja.

Elkészítettem az alábbi két egyszerű képernyőt, hogy ezen teszteljem a lehetőségeket. Szándékosan nem vittem túlzásba, hiszen alap dolgokat akartam megnézni a UICode low-code lehetőségeivel.

Figma egyszerű prototípus
Két egyszerű képernyő a Figmában

Mit tud a UICode Low-code plugin-ja?

Telepítsük a UICode low-code plugin-t. Ez innen telepíthető a Figma-ba. Nekem Google Chrome-ban működött jól, Firefox-ban például meg sem szólalt.

Ezután, hogy egy valós alkalmazás érzetét keltsem, beállítottam néhány kattintható gombot, és áttűnést tettem hozzá.

Figma prototípus bedrótozása
Navigáció a képernyők között

Ezután a Figmában a Menü -> Plugins -> UICode pont alatt érhető el, és nyílik meg ez a képernyő. Először rákérdez, hogy a tervünkből melyik képernyőket szeretnénk használni. Ezeket bejelölve néhány automatikus csoportosítást elvégez.

A UI Elements fülön kiválasztva a Frame 1-et megtalálja a szövegeket, és a gombokat. A gombokat az alapján sorolja oda, hogy van-e interakció vele. De ha nem ismerné fel, ez előfordul, akkor az Edit button-nal tudtam hozzáadni másikat.

Az Assets-ben a képeket tudjuk belistáztatni vele. Általában elsőre megtalálja őket.

UICode low-code beállítások
A UICode low-code plugin elvégzi a rendszerezést helyettünk

Ha ezekkel megvagyunk, akkor jöhet a kódgenerálás! A Frames tabon kattintsunk a Download project gombra. Elkészíti az állományokat. Még egyszer a Download gombra kell kattintani, hogy le is töltse. Nem mellesleg becslést ad, hogy hány órát spóroltunk meg ezzel. Mégha nem is pontos, de minden esetre elgondolkoztató. Nem is beszélve a sokkal összetettebb kinézeteknél.

UICode letöltés
Projekt file-ok elkészítése és letöltése

Egy ZIP állományt kapunk, amit csak bepattintunk az Android Studióba, és már indíthatjuk is a build-et. Mivel a Web már elérhető, ezért én inkább a Chrome-ban néztem meg.

A kész munka
A megtervezett kinézetet jól visszaadja

A végeredmény

Átnézve a kódot, felemás az érzetem. Sajnos Stack és Padding elemekkel operál. Ez nem túl szerencsés a különböző képernyőméretekre nézve. Konkrét pixelekben adja meg a szélességeket, távolságokat a képernyő tetejétől.

Jobban megnézve a használt csomagokat, a reszponzív méretezéshez a Flutter ScreenUtil csomagot használja. Ez viszont már egy jobb megoldásnak mondható. A csomag készítői nem mondanak kevesebbet, minthogy elfogadható kinézetet (“resonable layout”) készít a képernyőnkhöz és a betűkhöz. Valóban, amikor átméretezésre kerül a képernyő, vele együtt a kinézet is elfogadható marad. Természetesen akkor, ha az eredeti képernyő arányok közelében maradunk.

A keletkezett kód nem kellően struktúrált. Felismeri a képernyőket, és megfelelően elnevezi. Viszont az egyes komponenseket ömlesztve hozza létre a kódban. (Láttam ennél sokkal rosszabb megoldást az Adobe XD-ben, ahol minden SVG volt. A kód emiatt kellőképpen átláthatatlan.)

A kérdés, hogy ez használható-e kiindulásként? Úgy gondolom, hogy egy próbát megér, bár talán nem ebben a verziójában. Kezdésnek biztató, de a Flutter pont attól nagyon jó, hogy viszonylag komplex felületeket (widget) gyorsan lehet létrehozni benne.

Letölthető példák:

A web-es példát kicsomagolva, egy Python webszerveren könnyedén futtatható böngészőben:

Python 2 — python -m SimpleHTTPServer 8000

Python 3 — python -m http.server 8000

Böngészőben a http://localhost:8000 címen tudjuk megnyitni.

Konklúzió

A UICode egy low-code megoldást hozott, de még nem tökéletes.

Amennyiben sikerül megoldani, hogy:

  • alap architekturális megoldásokat bevezet az elemek rendszerezésére
  • a gombokat, összetett komponenseket (Component) ki tudja renderelni
  • színkódokat kiszervezi
  • a lehető legújabb verziójú csomagokat (package) és keretrendszert használják

ez egy jó kezdeményezés lesz.

A produktivitást nagyban növeli, ha egy designer elkészített művészi megoldását a lehető leghűbben tovább tudja folytatni egy fejlesztő. Nem kell kidobni vagy újrakezdeni a munkát, hanem ahol az egyikük befejezte, a másik onnan folytatja.

Ha tetszett az írásom, ajánlom figyelmedbe a további érdekességeket is: