Saiba como a ZDF criou um Progressive Web App (PWA) com recursos modernos, como suporte off-line, instalação e modo escuro.
Quando a emissora ZDF considerou reprojetar a tecnologia de front-end a pilha, eles decidiram olhar mais de perto os Progressive Web Apps para seu site de streaming ZDFmediathek. Agência de desenvolvimento A Cellular assumiu o desafio de criar um que está no mesmo nível dos apps iOS e Android específicos da plataforma ZDF. A Os PWAs oferecem instalações, reprodução de vídeos off-line, animações de transição e uma 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 Workbox, um conjunto de bibliotecas; e módulos de nó que facilitam o suporte a diferentes estratégias de armazenamento em cache. A O ZDF PWA foi criado com TypeScript e React, então usa a biblioteca Workbox já integrados ao create-react-app para pré-armazenar em cache ativos estáticos. Isso permite que o aplicativo se concentre em tornar conteúdo disponível off-line, neste caso os vídeos e seus metadados.
A ideia básica é bastante simples: buscar o vídeo e armazená-lo como um blob IndexedDB. Em seguida, durante a reprodução, ouça eventos on-line/off-line e mude para a versão baixada quando o dispositivo estiver off-line.
Infelizmente, as coisas ficaram um pouco mais complexas. Um dos requisitos era usar o player da Web oficial de ZDF, que não fornece nenhuma suporte off-line. O player recebe um ID de conteúdo como entrada, se comunica com a API ZDF e e reproduz o vídeo associado.
É aqui que um dos recursos mais poderosos da Web vem para ajudar: service workers.
O service worker pode interceptar as várias solicitações feitas pelo jogador e e responde com os dados do IndexedDB. Isso adiciona conteúdo off-line de maneira transparente recursos sem ter que alterar uma única linha do código do player.
Como os vídeos off-line tendem a ser muito grandes, uma grande questão é quantos deles realmente podem ser armazenadas em um dispositivo. Com a ajuda da classe StorageManager API que o app pode estimar sobre o espaço disponível e informar o usuário quando não houver espaço suficiente antes mesmo iniciando o download. O Safari não está na lista de navegadores para implementar essa API e, no momento em que o documento foi escrito, não havia informações informações sobre como outros navegadores aplicavam cotas. Portanto, a equipe escreveu pequeno utilitário para testar o comportamento vários dispositivos. A esta altura, um conjunto de dados artigo que resume todos os detalhes.
Como adicionar um prompt de instalação personalizado
O PWA do ZDF oferece um fluxo de instalação personalizado no app e solicita que os usuários instalarem o app assim que quiserem fazer o download do primeiro vídeo. Esta é uma 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 downloads
Quando o dispositivo não está conectado à Internet e o usuário navega para um que não estiver disponível no modo off-line, uma página especial será mostrada lista todos os vídeos que já foram salvos ou (no caso de nenhum conteúdo ter sido já foi baixado) uma breve explicação do recurso off-line.
Como usar o frame rate para recursos adaptáveis
Para oferecer uma experiência do usuário avançada, o PWA do ZDF inclui algumas transições sutis
que acontecem quando o usuário rola a tela ou navega. Em dispositivos mais simples, como
animações costumam ter o efeito oposto e deixar o aplicativo lento e
têm menos capacidade de resposta quando não são executados a 60 quadros por segundo. Para levar isso ao
o app mede o frame rate real por requestAnimationFrame() enquanto
o aplicativo carrega e desativa todas as animações quando o valor fica abaixo de um
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 da capacidade desempenho e varia em cada carga, ainda era uma boa base para a tomada de decisões. Vale mencionar que, dependendo do caso de uso, 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 popular para experiências modernas em dispositivos móveis é modo escuro. Especialmente quando assistir vídeos com pouca luz ambiente; muitas pessoas preferem uma interface com pouca luz. O PWA da ZDF fornece um interruptor que permite aos usuários alternar entre uma luz e uma tema escuro, ele também reage a mudanças nas preferências de cor em todo o SO. Desta forma o aplicativo mudará automaticamente sua aparência em dispositivos que tenham configurado uma programação para alterar o tema de acordo com a 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 feedbacks positivos desde então. Enquanto a fase Beta continua, o PWA ainda é executado no próprio domínio temporário. Embora o O PWA não foi promovido publicamente, mas há um número cada vez maior de usuários. Muitas são da Microsoft Store, o que permite aos usuários do Windows 10 descobrir e instalar PWAs como apps específicos da plataforma.
A seguir
A ZDF planeja continuar adicionando recursos ao PWA, incluindo login para personalização, visualização em vários dispositivos e plataformas e notificações push.