PWA: QUÈ ÉS UNA PROGRESSIVE WEB APP?

Las PWA son aplicaciones webs que hacen uso de las tecnologías más novedosas y potentes de los navegadores.

Se les anomena progressive perquè incrementen la seva funcionalitat en funció de les capacitats del dispositiu en el qual s’executen. Són web perquè es construeixen utilitzant estàndards de desenvolupament web (alguns ja coneguts com HTML, CSS, JavaScript, i una nova generació d’APIs de JavaScript), i, finalment, s’anomenen app perquè les Progressive Web Apps es comporten com aplicacions web natives, només que utilitzen tecnologies web.

Les Progressive Web Apps constitueixen un conjunt de nous estàndards que han fet que actualment, PWA es converteixi en un concepte.

BREU HISTÒRIA

L’aparició d’apps natives (iOS, Android, entre d’altres), va comportar un seguit d’avantatges enfront de les pàgines web com ara l’emmagatzematge local, execució offline, rendiment, etc. Però els avantatges de les apps natives sobre les pàgines web s’han anat reduint progressivament.

Les innovacions i elements introduïts per HTML5 van aconseguir apropar l’experiència de les interfícies web a la de les aplicacions natives. Posteriorment, van aparèixer les apps híbrides, combinant tecnologies web com HTML, CSS i JavaScript, però no són ni aplicacions mòbils natives ni estan basades en web. Les aplicacions híbrides han millorat la instal·lació, l’accés al hardware i les push notifications, però no proporcionen resultats òptims pel que fa a rendiment, User Experience i accés offline.

Actualment, seguint el progrés dels estàndards i els navegadors, és possible crear aplicacions web que aconsegueixen igualar els avantatges de les aplicacions natives. Són aplicacions web, però per a l’usuari, fer servir una PWA és (o hauria de ser) el mateix que utilitzar una app nativa.

OBJECTIUS PRINCIPALS D’UNA PWA

Los objetivos al crear una PWA son:

• Máximo rendimiento en móviles 
• Velocitat de càrrega instantània
• Interfaz igual a la interfaz de app nativa
• Icono y acceso desde la página de inicio
• execució i accés offline
• Push notifications

Per aconseguir aquests objectius, les PWA es basen en els següents conceptes:

Service Workers: Els Service workers són una tecnologia que permet executar serveis en segon pla en navegadors. Els Service Workers poden executar-se de manera independent a l’aplicació (poden mantenir-se en execució mentre l’aplicació web està tancada). Ofereixen capacitats avançades: la intercepció de comunicacions, el “caché” d’informació, la descàrrega en segon pla de continguts, el treball sense connexió o la possibilitat d’enviar notificacions (Push Notifications).

Els Service Workers proporcionen una notable funcionalitat per fer emmagatzematge fora de línia d’informació. No és estrictament necessari utilitzar Service Workers per a crear una PWA, però és el més aconsellable si l’aplicació web que vols crear requereix funcionalitats avançades.

App Shell: L’App Shell és un model o patró per crear aplicacions web. Consisteix en separar el contingut i la funcionalitat en l’aplicació. D’una banda, es cachea l’aplicació per al seu ús fora de línia optimitzant la velocitat de càrrega; i, d’altra banda, la càrrega de contingut pot realitzar-se des d’un caché inicial i després actualitzar-se, o directament des de la web si hi ha connexió. L’objectiu és aconseguir que la percepció de l’usuari de la velocitat de càrrega de l’app sigui més gran. Al carregar inicialment el “shell” des d’un cache, l’usuari veurà l’app de forma immediata.

Manifest d’aplicació:Consisteix a crear una icona que els usuaris poden ancorar a la seva pàgina d’inici per accedir a l’aplicació web directament. Per controlar l’aspecte de la icona és possible utilitzar diverses tècniques depenent de el navegador i el sistema operatiu. En iOS es controla a través d’unes capçaleres de tipus “meta” que poden afegir-se a la pàgina principal de l’aplicació web. En el cas d’Android i Chrome s’utilitza un arxiu anomenat “Manifest”. Addicionalment, Google fa que quan s’afegeix una aplicació a el menú d’inici d’Android aparegui un banner d’instal·lació com el d’una aplicació real, tot això amb la finalitat que l’experiència sigui cada vegada més similar a la de les aplicacions natives.

La major avantatge de crear una progressive web app és que si ja tens una aplicació web, és molt senzill portar l’experiència d’una app nativa.