PWA: ¿Qué es 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 las llama progressive porque incrementan su funcionalidad en función de las capacidades del dispositivo en el que se ejecutan. Son web porque se construyen utilizando estándares de desarrollo web (algunos ya conocidos como HTML, CSS, JavaScript; y una nueva generación de APIs de JavaScript), y, por último, se las llama app porque las Progressive Web Apps se comportan como aplicaciones web nativas, sólo que utilizan tecnologías web.

Las Progressive Web Apps constituyen un conjunto de nuevos estándares que han hecho que actualmente, PWA se convierta en un concepto.

BREVE HISTORIA

La aparición de apps nativas (iOS, Android, entre otros), trajo consigo una serie de ventajas frente a las páginas web tales como el almacenamiento local, ejecución offline, rendimiento, etc. Pero las ventajas de las apps nativas sobre las páginas web se han ido reduciendo progresivamente.

Las innovaciones y elementos introducidos por HTML5 consiguieron acercar la experiencia de las interfaces web a la de las aplicaciones nativas. Posteriormente, aparecieron las apps híbridas, combinando tecnologías web como HTML, CSS y JavaScript, pero no son ni aplicaciones móviles nativas ni están basadas en web. Las aplicaciones híbridas mejoraron la instalación, al acceso al hardware y las push notifications, pero no proporcionaban resultados óptimos en cuanto a rendimiento, User Experience y acceso offline.

Actualmente, tras el progreso de los estándares y los navegadores, es posible crear aplicaciones web que consiguen igualar las ventajas de las aplicaciones nativas. Son aplicaciones web, pero para el usuario, usar una PWA es (o debería ser) lo mismo que utilizar una app nativa.

OBJETIVOS PRINCIPALES DE UNA PWA

Los objetivos al crear una PWA son:

• Máximo rendimiento en móviles 
• Velocidad de carga instantánea
• Interfaz igual a la interfaz de app nativa
• Icono y acceso desde la página de inicio
• Ejecución y acceso offline
• Push Notifications

Para conseguir estos objetivos, las PWA se basan en los siguientes conceptos:

Service Workers: Los Service workers son una tecnología que permite ejecutar servicios en segundo plano en navegadores. Los Service Workers pueden ejecutarse de manera independiente a la aplicación (pueden mantenerse en ejecución mientras la aplicación web está cerrada). Ofrecen capacidades avanzadas: la intercepción de comunicaciones, el cache de información, la descarga en segundo plano de contenidos, el trabajo sin conexión o la posibilidad de enviar notificaciones (Push Notifications).

Los Service Workers proporcionan una notable funcionalidad para hacer almacenamiento off-line de información. No es estrictamente necesario usar Service Workers para crear una PWA, pero es lo más aconsejable si la aplicación web que deseas crear requiere funcionalidades avanzadas.

App Shell: El App Shell es un modelo o patrón para crear aplicaciones web. Consiste en separar el contenido y la funcionalidad en la aplicación. Por un lado, se cachea la aplicación para su uso off-line optimizando la velocidad de carga; y, por otro lado, la carga de contenido puede realizarse desde una caché inicial y luego actualizarse, o directamente desde la web si hay conexión. El objetivo es conseguir que la percepción del usuario de la velocidad de carga de la app sea mayor. Al cargar inicialmente el «shell» desde una caché, el usuario verá la app de forma inmediata.

Manifiesto de aplicación: Consiste en crear un icono que los usuarios pueden anclar a su página de inicio para acceder a la aplicación web directamente. Para controlar el aspecto del icono es posible utilizar diversas técnicas dependiendo del navegador y el sistema operativo. En iOS se controla a través de unas cabeceras de tipo «meta» que pueden añadirse a la página principal de la aplicación web. En el caso de Android y Chrome se utiliza un archivo llamado «Manifiesto». Adicionalmente, Google hace que cuando se añade una aplicación al menú de inicio de Android aparezca un banner de instalación como el de una aplicación real, todo ello con el fin de que la experiencia sea cada vez más similar a la de las aplicaciones nativas.

La mayor ventaja de crear una progressive web app es que si ya tienes una aplicación web, es muy sencillo traer la experiencia de una app nativa. Si estás pensando en convertir tu sitio web en PWA y no sabes por donde empezar, no dudes en contactarnos; en Kiwop; podemos ayudarte!