Què és una PWA?

Què són les PWA?

Tot i que no es tracta d'una tecnologia nova, han cobrat importància perquè cada cop són més els programes que, com Google Chrome, Firefox i Safari, les admeten. A això s'hi suma que Microsoft ja ha començat a incloure algunes PWA a la seva botiga, llestes per ser utilitzades després de l'última actualització del seu sistema operatiu Windows 10. Cada cop són més les companyies que, com Twitter, Skyscanner, Trivago, Tinder o Starbucks, s'han llançat a explorar el potencial de les progressive web apps.

Per conèixer millor a què ens referim quan parlem d'una progressive web app, començarem indicant què NO és una PWA:

• No és una extensió de navegadors web
• No és un plugin o llibreria per als frameworks
• No és un framework com React, Angular o Vue.js
• No és només Responsive Design
• No és semblant a React Native, Native Script o Ionic

Una PWA es pot definir en resumides comptes com una aplicació mòbil accessible a través del navegador. Es tracta d'un punt intermedi entre les aplicacions webs i les natives, aprofitant les millors prestacions de cadascuna d'elles: disseny responsiu, possibilitat d'instal·lar-la al dispositiu, accés offline, sempre actualitzada gràcies a l'ús de Service Workers, indexable des del navegador i enllaçable mitjançant URL, accés a les funcions natives del dispositiu mòbil…
Il·lustració sobre les progressive web apps.

I, per què han cobrat gran importància?

Mentre que visitar els llocs d'internet tradicionals és un procés ràpid i senzill, la veritat és que solen oferir una experiència d'usuari molt més pobra que les aplicacions. Per la seva banda, les apps natives, és a dir, les que s'instal·len al telèfon, proporcionen una millor experiència als usuaris, però estan limitades per les característiques del terminal i del sistema operatiu. El fet que sigui necessari descarregar-les implica que els consumidors han de posar un major esforç inicial, que després es perd en decaure aquesta impulsivitat amb el temps.

És per això que una PWA és una bona alternativa per desenvolupar la nostra aplicació, ja que són capaces d'oferir les mateixes prestacions i experiència d'usuari que les natives, sent més eficients en ocupar menys espai a la memòria del telèfon i consumint menys dades.

Per a què serveix una Progressive Web Application?

Explicat de manera senzilla, les PWA funcionen com les apps habituals, ja que es basen en un entorn que permet el mateix estil de navegació i d'interacció gestual que aquestes eines. La principal diferència és que no cal descarregar-les de cap botiga d'aplicacions, ja que s'executen directament al navegador.

A continuació, detallem les principals característiques d'aquesta tecnologia:

• Progressiva: funciona per a tots els usuaris, sense importar l'elecció de navegador, perquè està construïda amb millora progressiva com a principi central.
• Adaptable: s'adapta a qualsevol factor de formulari, sigui escriptori, mòbil, tauleta o el que vingui en el futur.
• Independent de la connectivitat: millorada amb service workers per treballar sense connexió o amb xarxes de mala qualitat.
• Estil app: a l'usuari li sembla una app amb interaccions i navegació estil app, perquè està construïda amb model de shell d'app.
• Fresca: sempre actualitzada gràcies al procés d'actualització de service worker.
• Segura: emesa via HTTPS per evitar intromissions i per garantir que el contingut no s'hagi manipulat.
• Descobrible: es pot identificar com a «app» gràcies al manifest W3C i a l'abast de registre de service worker, la qual cosa permet que els motors de cerca la trobin.
• Possibilitat de tornar a interactuar: facilita la possibilitat de tornar a interactuar a través de funcions com notificacions push.
• Instalable: els permet als usuaris «conservar» les apps que els resulten més útils a la seva pantalla principal sense la molèstia d'una botiga d'apps.
• Vinculable: es pot compartir fàcilment via URL, no requereix instal·lació complexa.

De fet, una progressive web app pot considerar-se una evolució de les aplicacions web com les ofertes per HTML5 i la tecnologia dels service workers, que permet executar serveis en segon pla en els navegadors. Gràcies a la combinació d'aquestes eines, les PWA poden carregar-se gairebé a l'instant, fins i tot en zones amb escassa connectivitat. A més, aquestes aplicacions utilitzen estàndards oberts i es desenvolupen amb llenguatges de programació i plantilles similars a les emprades en aplicacions web tradicionals.

Així, un dels pilars bàsics d'una progressive web app és la coneguda com application shell architecture o app shell, un model que permet crear una PWA que es carrega a la pantalla ràpidament, de manera similar a les aplicacions natives. L'app shell no és altra cosa que l'esquelet o estructura bàsica de l'aplicació, aquella que permet activar la interfície d'usuari i en la qual es carregarà el contingut.

Un cop obrim una PWA, aquest paquet bàsic s'emmagatzemarà a la memòria cau del navegador i utilitzarà un service worker perquè aquesta funcioni. A partir d'aleshores, com ja tindrem els components necessaris per posar en marxa l'app, podrem tornar a obrir la progressive web app de forma ràpida i sense necessitat de tenir una connexió a internet en les següents visites, assegurant un major rendiment i fiabilitat.

Gràcies a aquestes tecnologies que permeten la seva execució en segon pla, és possible no només utilitzar-les en el navegador, sinó també afegir-les al mòbil com si fos una aplicació nativa més, però ocupant molt menys espai en el telèfon que aquestes. Al cap i a la fi, l'únic que estem instal·lant és el service worker encarregat d'emmagatzemar la memòria cau i assegurar-se que l'eina segueix funcionant encara que la connectivitat sigui inestable.

Quins són els avantatges d'una PWA enfront d'altres opcions?

Una progressive web app presenta nombrosos avantatges enfront de les aplicacions natives i les aplicacions web tradicionals. Respecte a les primeres, són molt més eficients en ocupar menys espai en la memòria del telèfon i consumir menys dades, tot això oferint les mateixes prestacions i experiència d'usuari que les apps natives.

A més, utilitzar una PWA permet provar-la abans d'instal·lar-la (si és que així es desitja) i estalviar el tediós procés de descàrrega i la presa de decisions relatives a la instal·lació o desinstal·lació de l'eina, accelerant els tràmits i eliminant passos innecessaris.

Des del punt de vista dels desenvolupadors, la creació i manteniment d'una progressive web app resulta més econòmic i senzill que en el cas de les aplicacions natives. Tant confeccionar-les com actualitzar-les és molt més ràpid i no és necessari crear una versió de la PWA per a cada tipus de dispositiu, sinó que una sola basta per executar-se i visualitzar-se adequadament en tot tipus de pantalles, per això també tarden menys a carregar-se. Ni tan sols precisen discernir entre Android o iOS, ja que funcionen en navegadors comuns als dos sistemes operatius.

Altres dels motius per a la seva adopció és que ofereixen una major seguretat enfront del malware, ja que els atacants ho tenen més difícil per accedir a certes parts del sistema, i que permeten enviar notificacions push als usuaris que poden mostrar-se en pantalla completa, de manera que l'usuari perd de vista el navegador mentre les utilitza.

Com assegurar una bona UX en el desenvolupament de la nostra Progressive Web App?

Com hem comentat, una PWA pot ser una bona opció per desenvolupar la nostra aplicació, però si no tenim en compte certs aspectes a l'hora de dissenyar-la amb l'objectiu de proporcionar una bona experiència d'usuari, és possible que la nostra app no tingui l'èxit esperat.

Tot i que el procés de disseny d'una PWA pot ser similar al d'una aplicació nativa, hi ha certes peculiaritats a les quals hem de prestar atenció i que reunim a continuació:

Enfocament natiu

És important que el disseny d'una PWA tingui el aspecte i sensació d'una aplicació nativa perquè l'usuari se senti totalment familiaritzat.

Evitar transicions lentes de pantalla per bloquejos a la xarxa

Els problemes de transició entre pantalles en una PWA poden donar-se quan els usuaris toquen un element interactiu, han d'esperar i mirar fixament la pantalla en la qual es troben abans de ser redirigits de sobte a la nova pantalla desitjada.

Això fa que l'usuari se senti molest en no rebre resposta immediata. Per això, una PWA ha d'evitar aquesta sensació, proporcionant a l'usuari la percepció que tota l'aplicació s'emmagatzema localment en el dispositiu i que només el contingut és el que es carrega dinàmicament. Per a això, hem de recórrer a l'ús de pantalles esquelètiques.

Les pantalles esquelet són bàsicament pantalles buides que es mostren després d'una interacció de l'usuari i el contingut de les quals es carrega gradualment com podem observar en el següent exemple:

Mostrar interacció

Quan l'usuari interactua amb els elements de la interfície de la nostra app, ha de tenir la sensació immediata que el toc ha estat reconegut. Per a això, hem de ressaltar l'element seleccionat amb un altre color diferent o amb alguna animació.

El contingut no ha de saltar mentre es carrega la pàgina

Perquè el navegador pugui dissenyar la pantalla correctament encara que la imatge no s'hagi carregat, és important que totes les etiquetes img a la nostra PWA tinguin la dimensió de la mateixa definida. En cas contrari, el contingut de la pantalla saltarà quan es descarreguin les imatges afectant negativament l'experiència d'usuari.

Per evitar això, podem mostrar un marcador de posició on es mostrarà la imatge mitjançant un requadre gris o una miniatura difuminada com es mostra a continuació:

Conservar la posició exacta de desplaçament de la llista

Quan un usuari selecciona un element d'una llista i visualitza el seu detall, en prémer sobre l'opció "enrere" ha de tornar a la pàgina de la llista amb la mateixa posició de desplaçament amb la qual estava abans de prémer l'element. Això incrementa el nivell de satisfacció de l'experiència d'usuari a l'hora d'interactuar sobretot amb llistes grans.

Proporcionar opció de compartir

En el cas que la nostra PWA mostri informació que pugui ser d'interès per compartir, és important assegurar-se que l'usuari pugui compartir fàcilment el que està veient en aquell moment mitjançant un botó que permeti copiar la URL al porta-retalls o compartir-la a xarxes socials populars de manera senzilla i àgil.

Desfés-te del peu de pàgina

El peu de pàgina és una cosa comuna a les pàgines web. No obstant això, quan desenvolupem una PWA des d'un dispositiu mòbil, aquest element ocupa massa espai per contenir sempre la mateixa informació a totes les pàgines.

Les aplicacions natives, per aquestes raons, no disposen de peu de pàgina i la nostra PWA ha de seguir el mateix exemple.

Podem aprofitar aquest espai per afegir una barra de navegació amb els elements de navegació més rellevants.

Usar fonts del sistema

Una PWA és accessible des de moltes plataformes diferents, les quals tenen una font recomanada a la qual els usuaris ja estan acostumats. Fer ús de les mateixes en la nostra PWA afavoreix una experiència d'usuari molt més habitual i propera.

No ocultar entrades de text pel teclat

Quan un usuari toca un camp d'entrada d'un formulari, el teclat s'obre perquè pugui inserir text. De vegades, el teclat en obrir-se oculta aquesta entrada fent que l'usuari no tingui visible el text que està escrivint, la qual cosa resulta molt molest. En la nostra PWA hem d'intentar desplaçar-nos a diferents posicions en la pàgina i després tocar l'element d'entrada de text perquè aquest mai estigui ocult.

Auditant la teva PWA amb Google Lighthouse

I una vegada que he desenvolupat la meva PWA, com puc saber si totes les seves funcions han estat implementades correctament? Google ens pot donar un cop de mà comprovant-ho a través de Google Lighthouse.

Google Lighthouse és una eina d'auditoria open-source de llocs web llançada per Google a principis de 2018. Utilitza un conjunt de 5 paràmetres per classificar un lloc web en una escala de 0 a 100.

En relació a les PWA, proporciona un conjunt de mètriques basades en requisits relacionats amb la velocitat, seguretat, rendiment fora de línia, emmagatzematge en memòria cau, notificacions push, indexació, disseny responsiu i l'experiència d'usuari, entre altres.

Lighthouse prova si la teva aplicació:

• Es pot carregar en condicions de xarxa fora de línia o inestable
• És relativament ràpida
• Es serveix des d'un origen segur
• Utilitza les bones pràctiques en relació a l'accessibilitat