Descubre cómo ZDF creó una app web progresiva (AWP) con funciones modernas, como soporte 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ó examinar con más detalle las apps 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 estuviera a la par de las apps para iOS y Android específicas de la plataforma de ZDF. La AWP ofrece instalación, reproducción de video sin conexión, animaciones de transición y un modo oscuro.
Agrega un service worker
Una función clave de una AWP es el soporte sin conexión. Para ZDF, la mayor parte del trabajo pesado se realiza mediante Workbox, un conjunto de bibliotecas y módulos de Node que facilitan la compatibilidad con diferentes estrategias de almacenamiento en caché. La AWP de ZDF se compiló con TypeScript y React, por lo que usa la biblioteca de Workbox que ya está integrada en create-react-app para almacenar previamente en caché los elementos 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 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, todo resultó ser un poco más complejo. Uno de los requisitos del proyecto era usar el reproductor web oficial de ZDF que no proporcionaba soporte sin conexión. El reproductor toma un ID de contenido como entrada, se comunica con la API de ZDF y reproduce el video asociado.
En este punto, interviene una de las funciones más potentes de la Web: los service worker.
El service worker puede interceptar las solicitudes que realiza el jugador y responder con los datos de IndexedDB. Esto agrega de manera transparente capacidades sin conexión sin tener que cambiar ni una sola línea del código del reproductor.
Dado que los videos sin conexión suelen ser bastante grandes, una gran pregunta es cuántos de ellos se pueden almacenar en un dispositivo. Con la ayuda de la API de StorageManager, la app puede estimar el espacio disponible y notificar al usuario cuando no hay suficiente espacio antes de comenzar la descarga. Lamentablemente, Safari no está en la lista de navegadores que implementan esta API y, al momento de escribirlo, no había información actualizada sobre cómo aplicaban cuotas otros navegadores. Por lo tanto, el equipo escribió una pequeña utilidad para probar el comportamiento en varios dispositivos. Por ahora, existe un artículo completo que resume todos los detalles.
Agrega un mensaje de instalación personalizado
La AWP de ZDF ofrece un flujo de instalación personalizado integrado en la app y les solicita a los usuarios que instalen la app en cuanto quieran descargar su primer video. Este es un buen momento para solicitar la instalación, ya que el usuario expresó la intención clara 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 el modo sin conexión, se muestra una página especial en su lugar que enumera todos los videos que se descargaron anteriormente o (en caso de que aún no se descargó 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, estas animaciones suelen tener el efecto opuesto y hacen que la app se sienta 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 con requestAnimationFrame() mientras se 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 proporciona solo una indicación aproximada del rendimiento del dispositivo y varía con cada carga, sigue siendo una buena base para la toma de decisiones. Vale la pena mencionar que, según el caso de uso, hay 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 de las experiencias modernas en dispositivos móviles es el modo oscuro. Muchas personas prefieren usar una IU atenuada, especialmente cuando miran videos con poca luz ambiente. 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 una programación para cambiar el tema en función de la hora del día.
Resultados
La nueva app web progresiva se lanzó de manera silenciosa como versión beta pública en marzo de 2020 y recibió muchos comentarios positivos desde entonces. Mientras continúa la fase beta, la AWP se ejecuta bajo su propio dominio temporal. Si bien la AWP no se promocionó públicamente, hay una cantidad de usuarios en constante crecimiento. Muchas de ellas son de Microsoft Store, que permite a los usuarios de Windows 10 descubrir AWP y, luego, instalarlas como apps específicas de la plataforma.
¿Qué sigue?
ZDF planea seguir agregando funciones a su AWP, incluido el acceso para la personalización, la visualización en varios dispositivos y plataformas, y las notificaciones push.