Últimamente, se ha hablado mucho sobre las aplicaciones web progresivas. Siguen siendo un modelo relativamente nuevo, pero sus principios también pueden mejorar las aplicaciones compiladas con JS convencionales, React, Polymer, Angular o cualquier otro framework. En esta publicación, resumiré algunas opciones y apps de referencia para comenzar a usar tu propia app web progresiva hoy mismo.
¿Qué es una app web progresiva?
Es importante recordar que las apps web progresivas funcionan en todas partes, pero están recargadas en los navegadores modernos. La mejora progresiva es un pilar del modelo.
Aaron Gustafson comparó la mejora progresiva con un M&M de maní. El maní es tu contenido, el recubrimiento de chocolate es tu capa de presentación y tu código JavaScript es la capa de caramelo duro. Esta capa puede variar en color y la experiencia puede variar según las capacidades del navegador que la usa.
Piensa en la capa de Candy como el lugar donde pueden residir muchas funciones de la app web progresiva. Son experiencias que combinan lo mejor de la Web y lo mejor de las apps. Están disponibles para los usuarios a partir de la primera visita en una pestaña del navegador y no requieren instalación.
A medida que el usuario establece una relación con estas apps a través del uso repetido, hace que la experiencia sea aún mejor: se cargan muy rápido en conexiones de red lentas (gracias al trabajador de servicio), envían notificaciones push relevantes y tienen un ícono de primera clase en la pantalla principal del usuario que puede cargarlas como experiencias de app de pantalla completa. También pueden aprovechar los banners de instalación de aplicaciones web inteligentes.
Las Progressive Web Apps son
- Progresivas: Funcionan para todos los usuarios, independientemente del navegador, ya que se compilan con la mejora progresiva como principio central.
- Receptivas: Se adaptan a cualquier factor de forma, ya sea una computadora de escritorio, un dispositivo móvil, una tablet o lo que venga en el futuro.
- Independientes de la conectividad: Se mejoraron con service workers para funcionar sin conexión o en redes de baja calidad.
- Estilo app: Usa el modelo de shell de app para proporcionar interacciones y navegaciones de tipo app.
- Frescas: Siempre están actualizadas gracias al proceso de actualización de service worker.
- Segura: Se entrega a través de TLS para evitar intromisiones y garantizar que no se haya manipulado el contenido.
- Detectables: Se identifican como “aplicaciones” gracias a los manifiestos W3C y al alcance de registro de service worker, lo que permite que los motores de búsqueda las encuentren.
- Posibilidad de volver a interactuar: Facilita la posibilidad de volver a interactuar a través de funciones como notificaciones push.
- Instalable: Permite que los usuarios “mantengan” las apps que les resultan más útiles en su pantalla principal sin la molestia de tener que ingresar a una tienda de apps.
- Vinculables: Comparte contenido fácilmente a través de URL y no requiere instalación compleja.
Las apps web progresivas tampoco son exclusivas de Chrome para Android. A continuación, podemos ver la app web progresiva Pokedex funcionando en Firefox para Android (beta) con las funciones de Add to home screen y caché de servicio de trabajo en primer plano funcionando bien.
Uno de los aspectos positivos de la naturaleza "progresiva" de este modelo es que las funciones se pueden desbloquear gradualmente a medida que los proveedores de navegadores envían una mejor compatibilidad para ellas. Por supuesto, las apps web progresivas, como Pokedex, también funcionan muy bien en Opera para Android, con algunas diferencias notorias en la implementación:
Para obtener más información sobre las apps web progresivas, lee la entrada de blog original de Alex Russell en la que las presenta. Paul Kinlan también inició una etiqueta de Stack Overflow muy útil para las apps web progresivas que vale la pena consultar.
Principios
Manifiesto de la app web
El manifiesto permite que tu aplicación web tenga una presencia más similar a la nativa en la pantalla de inicio del usuario. Permite que la app se inicie en modo de pantalla completa (sin que haya una barra de URL), proporciona control sobre la orientación de la pantalla y, en las versiones recientes de Chrome para Android, admite la definición de una pantalla de presentación y un color de tema para la barra de direcciones. También se usa para definir un conjunto de íconos por tamaño y densidad que se usan para la pantalla de presentación y el ícono de la pantalla principal antes mencionados.
Puedes encontrar un archivo de manifiesto de muestra en Web Starter Kit y en las muestras de Google Chrome. Bruce Lawson escribió un generador de manifiestos y Mounir Lamouri también escribió un validador de manifiestos web útil que vale la pena consultar.
En mis proyectos personales, uso realfavicongenerator para generar íconos del tamaño correcto para el manifiesto de la app web y para usarlos en iOS, computadoras de escritorio, etcétera. El módulo de Node favicons también puede lograr un resultado similar como parte del proceso de compilación.
Los navegadores basados en Chromium (Chrome, Opera, etc.) admiten la app web en la actualidad, ya que Firefox desarrolla de forma activa la compatibilidad y Edge los indica como en consideración. WebKit y Safari aún no publican indicadores públicos sobre sus intenciones de implementar la función.
Para obtener más información, consulta Apps web instalables con el manifiesto de apps web en Chrome para Android en Fundamentos de la Web.
Banner "Agregar a la pantalla principal"
Chrome para Android admite agregar tu sitio a la pantalla principal desde hace tiempo, pero las versiones recientes también admiten sugerir de forma proactiva que se agreguen sitios con banners de instalación de apps web nativos.
Para que se muestren las solicitudes de instalación de la app, esta debe cumplir con los siguientes requisitos:
- Tener un manifiesto de aplicación web válido
- Se debe entregar a través de HTTPS (consulta letsencrypt para obtener un certificado gratuito).
- Tener un service worker válido registrado
- Recibir visitas dos veces, con al menos 5 minutos de diferencia entre las visitas
Hay varios ejemplos de banners de instalación de aplicaciones disponibles, que abarcan desde banners básicos hasta casos de uso más complejos, como mostrar aplicaciones relacionadas.
Service worker para el almacenamiento en caché sin conexión
Un service worker es una secuencia de comandos que se ejecuta en segundo plano, independiente de tu página web. Responde a eventos, incluidas las solicitudes de red que se realizan desde las páginas que entrega. Un service worker tiene una vida útil intencionalmente corta.
Se activa cuando recibe un evento y se ejecuta solo mientras lo necesita para procesarlo. El service worker te permite usar la API de Cache para almacenar recursos en caché y se puede usar para brindar a los usuarios una experiencia sin conexión.
Los service workers son potentes para el almacenamiento en caché sin conexión, pero también ofrecen ventajas significativas de rendimiento mediante la carga instantánea para visitas repetidas a tu sitio o app web. Puedes almacenar en caché la shell de tu aplicación para que funcione sin conexión y complete su contenido con JavaScript.
Hay un conjunto completo de muestras de service workers disponibles en las muestras de Google Chrome. El libro de recetas sin conexión de Jake Archibald es una lectura obligada. Si es la primera vez que usas un trabajador de servicio, te recomiendo que pruebes la explicación de cómo crear tu primera app web sin conexión de Paul Kinlan.
Nuestro equipo también mantiene varias herramientas de asistencia y de compilación de service worker que nos resultan útiles para reducir los gastos generales de configuración de service worker. Se enumeran en Bibliotecas de service worker. Las dos principales son las siguientes:
- sw-precache: Es una herramienta de tiempo de compilación que genera una secuencia de comandos de service worker útil para almacenar previamente en caché la shell de tu app web.
- sw-toolbox: Es una biblioteca que proporciona almacenamiento en caché en tiempo de ejecución para recursos que se usan con poca frecuencia.
Jeff Posnick escribió una guía rápida sobre sw-precache llamada Prioridad para la versión sin conexión, rápida, con el módulo sw-precache y un codelab sobre la misma herramienta que podría resultarte útil.
Chrome, Opera y Firefox implementaron la compatibilidad con service workers, y Edge tiene indicadores públicos positivos sobre el interés en la función. Safari mencionó brevemente su interés en ella a través del plan de cinco años propuesto por un ingeniero.
Notificaciones push para volver a generar participación
De manera eficaz, puedes crear apps web con las que los usuarios puedan interactuar fuera de una pestaña. El navegador puede estar cerrado, y ni siquiera es necesario que usen activamente tu aplicación web para interactuar con tu experiencia. La función requiere un service worker y un manifiesto de app web, basado en algunas de las funciones resumidas anteriormente.
La API de Push está implementada en Chrome, en desarrollo en Firefox y en consideración en Edge. Aún no hay indicadores públicos de Safari sobre su intención de implementar esta función.
Notificaciones push en la Web abierta es una introducción completa a la configuración de notificaciones push de Matt Gaunt. También hay un codelab de notificaciones push disponible en Conceptos básicos de la Web.
Michael van Ouwerkerk, del equipo de Chrome, también tiene una introducción de 6 minutos a Push si prefieres los videos.
Incorporación de funciones avanzadas en capas
Recuerda que la experiencia del usuario puede tener diferentes niveles de dulzura según el navegador que se use para ver tu app web. Tú tienes el control de la capa de caramelo duro.
Las funciones adicionales que llegarán a la plataforma web, como la sincronización en segundo plano (para sincronizar datos con un servidor incluso cuando la app web está cerrada) y Bluetooth web (para comunicarse con dispositivos Bluetooth desde la app web), también se pueden incorporar a tu app web progresiva de esta manera.
La sincronización en segundo plano única se habilitó en Chrome. Jake Archibald tiene un video de su app sin conexión de Wikipedia y un artículo en el que la muestra en acción. François Beaufort también tiene una serie de ejemplos de Web Bluetooth disponibles si le interesa probar esa API.
Compatible con frameworks
No hay nada que te impida aplicar cualquiera de los principios anteriores a una aplicación o un framework existente con el que estés compilando. Algunos otros principios que vale la pena tener en cuenta cuando compilas tu Progressive Web App son el modelo de rendimiento RAIL centrado en el usuario y las animaciones basadas en FLIP.
Espero que durante 2016 veamos un número cada vez mayor de códigos estándares y proyectos iniciales que se integren de forma orgánica en apoyo a las apps web progresivas como función principal. Hasta entonces, la barrera para agregar estas funciones a tus propias apps no es muy alta y, en mi opinión, vale la pena el esfuerzo.
Arquitectura
Existen diferentes niveles de "todo incluido" en el modelo de Progressive Web App, pero un enfoque común es diseñarlas en torno a un shell de aplicación. Esto no es un requisito estricto, pero tiene varios beneficios.
La arquitectura de shell de la aplicación fomenta el almacenamiento en caché de tu shell de aplicación (la interfaz de usuario) para que funcione sin conexión y complete su contenido con JavaScript. En las visitas repetidas, se obtienen píxeles importantes en la pantalla muy rápido sin la red, aun si tu contenido eventualmente proviene de allí. Esto implica mejoras significativas en el rendimiento.
Recientemente, Jeremy Keith comentó que, en este tipo de modelo, quizás la renderización del servidor no debería considerarse como un resguardo, pero la renderización del cliente debería considerarse una mejora. Excelente comentario.
En el modelo de Shell de la aplicación, la renderización del servidor debe usarse tanto como sea posible, y la renderización progresiva del cliente debe usarse como una mejora de la misma manera que "mejoramos" la experiencia cuando se admite el trabajador de servicio. Hay muchas formas en las que esto se puede abordar en última instancia.
Mi recomendación es leer nuestro informe sobre la arquitectura y evaluar la mejor manera de aplicar principios similares a tu propia aplicación y pila.
Plantillas estándares para comenzar
Shell de la aplicación
El repositorio de app-shell contiene una implementación casi completa de la arquitectura de Shell de aplicaciones. Tiene un backend escrito en Express.js y un frontend escrito en ES2015.
Dado que abarca las partes del modelo del cliente y del servidor, y hay mucho contenido, te llevará un tiempo familiarizarte con la base de código. De lo contrario, es nuestro punto de partida más completo para las apps web progresivas en este momento. Los documentos serán nuestro próximo enfoque para este proyecto.
Kit de partida de Polymer
El punto de partida oficial para las apps web de Polymer admite las siguientes funciones de app web progresiva:
- Manifiesto de la aplicación web
- Pantalla de presentación de Chrome para Android
- Almacenamiento en caché sin conexión del service worker con los elementos de SW de Platinum
- Notificaciones push (se requiere configuración manual) con los elementos de notificaciones push de Platinum
A la versión actual de PSK le falta compatibilidad con algunos de los patrones de rendimiento más avanzados (p. ej., el modelo de Shell de aplicación, la carga asíncrona) que se encuentran en algunas apps web de Polymer progresivas.
Nuestro objetivo es intentar incorporar estos patrones en PSK en 2016, pero los primeros experimentos sobre este tema se pueden encontrar en la app de Polymer Zuperkulblog de Rob Dodson y en la excelente charla Polymer Perf Patterns de Eric Bidelman.
Web Starter Kit
Nuestro punto de partida definido para nuevos proyectos de Vanilla incluye las siguientes funciones de la app web progresiva:
- Manifiesto de la aplicación web
- Pantalla de presentación de Chrome para Android
- Almacenamiento previo en caché de service workers gracias a sw-precache
Si prefieres trabajar con JS/ES2015 sin modificaciones y no puedes usar Polymer, el kit de partida web puede ser útil como punto de referencia para reutilizar o robar fragmentos de código.
Apps web progresivas con y sin frameworks
Los miembros de la comunidad ya compilaron varias apps web progresivas de código abierto, con y sin bibliotecas y frameworks de JS. Si buscas inspiración, los repositorios que se indican a continuación pueden ser útiles como referencia. También son muy buenas apps.
JavaScript básico
- Voice Memos de Paul Lewis se compila con una arquitectura similar a
app-shell(informe). - Wikipedia sin conexión de Jake Archibald (video)
- Air Horner de Paul Kinlan
- Guitar Tuner de Paul Lewis (descripción)
Polymer
- Zuperkulblog, de Rob Dodson (diapositivas)
React
- iFixit de Jeff Posnick: usa
sw-precachepara la caché del shell de la aplicación (diapositivas)
DOM virtual
- Pokedex, de Nolan Lawson: Excelente app web progresiva que aplica un enfoque de "hacer todo en un trabajador web" para ayudar con la renderización progresiva. (informe)
Angular.js
- Timey.in de Kenneth Auchenberg; también usa
sw-precachepara almacenar recursos en caché previamente
Notas finales
Como se mencionó, las apps web progresivas todavía están en sus primeras etapas, pero es un momento emocionante para experimentar con las metodologías que las respaldan y ver qué tan bien pueden aplicarse a tus propias apps web.
Actualmente, Paul Kinlan está planificando la guía de Fundamentos de la Web sobre las apps web progresivas. Si tienes comentarios sobre las áreas que te gustaría que se abordaran, no dudes en hacerlos en la conversación.
Lecturas adicionales
- Apps web progresivas: Escapa de pestañas sin perder nuestra alma
- Por qué las apps web progresivas son el futuro del desarrollo web
- Apps web progresivas: listas para el horario estelar
- Cómo crear una app progresiva con ServiceWorker
- Las apps web progresivas son el futuro
- App web progresiva: Una nueva forma de experimentar los dispositivos móviles
- Presentamos Pokedex.org: una app web progresiva para fans de Pokémon
- Resumen de Chrome Developer Summit: Apps web progresivas