După o creștere treptată și relativ silențioasă, una dintre mulțimea de tehnologii web promițătoare a început să manifeste tot mai multă inerție. Originând în jurul anului 2015, standardele ce sunt încorporate termenului umbrelă de Aplicații Web Progresive (en: Progressive Web Apps / PWA) au bătut o cale lungă.
Principiile ce stau la baza acestora, specificațiile tot mai consolidate cât și contextul le-au permis să devină din ce în ce mai adoptate de către industrie.
Vă invităm să luați parte la un scurt tur istoric în Experiența Utilizatorului (UX), menit să ilustreze legătura dintre tendințele recente ale webului și motivul pentru care PWA își merită definiția informală de 'aplicații web ce și-au luat toate vitaminele".
Pe parcursul ultimilor zece ani am putut observa extinderea graduală a webului, dinspre partea de server tot mai mult către partea client - pe PC-uri, laptopuri și tablete; telefoane și ceasuri inteligente.
În paralel cu această extindere legată de unde se procesează webul, s-a conturat o evoluție semnificativă și în ceea ce privește modul în care se procesează. Astfel, viteza a crescut exponențial, iar hardware-ul tot mai performant de pe partea de client suportă webul tot mai bine. Așadar, putem afirma că maniera în care putem folosi webul a progresat cu adevărat.
Una din pietrele de temelie ce a îngăduit acest lucru o constituie o tehnică de programare web numita AJAX, ce permite comunicarea asincronă între un client web și un server fără a fi nevoie de o reîncărcare completă a paginii web.
Acest tip de progrese în tehnologia hardware-ului și a software-ului au fost întâmpinate cu o intensitate pe măsură din partea proceselor de creare de software. Producem designuri, prototipuri și testăm cu atenție experiența pe care o produc aplicațiile noastre. Implementăm funcționalități tot mai complexe folosind unelte veșnic mai bune, ținând cont de setul crescând de dispozitive tot mai capabile să redea webul.
Pe lângă responsive design și accesibility, noțiuni precum progressive enhancement și graceful degradation au devenit reflexe înnăscute în dezvoltarea de interfețe grafice pentru utilizatori, transformând ceea ce erau o dată pagini web în care aproape tot ce puteai să faci era să citești, în aplicații web ce suportă interacțiuni complexe.
În ultimii ani, aceste bucăți de puzzle pe care le-am menționat până acum s-au asamblat, pentru a forma imaginea completă a următorului nivel de aplicații web interactive.
Sursa logo-ului: https://github.com/webmaxru/progressive-web-apps-logo/issues/4
Pentru a capta trăsăturile principale ale unei aplicații web progresive într-o formă și mai ușor de digerat, am agregat un set de scenarii sau user journeys în forma unei narațiuni de UX pe capitole.
I. Într-o zi însorită de sâmbătă John iese la o cafenea, își deschide laptopul si accesează web site-ul publicației online preferate din industria în care lucrează. Răsfoind prin articole, zărește și rezumatul unui subiect ce anunța re-re-re-relansarea versiunii pentru telefon a site-ului, invitând cititorii să-și salveze și pe telefoane un shortcut către URL-ul acestuia.
În timp ce mai răsfoiește prin articole, soarbe din cafea, își propune să încerce cândva și versiunea mobilă și începe să parcurgă în întregime articolele ce îl interesează.
II. Deși, de obicei folosește exclusiv laptopul pentru aceste lecturi online, după câteva săptămâni deschide același web site dar folosind browserul de internet de pe telefon. Spre surprinderea lui pagina se încarcă deosebit de rapid, mai ales considerând conținutul bogat al versiunii pe care o accesa mereu pe ecranul mai mare al laptopului.
Atât structura vizuală a conținutului cât și elementele de tipografie se adaptează cu adevărat dimensiunilor reduse ale ecranului de telefon și sunt ușor de citit și de navigat. Meniurile răspund bine comenzilor tactile și există și un buton amuzant ce seamănă cu un întrerupător, cu funcția de a schimba tema culorilor de pe ecran în nuanțe închise pentru citit seara.
Foarte încântat, decide să încerce și pasul de a salva un shortcut pentru pagina web direct pe telefon. Pagina îndeplinește acțiunea, apoi afișează o confirmare discretă ce nu îl întrerupe pentru a reconfirma.
Remarcă mesajul și - fără să îi dea foarte multă atenție în acel moment - continuă să citească câteva articole, după care închide browserul de internet de pe telefon și continuă cu alte activități.
III. După câteva zile, John apasă pe shortcutul site-ului web de pe telefonul său. Însă site-ul nu se deschide într-un nou tab din browserul de internet, ci într-o aplicație cu totul separată, deși nu a instalat una pentru acest site din magazinul online de aplicații. John se încruntă ușor, un pic surprins.
În timp ce începea să-și amintească vag o parte din aceste lucruri - menționate în acel articol inițial de relansare a versiunii mobile - deschide pe telefonul său ecranul în care poate naviga printre aplicațiile active sub forma unei liste de ferestre. Aici observă că într-adevăr, site-ul web al publicației sale preferate este acum o aplicație, așezată din coincidență chiar lângă fereastra aplicației de browser de internet. Copiii cresc atât de repede, se gândește browserul.
IV. Într-o după-amiază târzie, stând la coadă într-un supermarket - într-o clădire cu semnal de rețea foarte slab - John intră din nou pe site-ul aplicația publicației. Primul ecran se încarcă la fel de rapid ca și ultima dată, deși accesul la internet este foarte îngreunat. Observă un buton intitulat 'Încarcă conținut recent', dar și un indicator în aplicație ce îl anunță că este din cauza conectivității scăzute, iar conținutul aplicației poate fi învechit.
V. Se apropie o călătorie de afaceri. În afară de bagaje John își amintește să-și pregătească și ceva de citit pe zbor, așa că pornește și această aplicație, răsfoiește prin cel mai recent set de articole și apasă butonul 'Citește mai târziu' din mai multe articole. Iar pentru a scăpa de un anunț periodic din telefon, își descarcă și instalează cea mai recentă versiune a sistemului de operare.
În timpul zborului, pornește aplicația pe care și-a salvat articolele. Aceasta se deschide aproape instant (cu tema vizuală pe care a ales-o ultima dată) și îi redă articolele salvate la fel de rapid, fără o conexiune activă la internet.
Începând să înțeleagă mai profund unele subiecte din articole, decide că vrea să le urmărească și pe viitor, așa că apasă pe un buton pentru a se abona la acele teme. Aplicația îl înștiințează că va reîncerca să facă abonarea, următoarea dată când va avea acces la internet.
VI. După câteva zile, fără să aibă aplicația deschisă (nici măcar rulând în fundal), John primește pe telefon înștiințări că au apărut noi articole pe temele pe care s-a abonat.
Nimic din cele descrise nu sună ca ceva Sci-Fi în materie de aplicații mobile.
Avantajul principal este că toate funcționalitățile descrise în aceste scenarii au fost adăugate gradual sau mai bine zis progresiv peste codul existent al unei aplicații web deja dezvoltate, doar pentru browsere ce le suportă; folosind tehnologii web standard, fără a recompila codul aplicației către o tehnologie nativă (Java, Objective C sau C#); și fără a trece acel cod prin procesele unui magazin online de aplicații mobile.
Conținutul aplicației rămâne în profunzime integrat în web: paginile sunt indexate, pot fi descoperite prin intermediul motoarelor de căutare și pot fi actualizate prin modelul standard de distribuție fluidă a webului. Utilizatorii pot accesa cu precizie locații exacte din interiorul unei aplicații folosind URL-uri, iar conținutul acestora rămâne accesibil și pentru persoane ce folosesc telefoane sau dispozitive cu tehnologii de asistență.
Sursa ilustrației: https://developers.google.com/web/progressive-web-apps/
"Progressive Web Apps are user experiences that have the reach of the web, and are: Reliable, Fast and Engaging […]".
"Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform web applications. These apps work everywhere and provide several features that give them the same user experience advantages as native apps."
Aceste definiții cu rol de linie de start în documentațiile Google respectiv MDN (Mozilla Developer Network) cuprind ceea ce realizează PWA precum și pilonii din spatele lor, invitând dezvoltatorii să parcurgă și să exploreze noțiunile.
Documentația Google Developer Docs include și o listă, plină de sugestii utile și referințe către unelte și documentații mai avansate, ce descrie seturile de caracteristici minime și optime, pe care o aplicație web trebuie să le îndeplinească pentru a se califica ca o PWA.
Parcurgând câteva principii centrale din cadrul documentației, observăm că blocurile fundamentale ce construiesc un PWA sunt un fișier de tip manifest, și un service worker.
Primul grupează meta data sau date descriptive despre aplicație, pentru ca un dispozitiv (precum un telefon) să o poată recunoaște ca fiind PWA și să înțeleagă cum să o redea ca o aplicație separată.
Al doilea și cel mai interesant constă într-un fișier de javascript ce poate fi rulat de către browser în fundal, având un lifecycle propriu, separat de al aplicației web de care aparține. Avantajul service worker-ului constă în abilitatea sa de a asculta, intercepta și răspunde la semnalele de rețea dintre acel dispozitiv și un server, chiar și atunci când aplicația nu este activă.
Sursa ilustrației: https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
Din punct de vedere arhitectural se folosește modelul application shell + content sau rama aplicației + conținut (în loc să fie servite cuplate), unde acel shell sau ramă este stocată local pe dispozitiv prima dată când un utilizator accesează url-ul unei aplicații web.
Acest lucru permite aplicației consistență și viteză la pornire, indiferent de starea rețelei și a semnalului dispozitivului.
Dacă ceva îngreunează sau blochează accesul unui dispozitiv la rețea, utilizatorul nu trece prin experiența întrerupătoare a ecranului de eroare din browser în care aplicația nu se mai încarcă deloc. În schimb, utilizatorul va fi doar anunțat că datele afișate pe ecran pot fi învechite sau că date noi nu pot fi aduse; iar în cel mai rău caz, dacă aceste funcționalități nu sunt implementate, se va afișa un ecran ce comunică lipsa conexiunii la internet, respectând și fără să părăsească designul aplicației.
Acest model shell + content înseamnă de asemenea că după ce shellul a fost stocat local pe dispozitiv după prima accesare, de fiecare dată când utilizatorul pornește aplicația aceasta se va încărca semnificativ mai rapid decât dacă s-ar fi încărcat de la un server. Deși aplicația va trebui în continuare să aducă cel mai recent conținut, acest lucru poate fi făcut și în fundal, în timp ce ecranul principal al aplicației s-a deschis deja, poate cu acel conținut stocat ultima dată. Și pentru a face experiența de pornire a aplicației mai captivantă, butoanele și controalele tipice ale unui browser pot fi dezactivate complet.
Ca și multe produse și tehnologii din industrie, uneori poate fi nevoie de mai multe încercări - adesea de la companii diferite - până când un concept web să fie adoptat de către dezvoltatori și/sau de către public.
Cu toate că ultimele progrese în compatibilitatea pe platforme sunt foarte promițătoare, există în continuare diverse probleme ce pot face atât experiența dezvoltatorilor cât și a utilizatorilor una mai puțin ideală pe alocuri.
Lucruri precum inconsistența funcționalităților PWA între platforme diferite - cauzate fie de suport parțial, fie întreg dar implementat intenționat în mod diferit de către platforme - înseamnă că dezvoltatorii de aplicații trebuie să considere cu atenție cât de bine și în ce fel suportă fiecare platformă PWA-urile, pentru a asigura utilizatorilor o experiență cât mai lină și consistentă.
PWA duc aplicațiile web interactive câțiva pași înainte, adăugându-le noi dimensiuni - unele ca extensii ale naturii webului, altele împrumutate din tehnologiile native. Ele aduc creatorilor de software web două abilități:
Cu toate că nu este prima dată când astfel de eforturi sunt făcute pentru a urni aplicațiile web către această direcție, fundațiile, principiile și specificațiile PWA-urilor împreună cu felul în care au fost adoptate până acum - și de acum înainte anunțat de către platforme - sugerează că sunt șanse mari ca această ideologie să se consolideze în industrie și pe termen lung.
Google a început deja să documenteze câteva studii de caz pe blogurile lor, captând experiența și motivația unor companii precum Twitter, Forbes, OLX, cu detalii relatate de către echipele acestora.
Alt studiu de caz pentru un brand popular - Starbucks PWA construită de către compania Formidable - menționează o performanță crescută a aplicației, dimensiuni de fișier reduse semnificativ și o implicare puternic crescută a utilizatorilor, printre alți indicatori cu rezultate pozitive.
Dacă doriți să vedeți în acțiune un PWA direct pe telefon, vă invităm - ca și pe John - să vă salvați pe ecranul home din telefon linkurile de mai jos, și să explorați diverse abilități PWA presărate în acestea:
Pe data viitoare!
de Lucian Mâțu
de Elena Leu
