Os queremos hablar del reto y de los beneficios que supone el desarrollo de una aplicación web progresiva (PWA) utilizando páginas AMP como fuente de datos. Para ello, os contaremos cómo la hemos aplicado a casos de éxito como Flashback Madrid, un proyecto que hemos desarrollado junto a Vocento Media Lab para el diario ABC.
Flashback Madrid es una aplicación web donde podremos consultar las imágenes más relevantes de la historia entre los años 1891 y 2006. Este desarrollo puede presumir de ser una aplicación completamente construida en AMP y que funciona como una PWA. Al ser una aplicación PWA construida con fuente de datos de páginas AMP se aprovecha de las siguientes características:
- Velocidad de carga
- Interfaz de aplicación nativa
- Modo offline
- Notificaciones push
- Buen posicionamiento
A finales del 2018 más del 50% de tráfico registrado en las páginas web a nivel mundial procedía de dispositivos móviles. Para muchos usuarios, leer contenido en dispositivos móviles es una experiencia lenta e incómoda. AMP (Accelerated Mobile Pages) es una biblioteca de código abierto implementada por el propio Google que permite la óptima visualización de las páginas web en dispositivos móviles, para ello dispone de los siguientes elementos:
AMP HTML
HTML extendido con algunas propiedades especiales del proyecto AMP.
AMP JS
Un framework de Javascript para las páginas móviles que, en su mayoría, administra los recursos y su carga. AMP no permite otro tipo de Javascript que no sea el propio facilitado por AMP JS.
AMP CACHÉ
Google proporciona una caché mundial donde está indexando las páginas AMP para ofrecerlas más rápidamente según la localización de los usuarios.
PWA (Progressive Web Apps) es un tipo de aplicación web que busca incorporar características propias de las aplicaciones nativas y es una estupenda alternativa a plantear para sustituirlas por sus beneficios y menor tiempo de mantenimiento.
Para incorporar estas características hace uso de los siguientes conceptos:
RESPONSIVE WEB DESIGN
Este es imprescindible, se usarán animaciones CSS y frameworks específicos para crear interfaces móviles con aspecto de aplicaciones nativas.
SERVICE WORKERS
Un Service Worker es un archivo JavaScript que se aloja en tu dispositivo o navegador y que no actúa únicamente en una URL, sino durante toda la aplicación. Una vez entramos en la PWA, se registra y se activa, quedando activo entre el usuario y el servidor siempre en segundo plano, incluso aunque cerremos la aplicación. Los Service Workers nos permiten añadir funcionalidades a nuestra PWA como:
- Notificaciones push
- Modo offline
- Descarga de contenido en segundo plano
- Cacheado de información
De todos modos, para crear una PWA no es necesario estrictamente usar Service Workers salvo que queramos usar algunas de las funcionalidades descritas anteriormente.
APP SHELL
App Shell es un patrón de diseño a la hora de crear nuestra PWA, que consiste en separar la aplicación entre funcionalidad y contenido y cargarlos por separado.
Con este patrón, podemos cachear con diferentes estrategias el esqueleto básico de nuestra app y su contenido. Idealmente el App Shell tiene que tener la mínima cantidad de HTML, CSS y JavaScript requeridos para activar la interfaz de usuario para que la carga sea lo más rápida posible, consiguiendo de esta manera una sensación de aplicación nativa.
Usar App Shell no es obligatorio, pero sí una buena práctica para lograr una carga instantánea de nuestra aplicación.
MANIFIESTO DE APLICACIÓN
El app manifest es un archivo JSON con un formato específico donde caracterizamos nuestra PWA y sus metadatos. Es la clave para convertir nuestra PWA en un una aplicación instalable. En ese fichero se especifica el nombre, la URL de inicio, el tema y los iconos.
AMP Y PWA
Aunque AMP y PWA ofrecen ciertas características iguales y se suelen elegir de forma unitaria para nuestros desarrollos existe la posibilidad de usar ambas tecnologías con el fin de que nuestra página AMP funcione como una PWA. En proyectos donde una PWA está escrita en AMP, se hace uso del componente AMP llamado amp-install-serviceworker para instalar el Service Worker.
Con este componente hemos podido añadir a los proyectos las siguientes funcionalidades:
INSTALAR LA APP EN NUESTRO MENÚ DE APLICACIONES:
Si entramos desde un dispositivo móvil, se nos mostrará una ventana para añadir la PWA al menú de aplicaciones.
CACHEAR LA ESTRUCTURA DE LA APP ASÍ COMO VARIOS RECURSOS PARA OPTIMIZAR EL RENDIMIENTO:
El Service Worker se encarga de descargar la estructura principal de la aplicación así como de varias librerías AMP que se usan en todas las vistas de nuestra aplicación, esto ayudará a tener un mayor rendimiento.
MODO OFFLINE Y PRE-DESCARGA DE DATOS EN SEGUNDO PLANO:
Conforme vayamos navegando en nuestra PWA, todo recurso es almacenado en disco, si más adelante volvemos a consultar nuestra PWA y no tenemos datos de conexión podremos volver a ver lo que hemos consultado anteriormente.Aprovechando las opciones que nos ofrece el Service Worker se añadió una funcionalidad para pre-descargar datos en un segundo plano, esta funcionalidad es usada para almacenar todas las páginas de la semana actual.
Esto no solo ayudará a una mayor optimización del rendimiento sino que también podremos visitar los datos de la semana en modo offline sin haber navegado por esas páginas.
NOTIFICACIONES PUSH:
Nuestra PWA nos ofrece notificaciones push para recibir un aviso cada vez que haya una publicación nueva.
PWA versus aplicaciones tradicionales
A la hora de afrontar el desarrollo de una aplicación tenemos varias alternativas, las aplicaciones nativas, las aplicaciones híbridas y las PWAs. Enfocarnos hacia alguna alternativa es la primera pregunta que nos hacemos. En este apartado abordaremos esta pregunta navegando por las distintas posibilidades que nos ofrecen cada alternativa.
CONCEPTO Y VENTAJAS
APPS NATIVAS:
Las aplicaciones nativas son las que están diseñadas para un sistema operativo específico, que puede ser Android o iOS. Estos se desarrollan en Swift/Objective – C para aplicaciones iOS o Java, cuando se desarrolla una aplicación para Android. Si nuestra aplicación requiere un gran rendimiento, un gran acceso a las funciones hardware del dispositivo o existe un alto nivel de interacción con el usuario, sin duda, una aplicación nativa es la elección.
APPS HÍBRIDAS:
Las aplicaciones híbridas son aquellas que se desarrollan utilizando un único lenguaje de código para múltiples plataformas. Cuando desarrollamos aplicaciones híbridas, lo que obtenemos es una aplicación que funciona tanto en Android como en iOS. En caso de que nuestra aplicación no esté centrada en las funciones hardware o que el equipo tenga un tiempo limitado y esté cómodo con el desarrollo web, las aplicaciones híbridas pueden ser una gran opción.
PWAS:
Escritas en JavaScript y HTML5, las PWAs son webs desarrolladas para responder a las necesidades de los usuarios móviles. Si buscamos que nuestra aplicación sea una extensión de nuestro sitio web así como que tenga un buen posicionamiento, la elección correcta será desarrollar una PWA.
De todas las alternativas, las PWAs son las aplicaciones más rentables.
INCONVENIENTES
APPS NATIVAS:
Desarrollar una aplicación nativa requiere una mayor inversión, tendremos que escribir y mantener una base de código diferente para diferentes plataformas. Este desarrollo también añade una dificultad extra y son las restricciones y limitaciones que imponen las stores a la hora de distribuir nuestra aplicación.
APPS HÍBRIDAS:
Las aplicaciones híbridas están limitadas a la hora de interactuar con el hardware del dispositivo y el diseño de la aplicación no dejará de ser una simulación para tener un look&feel de una aplicación nativa. También cuentan con la limitación del uso de librerías de terceros, este uso está supeditado a los requerimientos del framework que se use para desarrollarlas.
PWAS:
Las PWAs también están limitadas a la hora de interactuar con el hardware así como con las demás aplicaciones instaladas en el dispositivo. Además, aún tienen un rendimiento limitado y consumen más batería que una aplicación tradicional.
Por ejemplo, Flashback Madrid suma a las características de una PWA el tener un gran rendimiento al usar AMP como fuente de datos.
EL PRESENTE DE LAS PWA
Poder combinar lo mejor de una web con una experiencia de usuario perfecta dotan a las PWAs de ser una elección muy recomendable a la hora de desarrollar una aplicación. No obstante, tienen una serie de características que suman a que esta sea la elección correcta:
ALTA INTEGRACIÓN CON OTROS LENGUAJES:
Al ser una web, nuestro desarrollo será integrable con otros lenguajes como PHP, Symfony, Javascript, Python, .Net, etc
DESCARGA Y ACTUALIZACIÓN:
En comparación con las aplicaciones tradicionales, las PWAs se bajan muy rápido y la actualización se procesa en la nube, no es necesario que todos los usuarios que tenga la aplicación tengan que actualizarlas.
SEGURIDAD:
Las PWA solo funcionan vía HTTPS para evitar intromisiones y para garantizar que el contenido no se haya manipulado.
FUNCIONAN OFFLINE:
Una PWA es capaz de trabajar con conectividad limitada o nula. Esta característica marca una diferencia sustancial con las webs convencionales, ya que una vez instalada tendrá un comportamiento similar al de una app tradicional.
EL FUTURO DE LAS PWA
Las PWAs poseen una de las tecnologías más modernas y el potencial que tiene es enorme, no obstante, para que estén con nosotros mucho tiempo deben de mejorar algunos aspectos:
RENDIMIENTO LIMITADO:
Aunque en este artículo hemos visto que juntando una PWA con AMP conseguimos un gran rendimiento, las PWA deben de mejorar en este aspecto de forma unitaria.
CONSUMO DE BATERÍA:
Las PWA consumen más batería que una aplicación nativa, el código web requiere mayor consumo de recursos para ser ejecutado que un código nativo (Objective-C, Swift o Java)
COMPATIBILIDAD:
Muchas de las funciones que nos ofrece una PWA no son compatibles con todos los navegadores.
ACCESO A RECURSOS DEL DISPOSITIVO MÓVIL:
Actualmente una PWA no puede acceder a recursos como la cámara del dispositivo móvil o poder comunicarse con otras aplicaciones.
Google está trabajando en poder trasladar nuestras PWAs a Play Store, esto nos ofrece ventajas como disponer de servicios en segundo plano que acceden a funciones nativas o poder monetizar nuestra aplicación.
CONCLUSIONES:
Las PWAs son el futuro de la web, están haciéndose un hueco en dispositivos móviles y tablets a una velocidad de vértigo. No obstante, hay funciones que las PWAs no soportan que sumadas a su limitación en comunicación con el hardware harán que no sustituyan a las aplicaciones nativas en un corto plazo.
Pero existen situaciones en las que las PWA es una gran alternativa, sobre todo en economías emergentes donde no es tan importante la conexión a internet y no hacemos un uso excesivo de consulta a las aplicaciones.
Desde Acilia, nuestra intención inicial fue la de descubrir y testear las nuevas tecnologías como es PWA y AMP. El reto estuvo en levantar un proyecto en tiempo con nuestros estándares de calidad con herramientas nuevas. Esta oportunidad nos ofreció la ocasión de evaluar los pros y contras y llegar a conclusiones como las que os compartimos en este artículo, augurando un gran futuro.
En la actualidad son varios los proyectos en los cuales hemos tenido la oportunidad de ponerlas en práctica, como en este proyecto junto al equipo de Vocento LAB. Si quieres verlo, pincha aquí: Flashback para ABC