Progressive Web Apps (PWA)

Què són les Progressive Web Apps o PWA?

Les Progressive Web Apps són la combinació tecnològica d'aplicacions natives i les aplicacions web basades en HTML5 que coneixem. Les PWA han arribat per salvar la bretxa tecnològica entre apps i pàgines web.

Google ha estat un dels principals defensors a l'hora de fomentar el desenvolupament d'aquest tipus de tecnologia. Per entendre millor les seves característiques, hem de parlar d'aplicacions que han de ser fiables, ràpides i atractives.

Característiques que han de tenir les Progressive Web Apps

Per fer el concepte de PWA prou clar i explicat, capbussem-nos en les característiques essencials que aquestes tecnologies han de tenir.

Per descomptat, parlem en termes generals. A partir d'aquí, cada model de negoci/servei adaptarà els seus objectius a les necessitats de la seva pròpia audiència objectiu.

Velocitat

El temps és diners, no només per a Google sinó per a tots aquells negocis on la càrrega lenta dels seus productes pot fer que els usuaris abandonin una compra potencial.

Google ha estat insistint en aquesta premissa des de fa molt de temps. El naixement del projecte AMP tenia aquest objectiu, i ara les PWA s'uneixen a la necessitat d'accés ràpid a la informació des d'aplicacions.

Els usuaris d'avui no tenen paciència; no esperen que un lloc es carregui completament. El 53% dels usuaris no esperarà més de 3 segons que es carregui una pàgina web, segons Think with Google

Fiable

Quan parlem de fiabilitat, ens referim a les garanties de funcionament del lloc. Gràcies al que es coneix com a Service Workers, els problemes de connexió de xarxa no haurien d'impedir que la PWA es carregui.

Instal·lable

Les PWA es poden instal·lar sense necessitat d'anar a la Chrome Store, l'Apple Store o cap de les botigues d'aplicacions existents. Recorda que no són aplicacions natives, així que hi podem accedir sense passar per aquestes botigues.

La instal·lació es comporta simplement com una drecera; no necessita espai per emmagatzemar els diferents fitxers.

Diferents dispositius: mòbil i escriptori

La base de codi està unificada entre tots dos dispositius, la qual cosa significa que les tècniques de disseny responsive s'apliquen tant a mòbil com a escriptori.

Avantatges i desavantatges de les PWA

Alguns avantatges ja s'han esmentat anteriorment en explicar les característiques de les aplicacions progressives. Però hi ha moltes més raons per considerar utilitzar aquesta tecnologia al nostre negoci.

• ›Estalvi de recursos
• ›No es requereix instal·lació
• ›Velocitat de càrrega molt elevada
• ›Notificacions push directes als smartphones
• ›Funciona a tots els sistemes operatius
• ›Seguretat millorada
• ›Menys feina de desenvolupament i manteniment que una app nativa.
• ›Més econòmica que una app nativa.

Desavantatges

• ›Requereix connexió a internet.
• ›No tots els navegadors admeten PWA.
• ›Alt consum de bateria

Què és un Service Worker?

Tornant breument a la part tècnica, hem de parlar de certs aspectes sense els quals les aplicacions progressives no podrien funcionar. Els service workers són scripts que s'executen en segon pla, fent peticions a aplicacions web, cau o a la mateixa xarxa.

Una cosa important que hem de saber és que els Service Workers només poden funcionar si tens un certificat SSL i els serveixes via https.

Ara veiem-ho tot amb un exemple: la pàgina web de BMW i la seva PWA.

Exemple de PWA: BMW

He intentat escriure un article sense aprofundir en aspectes tècnics, i ara veurem un exemple d'una aplicació que ajudarà a entendre millor el concepte de PWA.

Si entrem a la pàgina web de BMW, podem veure que tenen un disseny molt atractiu, prioritzant el visual, però més enllà de parlar de disseny, vegem amb quin tipus de pàgina web estem tractant.

Aparentment és una pàgina web "normal", però si remenes el codi tenim la primera sorpresa. Efectivament, és una pàgina web íntegrament desenvolupada en AMP, no només la versió mòbil.

Però anem al tema d'avui.

Un cop dins de la pàgina web, anem a la barra "personalitzar i controlar" de Chrome.

Com has pogut veure, s'ha obert una finestra amb el contingut de la pàgina web de BMW. Comparant tots dos continguts, veiem que són pràcticament idèntics.

Imatge de la pàgina web al navegador (Chrome)

Imatge de la pàgina web en PWA d'escriptori

Els desenvolupadors de BMW han aconseguit mantenir un aspecte visual idèntic. Quan acceptem la "instal·lació" de la PWA a la nostra carpeta d'aplicacions de Chrome o fins i tot a l'escriptori (segons l'OS, actualment estic utilitzant MacOS), s'ha descarregat una drecera a la PWA.

Si ens supera instal·lar apps i volem desinstal·lar, només hem d'anar a la nostra finestra de versió PWA, fer clic al costat dret igual que a Chrome i seleccionar desinstal·lar.

A la versió mòbil és pràcticament similar. Quan entrem a la pàgina web amb versió PWA, rebem una notificació per "crear una drecera".

Quan entrem a una pàgina web amb PWA; veurem una opció per crear una drecera.

Si acceptem, veurem una icona de PWA al nostre escriptori mòbil.

DevTools per saber més sobre les PWA

En aquest punt, vull endinsar-me en exemples per explicar conceptes i característiques d'aquest tipus d'aplicació.

Per a això utilitzarem l'eina de desenvolupador que proporciona Chrome (DevTools). Obrim l'inspector amb el botó dret i anem a Application.

Devtools de Chrome

App Manifest (Web Application Manifest)

El manifest és un petit fitxer JSON amb aspectes bàsics d'estil que proporciona al navegador per evitar canvis bruscos.

Exemple de Manifest (JSON)

Service Workers

Com hem explicat abans, ara podem veure de què va. Veiem el fitxer JS i en ell els scripts que utilitza. El Service Worker s'instal·la al navegador. En tindrem diversos d'altres aplicacions web.

Una de les funcions principals d'aquest tipus de codi és assegurar que sempre se serveixi la mateixa versió (controla la cau) encara que obrim una altra pestanya.

Com implementar PWA a WordPress?

Mentre que si hem desenvolupat la nostra pàgina web amb codi propi haurem de fer força feina manual, la situació serà molt diferent si hem desenvolupat la nostra pàgina web a WordPress. Si és el cas, tindrem diversos plugins a la nostra disposició que ens permetran activar la tecnologia PWA en un parell de clics. La versió PWA de SEO Alive, de fet, és el resultat d'aquest plugin que et recomanem.

Plugins més populars per implementar PWA a WordPress.

Les PWA en marketing

Per a aquells que treballem en marketing, les Progressive Web Apps ens poden ajudar a aconseguir objectius que tot departament de marketing té en ment per fer créixer una marca.

Fidelització i vendes

Un dels objectius pitjor treballats per algunes marques. Tots coneixem la baixa implicació que tenen les marques de telèfons mòbils a l'hora de tractar els seus clients, per posar un exemple.

Les notificacions push a les PWA són una de les accions que estan funcionant millor i contribuint a la generació de vendes.

Un estudi realitzat per Gartner sobre PWA ens dona una sèrie d'estadístiques molt interessants sobre Lancome i Alibaba; Lancome informa d'un increment del 17% en conversions, del 51% en sessions des de dispositius mòbils i del 52% a iOS. Alibaba (el grup al qual pertany Aliexpress) ha millorat la seva taxa de conversió en un 76%.

Tot i que hem parlat de 2 gegants globals, tenir una app al mòbil on el temps de càrrega i execució no sigui un llast, a més de respectar un bon disseny, ha demostrat augmentar la taxa de conversió.

Com a conclusió, podem dir que les PWA s'estenen cada cop més, principalment entre les grans marques. A Espanya, probablement trigarem una mica a adonar-nos de l'enorme potencial d'aquesta tecnologia, però més aviat que tard s'implementarà.

Qualsevol tecnologia que faciliti la navegació mòbil té una gran importància; passem moltes hores amb els nostres smartphones i, en última instància, l'accés tant a contingut com a productes és negoci.

Referències

• ›Documentació de Google sobre PWA