Como a ZDF criou um PWA de vídeo com modo off-line e escuro

Saiba como a ZDF criou um Progressive Web App (PWA) com recursos modernos, como suporte off-line, instalação e modo escuro.

Martin Schierle
Martin Schierle
Scott Friesen
Scott Friesen

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.

Convite personalizado para instalação. Solicitação de instalação personalizada acionada ao fazer o download de um vídeo para consumo off-line.
Uma solicitação de instalação personalizada é acionada ao fazer o download de um vídeo para consumo 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.

Página off-line com todo o conteúdo disponível para assistir off-line. Página off-line mostrando que não há conteúdo disponível para assistir off-line.
Página off-line mostrando todo o conteúdo disponível para assistir 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.