Descubre cómo ZDF creó una app web progresiva (AWP) con funciones modernas, como compatibilidad sin conexión, capacidad de instalación y modo oscuro.
Cuando la emisora ZDF estaba considerando rediseñar su pila de tecnología de frontend, decidió analizar con mayor detalle las aplicaciones web progresivas para su sitio de transmisión ZDFmediathek. La agencia de desarrollo Cellular aceptó el desafío de crear una experiencia basada en la Web que esté a la par de las apps de ZDF específicas para iOS y Android. La PWA ofrece instalabilidad, reproducción de video sin conexión, animaciones de transición y un modo oscuro.
Cómo agregar un service worker
Una función clave de una AWP es la compatibilidad sin conexión. En el caso de ZDF, Workbox realiza la mayor parte del trabajo pesado, un conjunto de bibliotecas y módulos de Node que facilitan la compatibilidad con diferentes estrategias de almacenamiento en caché. La PWA de ZDF se compila con TypeScript y React, por lo que usa la biblioteca de Workbox que ya está integrada en create-react-app para almacenar en caché previamente los recursos estáticos. Esto permite que la aplicación se enfoque en hacer que el contenido dinámico esté disponible sin conexión, en este caso, los videos y sus metadatos.
La idea básica es bastante simple: recuperar el video y almacenarlo como un objeto blob en IndexedDB. Luego, durante la reproducción, escucha los eventos en línea o sin conexión y cambia a la versión descargada cuando el dispositivo esté sin conexión.
Lamentablemente, la situación resultó ser un poco más compleja. Uno de los requisitos del proyecto era usar el reproductor web oficial de ZDF, que no proporciona ninguna compatibilidad sin conexión. El reproductor toma un ID de contenido como entrada, se comunica con la API de ZDF y reproduce el video asociado.
Aquí es donde una de las funciones más potentes de la Web viene al rescate: los trabajadores del servicio.
El service worker puede interceptar las diversas solicitudes que realiza el jugador y responder con los datos de IndexedDB. De esta manera, se agregan funciones sin conexión de forma transparente, sin tener que cambiar ni una sola línea del código del jugador.
Dado que los videos sin conexión suelen ser bastante grandes, una gran pregunta es cuántos de ellos pueden almacenarse en un dispositivo. Con la ayuda de la API de StorageManager, la app puede estimar el espacio disponible e informar al usuario cuando no hay suficiente espacio antes de iniciar la descarga. Lamentablemente, Safari no está en la lista de navegadores que implementan esta API y, en el momento de escribir este artículo, no había mucha información actualizada sobre cómo otros navegadores aplicaban las cuotas. Por lo tanto, el equipo escribió una pequeña utilidad para probar el comportamiento en varios dispositivos. Ya existe un artículo completo que resume todos los detalles.
Cómo agregar un mensaje de instalación personalizado
La AWP de ZDF ofrece un flujo de instalación personalizado en la app y les solicita a los usuarios que la instalen en cuanto quieran descargar su primer video. Este es un buen momento para solicitar la instalación, ya que el usuario expresó una clara intención de usar la app sin conexión.
Cómo crear una página sin conexión para acceder a las descargas
Cuando el dispositivo no está conectado a Internet y el usuario navega a una página que no está disponible en modo sin conexión, se muestra una página especial que enumera todos los videos que se descargaron anteriormente o (en caso de que aún no se haya descargado contenido) una breve explicación de la función sin conexión.
Cómo usar la velocidad de carga de fotogramas para funciones adaptables
Para ofrecer una experiencia del usuario enriquecida, la AWP de ZDF incluye algunas transiciones sutiles que ocurren cuando el usuario se desplaza o navega. En dispositivos de gama baja, esas animaciones suelen tener el efecto opuesto, y hacen que la app sea lenta y menos responsiva si no se ejecutan a 60 fotogramas por segundo. Para tener esto en cuenta, la app mide la velocidad de fotogramas real a través de requestAnimationFrame() mientras la aplicación carga y, luego, inhabilita todas las animaciones cuando el valor cae por debajo de un umbral determinado.
const frameRate = new Promise(resolve => {
let lastTick;
const samples = [];
function measure() {
const tick = Date.now();
if (lastTick) samples.push(tick - lastTick);
lastTick = tick;
if (samples.length < 20) requestAnimationFrame(measure);
else {
const avg = samples.reduce((a, b) => a + b) / samples.length;
const fps = 1000 / avg;
resolve(fps);
}
}
measure();
});
Incluso si esta medición solo proporciona una indicación aproximada del rendimiento del dispositivo y varía en cada carga, sigue siendo una buena base para la toma de decisiones. Vale la pena mencionar que, según el caso de uso, existen otras técnicas para la carga adaptable que los desarrolladores pueden implementar. Una gran ventaja de este enfoque es que está disponible en todas las plataformas.
Modo oscuro
Una función popular para las experiencias modernas en dispositivos móviles es el modo oscuro. Muchas personas prefieren una IU atenuada, en especial cuando miran videos con poca luz ambiental. La AWP de ZDF no solo proporciona un interruptor que permite a los usuarios alternar entre un tema claro y uno oscuro, sino que también reacciona a los cambios en las preferencias de color de todo el SO. De esta manera, la app cambiará automáticamente su apariencia en los dispositivos que hayan configurado un programa para cambiar el tema según la hora del día.
Resultados
La nueva app web progresiva se lanzó de forma silenciosa como versión beta pública en marzo de 2020 y, desde entonces, recibió muchos comentarios positivos. Mientras la fase beta continúa, la AWP se ejecuta en su propio dominio temporal. Aunque la app web progresiva no se promocionó públicamente, la cantidad de usuarios aumenta constantemente. Muchas de estas son de Microsoft Store, lo que permite que los usuarios de Windows 10 descubran las AWP y las instalen como apps específicas de una plataforma.
Próximos pasos
ZDF planea seguir agregando funciones a su AWP, como el acceso para la personalización, la visualización en varios dispositivos y plataformas, y las notificaciones push.