Últimamente, hubo muchos debates agradables sobre las apps 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 referencias a apps para que comiences a usar tu app web progresiva hoy mismo.
¿Qué es una Progressive Web App?
Es importante recordar que las apps web progresivas funcionan en todas partes, pero están recargadas en los navegadores modernos. La mejora progresiva es una columna vertebral del modelo.
Aaron Gustafson comparó la mejora progresiva con un M&M de cacahuete. El maní es tu contenido, el revestimiento de chocolate es tu capa de presentación y tu JavaScript es la cáscara de los caramelos duros. Esta capa puede variar en color y la experiencia puede variar en función de las capacidades del navegador que la utiliza.
Piensa en el caparazón de caramelo como el lugar donde pueden estar disponibles muchas de las funciones de la app web progresiva. 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 y no requieren instalación.
A medida que el usuario establece una relación con estas apps mediante el uso reiterado, hace que la shell de caramelo sea aún más dulce: se carga muy rápido en conexiones de red lentas (gracias a un service worker), envía notificaciones push relevantes y tiene un ícono de primera clase en la pantalla principal del usuario que puede cargarlas como experiencias de apps en pantalla completa. También pueden aprovechar los banners de instalación de apps web inteligentes.
Las Progressive Web Apps son
- Progresivos: Funcionan para todos los usuarios, independientemente del navegador que elijan, ya que se compilan con mejoras progresivas como usuario principal.
- Responsivo: Se adapta a cualquier factor de forma, computadora de escritorio, dispositivo móvil, tablet o lo que sea.
- Independiente de la conectividad: Mejorada con service workers para trabajar sin conexión o en redes de baja calidad.
- Similar a una app similar: Usa el modelo de shell de app para proporcionar interacciones y navegaciones con estilo de app.
- Actualizada: Se mantiene siempre al día gracias al proceso de actualización de service worker.
- Seguridad: Se entrega a través de TLS para evitar los espías y garantizar que no se haya alterado el contenido.
- Detectables: Se pueden identificar como "aplicaciones" gracias a los manifiestos de W3C y al alcance de registro de service worker, que les permite a los motores de búsqueda encontrarlas.
- Posibilidad de volver a generar participación: Simplifica la reactivación de la participación a través de funciones como notificaciones push.
- Instalables: Permite que los usuarios "conserven" las apps que les resulten más útiles en su pantalla principal sin la molestia de tener una tienda de aplicaciones.
- Vinculables: Comparte contenido fácilmente a través de URL y no requiere instalación compleja.
Además, las Progressive Web Apps no son exclusivas de Chrome para Android. A continuación, podemos ver que la app web progresiva Pokedex funciona en Firefox para Android (beta) y las funciones anticipadas para agregar a la pantalla principal y almacenar datos en caché del service worker se ejecutan correctamente.
Uno de los aspectos positivos de la naturaleza "progresiva" de este modelo es que las funciones pueden desbloquearse gradualmente a medida que los proveedores de navegadores ofrecen una mejor asistencia. Por supuesto, las apps web progresivas como Pokedex también funcionan muy bien en Opera en Android, con algunas diferencias destacadas en la implementación:
Para obtener más información sobre las aplicaciones web progresivas, lee la entrada de blog original de Alex Russell en la que se las presenta. Paul Kinlan también creó una etiqueta de Stack Overflow muy útil para aplicaciones web progresivas que vale la pena echarle un vistazo.
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 el modo de pantalla completa (sin una barra de URL), proporciona control sobre la orientación de la pantalla y, en versiones recientes de Chrome en 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 según el tamaño y la densidad que se usan para la pantalla de presentación y el ícono de 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 creó un útil validador de manifiestos web que vale la pena examinar.
En mis proyectos personales, utilizo realfavicongenerator para generar los íconos del tamaño correcto tanto para el manifiesto de la app web como para usarlos en iOS, computadoras de escritorio, etc. El módulo de nodo 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/Safari aún no publicó señales públicas sobre su intención 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"
Por un tiempo, Chrome para Android permite agregar tu sitio a la pantalla principal, pero las versiones recientes también admiten la sugerencia proactiva de sitios que se agreguen mediante banners de instalación de aplicaciones 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 app web válido
- Ser entregados a través de HTTPS (consulta letsencrypt con el certificado gratuito)
- Tener un service worker válido registrado
- Recibir visitas dos veces, con al menos 5 minutos entre 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, independientemente de tu página web. Responde a eventos, incluidas las solicitudes de red realizadas desde las páginas en las que publica contenido. Un service worker tiene una vida útil intencionalmente corta.
Se activa cuando recibe un evento y se ejecuta solo durante el tiempo necesario 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 worker disponibles en Google Chrome. La guía de soluciones sin conexión de Jake Archibald es una lectura imperdible. Si es la primera vez que usas un service worker, te recomiendo que pruebes la explicación de Paul Kinlan tu primera app web sin conexión.
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. Los dos principales son los 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 de uso poco frecuente.
Jeff Posnick escribió una guía rápida sobre sw-precache llamada Offline-first, fast, con el módulo sw-precache y un codelab sobre la misma herramienta que puede resultarte útil.
Chrome, Opera y Firefox implementaron la compatibilidad con service worker, y Edge tiene indicadores públicos positivos 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 que propuso un ingeniero.
Notificaciones push para volver a generar participación
De manera efectiva, puedes crear aplicaciones web con las que los usuarios puedan interactuar fuera de una pestaña. El navegador se puede cerrar y ni siquiera es necesario que usen activamente tu app 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. Por el momento, Safari no muestra indicadores públicos sobre su intención de implementar esta función.
Las notificaciones push en la Web abierta son una introducción integral a la configuración de notificaciones push de Matt Gaunt y el codelab de notificaciones push también está disponible en Fundamentos de la Web.
Michael van Ouwerkerk del equipo de Chrome también tiene una introducción de 6 min a Push si te gustan más los videos.
Incorporación de funciones avanzadas en capas
Recuerda que tu 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 cáscara de caramelo duro.
De esta manera, también se pueden incorporar funciones adicionales que llegan a la plataforma web, como la sincronización en segundo plano (para la sincronización de datos con un servidor, incluso cuando tu app web está cerrada) y Web Bluetooth (para comunicarse con dispositivos Bluetooth desde tu app web).
La sincronización en segundo plano por única vez está habilitada en Chrome y Jake Archibald tiene un video de su app de Wikipedia sin conexión y un artículo que muestra cómo funciona. Francois Beaufort también tiene una serie de ejemplos de Web Bluetooth disponibles si te interesa probar esa API.
Compatible con marcos de trabajo
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 de agregar estas funciones a tus propias apps no es muy grande y es IMHO, algo que vale la pena el esfuerzo.
Arquitectura
Existen diferentes niveles de cómo se aplica una “totalidad” en el modelo de las apps web progresivas, pero un enfoque común es diseñarlos en torno a un shell de aplicación. No es un requisito obligatorio, pero tiene varios beneficios.
La arquitectura de shell de aplicación fomenta el almacenamiento en caché de la shell de app (la interfaz de usuario) para que funcione sin conexión y complete su contenido con JavaScript. En visitas repetidas, esto te permite obtener píxeles significativos en la pantalla muy rápido sin la red, incluso 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 aplicación, se debe usar la renderización del servidor tanto como sea posible, y la renderización progresiva del cliente debe usarse como mejora de la misma manera en que “mejoramos” la experiencia cuando se admite el service worker. 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 app-shell contiene una implementación casi completa de la arquitectura de shell de aplicación. Tiene un backend escrito en Express.js y un frontend escrito en ES2015.
Dado que abarca las partes del modelo del lado del cliente y del servidor, y hay mucho que ver con esto, te llevará un tiempo familiarizarte con la base de código. De lo contrario, en este momento, es nuestro punto de partida para las apps web progresivas más completas. Documentos será el próximo enfoque para este proyecto.
Kit básico de polímero
El punto de partida oficial para las apps web de Polymer admite las siguientes funciones de la app web progresiva:
- Manifiesto de la app web
- Pantalla de presentación de Chrome para Android
- Almacenamiento en caché sin conexión de service worker con los elementos Platinum SW
- Notificaciones push (se requiere configuración manual) con los elementos push platino
La versión actual de PSK no es compatible con algunos de los patrones de rendimiento más avanzados (p. ej., el modelo de shell de aplicación, carga asíncrona) que se encuentran en algunas aplicaciones web de Progressive Polymer.
Nuestro objetivo es integrar estos patrones en la PSK durante 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 bien definido para nuevos proyectos incluye las siguientes funciones de las apps web progresivas:
- Manifiesto de la app 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 convencionales y no puedes usar Polymer, Web Starter Kit puede resultar útil como punto de referencia del que puedes reutilizar o robar fragmentos de código.
Apps web progresivas con y sin frameworks
Los miembros de la comunidad ya han compilado varias apps web progresivas de código abierto, con y sin marcos de trabajo y bibliotecas de JS. Si buscas inspiración, los siguientes repositorios podrían ser útiles como referencia. Además, son apps muy buenas.
JavaScript básico
- Las notas de voz de Paul Lewis se crearon con una arquitectura similar a la de
app-shell(escritura). - Wikipedia sin conexión de Jake Archibald (video)
- Air Horner de Paul Kinlan
- Guitar Tuner de Paul Lewis (escritura)
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 "haz todo en un trabajador web" para ayudar con la renderización progresiva. (revisión)
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 orientación sobre Fundamentos de la Web sobre las aplicaciones web progresivas y, si tienes comentarios sobre las áreas que te gustaría que se traten, no dudes en comentar 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
- Crea 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 los fans de Pokémon
- Resumen de la Chrome Developer Summit: Apps web progresivas