Saiba como a ZDF criou um Progressive Web App (PWA) com recursos modernos, como suporte off-line, facilidade de instalação e modo escuro.
Quando a emissora ZDF estava pensando em reformular a pilha de tecnologia de front-end, ela decidiu analisar melhor os Progressive Web Apps do site de streaming ZDFmediathek. A agência de desenvolvimento Cellular enfrentou o desafio de criar uma experiência baseada na Web semelhante aos apps iOS e Android específicos da plataforma da ZDF. O PWA oferece 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 a ZDF, a maior parte do trabalho pesado é feita pelo Workbox, um conjunto de bibliotecas e módulos de nó que facilitam o suporte a diferentes estratégias de armazenamento em cache. O ZDF PWA é criado com TypeScript e React. Por isso, ele usa a biblioteca Workbox já integrada ao create-react-app para pré-armazenar em cache 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.
A ideia básica é bem simples: buscar o vídeo e armazená-lo como um blob no IndexedDB. Em seguida, durante a reprodução, ouça 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 web player oficial da ZDF, que não fornece suporte off-line. O player recebe um ID de conteúdo como entrada, se comunica com a API ZDF e reproduz o vídeo associado.
É aqui que um dos recursos mais eficientes da Web vem para nos salvar: service workers.
O service worker pode interceptar as várias solicitações feitas pelo jogador e responder com os dados do IndexedDB. Isso adiciona recursos off-line de maneira transparente, sem precisar mudar nenhuma linha do código do player.
Como os vídeos off-line tendem a ser muito grandes, a grande pergunta é quantos deles podem realmente 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 antes mesmo de iniciar o download. Infelizmente, o Safari não está na lista de navegadores que implementam essa API e, no momento em que este artigo foi escrito, não havia informações atualizadas sobre como outros navegadores aplicavam cotas. Por isso, a equipe criou um pequeno utilitário para testar o comportamento em vários dispositivos. Agora existe um artigo abrangente que resume todos os detalhes.
Como adicionar uma solicitação de instalação personalizada
O ZDF PWA 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 demonstrou uma intenção clara de usar o app off-line.
Como criar uma página off-line para acessar os 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, aparece uma página especial, que lista todos os vídeos que já foram salvos ou, caso nenhum conteúdo tenha sido salvo, 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 do usuário avançada, o ZDF PWA inclui algumas transições sutis
que acontecem quando o usuário rola ou navega. Em dispositivos mais simples, essas
animações geralmente têm o efeito oposto e tornam o app lento e
menos responsivo se não forem executados a 60 quadros por segundo. Para levar isso em conta,
o app mede o frame rate real usando requestAnimationFrame() enquanto
o aplicativo é carregado e desativa todas as animações quando o valor fica 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 era uma boa base para tomar a decisão. Vale mencionar que, dependendo do caso de uso, existem outras técnicas de carregamento adaptável que os desenvolvedores podem implementar. Uma grande vantagem dessa abordagem é que ela está disponível em todas as plataformas.
Modo escuro
Um recurso muito usado em experiências modernas de dispositivos móveis é o modo escuro. Especialmente ao assistir vídeos com pouca luz ambiente, muitas pessoas preferem uma interface esmaecida. O ZDF PWA não só fornece uma opção que permite que os usuários alternem entre um tema claro e escuro, mas também reage a mudanças nas preferências de cor em todo o SO. Dessa forma, o app muda automaticamente a própria aparência em dispositivos com uma programação para mudar a base do tema na hora do dia.
Resultados
O novo Progressive Web App foi lançado silenciosamente como uma versão Beta pública em março de 2020 e recebeu muitos comentários positivos desde então. Enquanto a fase Beta continua, o PWA ainda é executado no próprio domínio temporário. Embora o PWA não tenha sido promovido publicamente, há um número crescente de usuários. Muitos desses 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.
Qual é a próxima etapa?
A ZDF planeja continuar adicionando recursos ao PWA, incluindo login para personalização, visualização entre dispositivos e plataformas e notificações push.