Saiba como a ZDF criou um app da Web progressivo (PWA, na sigla em inglês) com recursos modernos, como suporte off-line, capacidade de instalação e modo escuro.
Quando a emissora ZDF estava pensando em redesenhar a pilha de tecnologia do front-end, ela decidiu dar uma olhada mais de perto nos apps da Web progressivos para o site de streaming ZDFmediathek. A agência de desenvolvimento Cellular aceitou o desafio de criar uma experiência baseada na Web que fosse equivalente aos apps para iOS e Android específicos da plataforma da ZDF. A PWA oferece capacidade de instalação, reprodução de vídeo off-line, animações de transição e um modo escuro.
Como adicionar um service worker
Um recurso importante de um PWA é o suporte off-line. Para ZDF, a maior parte do trabalho pesado é feita pelo Workbox, um conjunto de bibliotecas e módulos Node que facilitam o suporte a diferentes estratégias de armazenamento em cache. O PWA do ZDF é criado com TypeScript e React, portanto, usa a biblioteca Workbox já integrada ao create-react-app para armazenar em cache prévio os recursos estáticos. Isso permite que o aplicativo se concentre em disponibilizar o conteúdo dinâmico off-line, neste caso os vídeos e os metadados deles.
A ideia básica é bem simples: buscar o vídeo e armazená-lo como um blob no IndexedDB. Em seguida, durante a reprodução, detecte eventos on-line/off-line e mude para a versão salva quando o dispositivo ficar off-line.
Infelizmente, as coisas ficaram um pouco mais complexas. Um dos requisitos do projeto era usar o player da Web oficial do ZDF, que não oferece suporte off-line. O player usa um ID de conteúdo como entrada, se comunica com a API ZDF e reproduz o vídeo associado.
É aí que um dos recursos mais poderosos da Web vem para o resgate: service workers.
O service worker pode interceptar as várias solicitações feitas pelo player e responder com os dados do IndexedDB. Isso adiciona recursos off-line de maneira transparente sem precisar mudar uma única linha do código do player.
Como os vídeos off-line tendem a ser bastante grandes, uma grande questão é quantos deles podem ser armazenados em um dispositivo. Com a ajuda da API StorageManager, o app pode estimar o espaço disponível e informar ao usuário quando não há espaço suficiente antes mesmo de iniciar o download. Infelizmente, o Safari não está na lista de navegadores que implementam essa API. No momento em que este artigo foi escrito, não havia muitas informações atualizadas sobre como outros navegadores aplicavam cotas. Portanto, a equipe escreveu um pequeno utilitário para testar o comportamento em vários dispositivos. Já existe um artigo completo que resume todos os detalhes.
Como adicionar uma solicitação de instalação personalizada
O PWA da ZDF oferece um fluxo de instalação personalizado no app e solicita que os usuários instalem o app assim que quiserem fazer o download do primeiro vídeo. Esse é um bom momento para solicitar a instalação, porque o usuário expressou uma intenção clara de usar o app off-line.
Criar uma página off-line para acessar downloads
Quando o dispositivo não está conectado à Internet e o usuário navega para uma página que não está disponível no modo off-line, uma página especial é mostrada em vez disso, listando todos os vídeos que foram previamente transferidos por download ou (caso nenhum conteúdo tenha sido transferido ainda) uma breve explicação do recurso off-line.
Como usar a taxa de carregamento de frames para recursos adaptáveis
Para oferecer uma experiência de usuário rica, a PWA do ZDF inclui algumas transições sutis
que acontecem quando o usuário rola ou navega. Em dispositivos simples, essas
animações geralmente têm o efeito oposto e tornam o app lento e
menos responsivo se não forem executadas a 60 frames por segundo. Para levar isso em
consideração, o app mede a taxa de frames real usando requestAnimationFrame() enquanto
o aplicativo carrega e desativa todas as animações quando o valor cai abaixo de um
determinado limite.
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();
});
Mesmo que essa medição forneça apenas uma indicação aproximada do desempenho do dispositivo e varie em cada carga, ela ainda é uma boa base para tomar decisões. Vale a pena mencionar que, dependendo do caso de uso, existem outras técnicas de carregamento adaptativo que os desenvolvedores podem implementar. Uma grande vantagem dessa abordagem é que ela está disponível em todas as plataformas.
Modo escuro
Um recurso popular para experiências modernas em dispositivos móveis é o modo escuro. Muitas pessoas preferem uma interface escura, principalmente quando estão assistindo vídeos em ambientes com pouca luz. A PWA do ZDF não apenas oferece uma chave que permite aos usuários alternar entre um tema claro e um escuro, como também reage às mudanças nas preferências de cores do SO. Dessa forma, o app vai mudar automaticamente a aparência em dispositivos que configuraram uma programação para mudar a base do tema de acordo com o horário.
Resultados
O novo app da Web progressiva foi lançado silenciosamente como uma versão Beta pública em março de 2020 e recebeu muito feedback positivo desde então. Enquanto a fase Beta continua, a PWA ainda é executada no próprio domínio temporário. Embora o PWA não tenha sido promovido publicamente, o número de usuários está crescendo constantemente. Muitos deles são da Microsoft Store, que permite que os usuários do Windows 10 descubram PWAs e os instalem como apps específicos da plataforma.
A seguir
A ZDF planeja continuar adicionando recursos à PWA, incluindo login para personalização, visualização entre dispositivos e plataformas e notificações push.