Últimamente, se ha hablado mucho sobre las apps web progresivas. Aún son un modelo relativamente nuevo, pero sus principios pueden mejorar de igual manera las apps compiladas con JS básico, React, Polymer, Angular o cualquier otro framework. En esta publicación, resumiré algunas opciones y apps de referencia para que comiences a crear 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 se potencian en los navegadores actualizados. 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, la cobertura de chocolate es tu capa de presentación y tu JavaScript es la capa de caramelo duro. Esta capa puede variar de color, y la experiencia puede variar según las capacidades del navegador que la use.
Piensa en la capa de caramelo como el lugar donde pueden vivir muchas funciones de las apps web progresivas. Son experiencias que combinan lo mejor de la Web y lo mejor de las apps. Son útiles para los usuarios desde la primera visita en una pestaña del navegador, sin necesidad de instalación.
A medida que el usuario establece una relación con estas apps a través del uso repetido, hacen que la capa de caramelo sea aún más dulce: se cargan muy rápido en conexiones de red lentas (gracias al service worker), envían notificaciones push relevantes y tienen un ícono de primera clase en la pantalla principal del usuario que puede cargarlas como experiencias en la app en pantalla completa. También pueden aprovechar los banners inteligentes de instalación de apps web.
Las apps web progresivas son
- Progresivas: Funcionan para todos los usuarios, independientemente del navegador que elijan, ya que se crean con la mejora progresiva como principio fundamental.
- Responsivo: Se adapta a cualquier factor de forma, computadora de escritorio, dispositivo móvil, tablet o lo que venga después.
- Independiente de la conectividad: Se mejoró con service workers para funcionar sin conexión o en redes de baja calidad.
- Similar a una app: Usa el modelo de shell de la app para proporcionar navegaciones e interacciones similares a las de una app.
- Actualizada: Siempre está actualizada gracias al proceso de actualización del service worker.
- Seguro: Se entrega a través de TLS para evitar el espionaje y garantizar que no se haya alterado el contenido.
- Detectables: Se pueden identificar como “aplicaciones” gracias a los manifiestos de W3C y al alcance del registro de service workers, lo que permite que los motores de búsqueda las encuentren.
- Reactivación de la participación: Facilita la reactivación de la participación a través de funciones como las notificaciones push.
- Instalable: Permite que los usuarios “conserven” las apps que les resulten más útiles en su pantalla principal sin la molestia de una tienda de aplicaciones.
- Vinculable: Se comparte fácilmente a través de una URL y no requiere una 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 iniciales de Agregar a la pantalla principal y almacenamiento en caché del service worker ejecutándose sin problemas.
Uno de los aspectos positivos de la naturaleza "progresiva" de este modelo es que las funciones se pueden desbloquear de forma gradual a medida que los proveedores de navegadores envían una mejor compatibilidad con ellas. Las apps web progresivas, como Pokedex, también funcionan muy bien en Opera para Android, con algunas diferencias notables 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 se presentan. Paul Kinlan también creó 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 app web tenga una presencia más similar a la de una app nativa en la pantalla principal del usuario. Permite que la app se inicie en modo de pantalla completa (sin que aparezca 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 mencionados anteriormente.
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 práctico validador de manifiestos web que vale la pena consultar.
En mis proyectos personales, uso realfavicongenerator para generar los íconos con el 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 de tu proceso de compilación.
Los navegadores basados en Chromium (Chrome, Opera, etc.) admiten manifiestos de apps web hoy en día, mientras que Firefox está desarrollando activamente la compatibilidad y Edge los incluye como en consideración. WebKit/Safari aún no publicaron indicadores públicos sobre sus intenciones de implementar la función.
Para obtener más detalles, lee Apps web instalables con el manifiesto de la app 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 un 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 los mensajes de instalación de la app, esta debe cumplir con los siguientes requisitos:
- Tener un manifiesto de la app 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 dos visitas, con al menos 5 minutos de diferencia entre ellas
Hay disponibles varios ejemplos de banners de instalación de apps, 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, de forma 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 durante el tiempo que necesita para procesarlo. El service worker te permite usar la API de Cache para almacenar recursos en caché y se puede usar para brindarles 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 mejoras significativas en el rendimiento, ya que permiten la carga instantánea de las visitas repetidas a tu sitio o app web. Puedes almacenar en caché el shell de la aplicación para que funcione sin conexión y propagar su contenido con JavaScript.
En las muestras de Google Chrome, hay disponible un conjunto completo de muestras de service workers. La guía de recetas sin conexión de Jake Archibald es de lectura obligatoria, y te recomiendo que pruebes la explicación de Paul Kinlan sobre tu primera app web sin conexión si eres principiante en el uso de service workers.
Nuestro equipo también mantiene una serie de utilidades auxiliares de service workers y herramientas de compilación que consideramos útiles para reducir la sobrecarga en la configuración de service workers. Se enumeran en Bibliotecas de service workers. 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 en caché previamente la shell de la app web.
- sw-toolbox: Es una biblioteca que proporciona almacenamiento en caché del entorno de ejecución para recursos que se usan con poca frecuencia.
Jeff Posnick escribió una guía rápida sobre sw-precache llamada Offline-first, fast, with the sw-precache module 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 señales públicas positivas sobre el interés en la función. Safari mencionó brevemente su interés en él a través del plan de cinco años propuesto por un ingeniero.
Notificaciones push para reactivar la participación
En efecto, puedes compilar apps web con las que los usuarios pueden interactuar fuera de una pestaña. El navegador puede estar cerrado y ni siquiera es necesario que los usuarios usen activamente tu app web para interactuar con tu experiencia. La función requiere un service worker y un manifiesto de la app web, y se basa en algunas de las funciones que se resumieron anteriormente.
La API de Push se implementa en Chrome, está 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 para configurar las notificaciones push, escrita por Matt Gaunt. También hay un codelab de notificaciones push disponible en Fundamentos 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.
Agrega capas en las funciones avanzadas
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 se incorporará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 Web Bluetooth (para comunicarse con dispositivos Bluetooth desde la app web), también se pueden agregar a la app web progresiva de esta manera.
La sincronización en segundo plano de un solo intento se habilitó en Chrome, y Jake Archibald tiene un video de su app de Wikipedia sin conexión y un artículo que la muestra en acción. François Beaufort también tiene una serie de ejemplos de Web Bluetooth disponibles si te 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 existentes con los que estés compilando. Otros principios que vale la pena tener en cuenta cuando creas tu app web progresiva son el modelo de rendimiento centrado en el usuario RAIL y las animaciones basadas en FLIP.
Espero que, durante 2016, veamos una cantidad cada vez mayor de plantillas y proyectos iniciales que incluyan de forma orgánica la compatibilidad con las apps web progresivas como una 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 compromiso con el modelo de app web progresiva, pero un enfoque común es diseñarlas en torno a un shell de la aplicación. No es un requisito estricto, pero tiene varios beneficios.
La arquitectura de shell de la aplicación fomenta el almacenamiento en caché de la shell de la aplicación (la interfaz de usuario) para que funcione sin conexión y complete su contenido con JavaScript. En las visitas repetidas, esto te permite obtener píxeles significativos en la pantalla muy rápido sin la red, incluso si el contenido proviene de allí. Esto conlleva mejoras significativas en el rendimiento.
Jeremy Keith comentó recientemente que, en este tipo de modelo, tal vez la renderización del servidor no debería verse como un resguardo, sino que la renderización del cliente debería verse como una mejora. Este es un comentario justo.
En el modelo de shell de la aplicación, la renderización del servidor se debe usar tanto como sea posible, y la renderización progresiva del cliente se debe usar como una mejora de la misma manera que "mejoramos" la experiencia cuando se admite el service worker. En última instancia, hay muchas maneras de abordar este problema.
Mi recomendación es leer nuestro artículo sobre la arquitectura y evaluar cómo se podrían aplicar mejor principios similares a tu propia aplicación y pila.
Plantillas de código estándar para comenzar
Shell de la aplicación
El repositorio app-shell contiene una implementación casi completa de la arquitectura de shell de la aplicación. Tiene un backend escrito en Express.js y un frontend escrito en ES2015.
Dado que abarca las partes del cliente y del servidor del modelo, y que hay mucho contenido allí, 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 inicio de Polymer
El punto de partida oficial para las apps web de Polymer admite las siguientes funciones de las apps web progresivas:
- Manifiesto de la aplicación web
- Pantalla de presentación de Chrome para Android
- Almacenamiento en caché sin conexión de service workers con los elementos de Platinum SW
- Notificaciones push (se requiere configuración manual) con los elementos Platinum Push
La versión actual de PSK no admite algunos de los patrones de rendimiento más avanzados (p. ej., el modelo de shell de la aplicación, la carga asíncrona) que se encuentran en algunas apps web progresivas de Polymer.
Nuestro objetivo es intentar incorporar estos patrones en PSK en 2016, pero los primeros experimentos relacionados con esto 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 para los proyectos nuevos de Vanilla incluye las siguientes funciones de las apps web progresivas:
- Manifiesto de la aplicación web
- Pantalla de presentación de Chrome para Android
- Almacenamiento previo en caché del service worker gracias a sw-precache
Si prefieres trabajar con JS/ES2015 estándar y no puedes usar Polymer, Web Starter Kit puede ser útil como punto de referencia del que puedes reutilizar o copiar fragmentos de código.
Apps web progresivas con y sin frameworks
Los miembros de la comunidad ya crearon varias apps web progresivas de código abierto con y sin bibliotecas y frameworks de JS. Si buscas inspiración, los siguientes repositorios pueden ser útiles como referencia. También son apps muy buenas.
JavaScript puro
- Voice Memos de Paul Lewis se creó con una arquitectura similar a la de
app-shell(resumen) - Wikipedia sin conexión de Jake Archibald (video)
- Air Horner de Paul Kinlan
- Guitar Tuner de Paul Lewis (artículo)
Polymer
- Zuperkulblog de Rob Dodson (diapositivas)
React
- iFixit de Jeff Posnick: usa
sw-precachepara el almacenamiento en caché de la 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. (resumen)
Angular.js
- Timey.in de Kenneth Auchenberg: También usa
sw-precachepara el almacenamiento previo en caché de recursos
Notas finales
Como se mencionó, las apps web progresivas aún están en sus inicios, pero es un momento emocionante para experimentar con las metodologías que las respaldan y ver qué tan bien se pueden aplicar a tus propias apps web.
Paul Kinlan actualmente está planificando la guía de Fundamentos de la Web sobre apps web progresivas. Si tienes comentarios sobre las áreas que te gustaría que se incluyeran, no dudes en comentarlo en el hilo.
Lecturas adicionales
- Apps web progresivas: Cómo escapar de las pestañas sin perder nuestra esencia
- Why Progressive Web Apps Are The Future Of Web Development
- Apps web progresivas: listas para el horario estelar
- Cómo crear una app web 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 la Chrome Developer Summit: Apps web progresivas