Comienza a usar las apps web progresivas

Addy Osmani
Addy Osmani

Últimamente, hubo mucho debate sobre las apps web progresivas. Siguen siendo un modelo relativamente nuevo, pero sus principios también pueden mejorar las apps compiladas con JS normal, React, Polymer, Angular o cualquier otro framework. En esta publicación, resumiré algunas opciones y apps de referencia para que comiences a usar tu propia app web progresiva hoy mismo.

¿Qué es una aplicación web progresiva?

Es importante recordar que las apps web progresivas funcionan en todas partes, pero están optimizadas en los navegadores modernos. La mejora progresiva es un eje del modelo.

Aaron Gustafson comparó la mejora progresiva a un M&M con maní. El cacahuate es tu contenido, la cobertura de chocolate es tu capa de presentación y tu JavaScript es la cáscara de un dulce. 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 caramelo como el lugar donde pueden encontrarse muchas funciones de las Progressive Web App. 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 los usuarios crean una relación con estas apps mediante el uso repetido, logran que la shell de los dulces resulte aún más atractiva: se carga 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 de app en pantalla completa. También pueden aprovechar los banners de instalación de apps web inteligentes.

Banners de instalación de apps web para generar participación, inicio desde la pantalla principal del usuario, pantalla de presentación en Chrome para Android, funciona sin conexión con service worker

Las Progressive Web Apps son

  • Progresiva: Funciona para todos los usuarios, independientemente de la elección de navegador, ya que se compilan con mejora progresiva como usuario principal.
  • Responsivo: Se adapta a cualquier factor de forma, ya sea para computadoras de escritorio, dispositivos móviles, tablets o el futuro.
  • Independiente de la conectividad: Mejorada con service workers para funcionar sin conexión o en redes de baja calidad.
  • Similar a una app: Usa el modelo de shell de app para proporcionar interacciones y navegaciones de estilo de app.
  • Actualizado: Siempre está actualizado gracias al proceso de actualización del service worker.
  • Seguro: Se entrega a través de TLS para evitar los espionaje y garantizar que el contenido no se haya alterado.
  • Detectables: Se pueden identificar como "aplicaciones" gracias a los manifiestos de W3C y el alcance del registro de los service workers, lo que permite que los motores de búsqueda las encuentren.
  • Posibilidad de volver a participar: Facilita la reactivación de la participación mediante funciones como las notificaciones push.
  • Instalables: Permite que los usuarios “mantengan” las apps que les resulten más útiles en la pantalla principal sin las complicaciones que supone una tienda de aplicaciones.
  • Vinculable: Se comparte fácilmente a través de URL y no requiere una instalación compleja.

Las apps web progresivas no son exclusivas de Chrome para Android. A continuación, podemos ver la app web progresiva Pokedex que funciona en Firefox para Android (beta) con las primeras funciones de Agregar a la pantalla principal y de almacenamiento en caché del service worker que se ejecutan correctamente.

Aplicaciones web progresivas que funcionan en Firefox para Android

Uno de los aspectos interesantes de la naturaleza "progresiva" de este modelo es que las funciones se pueden desbloquear gradualmente a medida que los proveedores de navegadores ofrecen una mejor compatibilidad. Por supuesto, las apps web progresivas como Pokedex también funcionan muy bien en Opera para Android, con algunas diferencias notables en su implementación:

Apps web progresivas que funcionan en Opera para Android

Para conocer más a fondo 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 examinar.

Principios

Manifiesto de la app web

El manifiesto permite que tu app web tenga una presencia más nativa en la pantalla de inicio del usuario. Permite que la app se inicie en el 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, se 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 usa para la pantalla de presentación y el ícono de la pantalla principal antes mencionados.

Agrega contenido a la pantalla principal, inicia desde la pantalla principal y disfruta de experiencias en pantalla completa similares a las de una app.

Puede 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 útil validador de manifiestos web que vale la pena consultar.

En mis proyectos personales, confío en 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étera. El módulo Node de favicons también puede lograr un resultado similar como parte de su proceso de compilación.

En la actualidad, los navegadores basados en Chromium (Chrome, Opera, etc.) admiten los manifiestos de aplicaciones web, ya que Firefox está desarrollando activamente la compatibilidad y Edge los incluye como en proceso de consideración. WebKit y Safari aún no han publicado señales públicas sobre sus intents para implementar la función.

Para obtener más información, consulta el artículo sobre Fundamentos de la Web en apps web instalables con el manifiesto de apps web en Chrome para Android.

Banner "Agregar a la pantalla principal"

Actualmente, Chrome en Android permite agregar sitios a la pantalla principal, pero las versiones recientes también admiten la sugerencia proactiva de que se agreguen sitios con banners de instalación de aplicaciones web nativos.

La aplicación de demostración de notas de voz que muestra un mensaje de banner de instalación de aplicación web en Chrome para Android

Para que se muestren los mensajes de instalación de la app, esta debe hacer lo siguiente:

  • Debes tener un manifiesto de aplicación web válido.
  • Recibir 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 las visitas

Hay una serie de ejemplos de banners de instalación de aplicación disponibles, que abarcan 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 realizadas desde las páginas a las que publica anuncios. Un service worker tiene una vida útil intencionalmente corta.

Se activa cuando recibe un evento y se ejecuta solo durante el tiempo que necesita 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 mejoras significativas de rendimiento mediante la carga instantánea para visitas repetidas a tu sitio o app web. Puedes almacenar en caché el shell de tu aplicación para que funcione sin conexión y propague su contenido con JavaScript.

Almacenamiento en caché del service worker del shell de la aplicación, lo que permite que se cargue sin la red

Hay un conjunto completo de muestras de service worker disponible en muestras de Google Chrome. El libro de recetas sin conexión de Jake Archibald es imperdible, y te recomiendo que pruebes la explicación de Paul Kinlan sobre tu primera app web sin conexión si es la primera vez que usas service worker.

Nuestro equipo también cuenta con varias utilidades y herramientas de compilación de service worker que consideramos útiles para reducir la sobrecarga en la configuración del service worker. Se encuentran en la lista de 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 que es útil para almacenar previamente en caché la shell de tu app web.
  • sw-toolbox: una biblioteca que proporciona almacenamiento en caché en el entorno de ejecución para los recursos que se usan con poca frecuencia.

Jeff Posnick escribió un manual básico rápido sobre sw-precache llamado Sin conexión, rápido, 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 para el service worker con Edge, que tiene indicadores públicos positivos acerca del interés en la función. Safari mencionó brevemente el 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 compilar 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 aplicación web para interactuar con tu experiencia. La función requiere un service worker y un manifiesto de app web, basándose en algunas de las funciones resumidas anteriormente.

La API de Push está implementada en Chrome, en desarrollo en Firefox y en proceso de consideración en Edge. Safari aún no muestra indicadores públicos sobre su intención de implementar esta función.

Push Notifications en la Web abierta es una introducción completa a la configuración push de Matt Gaunt y también hay un codelab de Notificaciones push disponible en Web Fundamentals.

Notificación push web en el sitio móvil de Facebook

Michael van Ouwerkerk del equipo de Chrome también tiene una introducción de 6 minutos a Push si le interesa más el video.

Incorporación de 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ú controlas la carcasa de los caramelos duros.

Las funciones adicionales que se incluirán en la plataforma web, como la sincronización en segundo plano (para la sincronización de datos con un servidor incluso cuando la aplicación web está cerrada) y el Bluetooth web (para comunicarse con dispositivos Bluetooth desde tu aplicación web) también se pueden agregar a tu app web progresiva de esta manera.

Se habilitó la sincronización en segundo plano con un solo ejemplo en Chrome y Jake Archibald tiene un video de su app de Wikipedia sin conexión y artículo que muestra cómo funciona. Francois Beaufort también cuenta con una serie de muestras de Bluetooth web disponibles si te interesa probar esa API.

Facilidad para el marco de trabajo

No hay nada que te impida aplicar ninguno de los principios anteriores a una aplicación o framework existente que estás compilando. 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 una cantidad cada vez mayor de proyectos estándares y iniciales que se integren orgánicamente en la compatibilidad de 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 vale la pena hacer el esfuerzo.

Arquitectura

Existen diferentes niveles de cómo funciona una estrategia “all-in” en el modelo de app web progresiva, pero un enfoque común que se adopta es su arquitectura en torno a un shell de aplicación. Esto no es un requisito obligatorio, pero conlleva varios beneficios.

La arquitectura de la shell de app fomenta el almacenamiento en caché de la shell de tu 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 tu contenido finalmente proviene de allí. Esto implica mejoras significativas en el rendimiento.

La shell de la aplicación que se visualiza como un desglose de la IU de tu app, como el panel lateral y el área de contenido principal

Recientemente, Jeremy Keith comentó que, en este tipo de modelo, la renderización del servidor no debería considerarse un resguardo, pero la renderización del cliente debería considerarse una mejora. Estos comentarios son justos.

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 una mejora, de la misma manera en que “mejoramos” la experiencia cuando se admite un service worker. Hay muchas formas de abordar esto en última instancia.

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 estándar para comenzar

Shell de la aplicación

Ver en GitHub

El repositorio de 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 cliente y del servidor del modelo y que ocurren muchas cosas, llevará un tiempo familiarizarse con la base de código. De otro modo, es nuestro punto de partida más completo de las apps web progresivas en este momento. El próximo objetivo de este proyecto será Google Docs.

Kit básico de Polymer

Ver en GitHub

El punto de partida oficial para las aplicaciones web de Polymer admite las siguientes funciones de las aplicaciones web progresivas:

  • Manifiesto de aplicación web
  • Pantalla de presentación de Chrome para Android
  • Almacenamiento en caché sin conexión de service worker con los elementos de SW platino
  • Notificaciones push (se requiere una configuración manual) con los elementos push platino
Kit básico de Polymer en el que se muestran las funciones integradas de aplicaciones web progresivas

En 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 encuentras en algunas apps web de Progressive Polymer.

Nuestro objetivo es incorporar estos patrones en la PSK en 2016, pero los primeros experimentos se pueden encontrar en la app Zuperkulblog de Polymer, de Rob Dodson, y en la excelente charla sobre Polymer Perf Patterns de Eric Bidelman.

Web Starter Kit

Ver en GitHub

Nuestro punto de partida bien definido para los nuevos proyectos comunes incluye las siguientes funciones de Progressive Web App:

  • Manifiesto de 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 resultar útil como punto de referencia en el que puedes reutilizar o robar 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 JS. Si buscas inspiración, los siguientes repositorios pueden resultarte útiles como referencia. Además, son apps muy buenas.

Aplicaciones web progresivas implementadas con React, Polymer, Virtual DOM y AngularJS

JavaScript clásico

Polymer

Reaccionar

  • iFixit de Jeff Posnick: Usa sw-precache para el almacenamiento en caché de shells de aplicaciones (diapositivas)

DOM virtual

  • Pokedex de Nolan Lawson: es una excelente app web progresiva que aplica un enfoque de “hacer todo en un trabajador web” para facilitar la renderización progresiva. (revisión)

Angular.js

  • Timey.in de Kenneth Auchenberg y también usa sw-precache para el almacenamiento previo en caché de recursos

Notas finales

Como ya se mencionó, las apps web progresivas aún son nuevas, pero es un momento emocionante para explorar las metodologías que las respaldan y ver qué tan bien se pueden aplicar a tus propias apps web.

Actualmente, Paul Kinlan está planificando la guía de Fundamentos de la Web sobre las apps web progresivas y, si tienes comentarios sobre áreas que te gustaría que se abordaran, no dudes en dejar comentarios en la conversación.

Lecturas adicionales