Dicas úteis

Visibilidade da página da trilha em React usando adereços de renderização

Pin
Send
Share
Send
Send


Ao criar um aplicativo Web, você pode encontrar situações em que precisa rastrear o estado atual de visibilidade. Acontece que você precisa reproduzir ou pausar o efeito de uma animação ou vídeo, reduzir a intensidade ou acompanhar o comportamento do usuário para análises. À primeira vista, essa função parece bastante simples de implementar, mas não é bem assim. O rastreamento da atividade do usuário é um processo bastante complicado.

Existe uma API de visibilidade da página que funciona bem na maioria dos casos, mas não lida com todos os casos possíveis de inatividade da guia do navegador. A API de visibilidade da página dispara um evento de mudança de visibilidade para que os ouvintes saibam que o estado de visibilidade da página foi alterado. Em alguns casos, ele não dispara um evento se a janela do navegador ou a guia correspondente estiver oculta. Para lidar com alguns desses casos, precisamos usar uma combinação de eventos de foco e desfoque no documento e na janela.

Portanto, neste artigo, você aprenderá como criar um componente React simples que rastreia o Estado da visibilidade da página.

O Codesandbox será usado aqui para criar o aplicativo React (você também pode usar o create-react-app). Criaremos um pequeno aplicativo no qual o elemento de vídeo HTML5 será reproduzido apenas se a guia do navegador estiver em foco ou ativa; caso contrário, será pausada automaticamente. O vídeo é usado para facilitar o teste dos recursos do aplicativo.

visiblejs - Wrapper para a API de visibilidade da página

Visibility.js é um wrapper para a API de visibilidade da página. Oculta prefixos de fornecedores e adiciona funções de alto nível. A API de visibilidade da página permite determinar se sua página da web está visível para um usuário ou oculta na guia em segundo plano ou na pré-renderização. Ele permite que você use o estado de visibilidade da página na lógica JavaScript e melhore o desempenho do navegador desativando temporizadores desnecessários e solicitações AJAX ou melhore a experiência da interface do usuário (por exemplo, parando a reprodução de vídeo ou apresentação de slides quando o usuário alterna para outra guia do navegador).

Navegador cruzado e maneira leve de verificar se o usuário está olhando para a página ou interagindo com ela. (wrapper em torno da API de visibilidade HTML5)

Introdução

Usaremos o Codesandbox para inicializar nosso aplicativo React (você pode usar create-react-app também). Criaremos um aplicativo pequeno que terá um elemento de vídeo HTML5 que será reproduzido apenas quando a guia do navegador estiver em foco ou ativa, caso contrário, ela será pausada automaticamente. Estamos usando um vídeo, pois isso facilitará o teste da funcionalidade do aplicativo.

Vamos começar criando a peça mais simples, ou seja, o componente de vídeo. Será um componente simples que receberá adereços booleanos chamados active e adereços String denominados src, que manterão o URL do vídeo. Se os adereços ativos forem verdadeiros, reproduziremos o vídeo, caso contrário, faremos uma pausa.

Criaremos um componente simples da classe React. Renderizaremos um elemento de vídeo simples com sua origem definida como a URL passada usando os props src e usaremos a nova API ref do React para anexar uma ref no nó DOM do vídeo. Definiremos o vídeo para reprodução automática, assumindo que, quando iniciarmos o aplicativo, a página estará ativa. Uma coisa a observar aqui é que o Safari agora não permite a reprodução automática de elementos de mídia sem a interação do usuário. O método do ciclo de vida componentDidUpdate é muito útil para lidar com efeitos colaterais quando os objetos de um componente são alterados. Portanto, aqui usaremos esse método de ciclo de vida para reproduzir e pausar o vídeo com base no valor atual de this.props.active.

As diferenças de prefixo do fornecedor do navegador são muito irritantes ao se usar ao usar determinadas APIs e a API do Page Visibility é certamente uma delas. Portanto, criaremos uma função de utilitário simples que lidará com essas diferenças e nos devolverá a API compatível com base no navegador do usuário de maneira uniforme. Vamos criar e exportar essa pequena função de pageVisibilityUtils.js sob o src diretório

Nesta função, utilizaremos o fluxo de controle simples baseado em instruções if-else para retornar a API específica do navegador. Você pode ver que anexamos o ms prefixo para o Internet Explorer e webkit prefixo para navegadores da webkit. Armazenaremos a API correta em variáveis ​​de cadeia ocultas e visibleChange e as retornaremos da função na forma de um objeto simples. Por fim, exportaremos a função.

Em seguida, passamos para o nosso componente principal. Encapsularemos toda a nossa lógica de rastreamento de Visibilidade da página em um componente reutilizável da classe React, aproveitando o padrão Render Props. Criaremos um componente de classe chamado VisibilityManager. Este componente tratará da adição e remoção de todos os ouvintes de eventos baseados em DOM.

Começaremos importando a função de utilitário que criamos anteriormente e invocando-a para obter as APIs específicas do navegador corretas. Em seguida, criaremos o componente React e inicializaremos seu estado com um único campo isVisible definido como true. Este campo Estado booleano será responsável por refletir o estado de visibilidade da página. No método do ciclo de vida componentDidMount do componente, anexaremos um ouvinte de evento no documento para o evento visiblechange com o método this.handleVisibilityChange como manipulador. Também anexaremos ouvintes de eventos para os eventos de foco e desfoque no documento, bem como no elemento da janela. Desta vez, definiremos this.forceVisibilityTrue e this.forceVisibilityFalse como manipuladores dos eventos de foco e desfoque, respectivamente.

Agora, criaremos o método handleVisibilityChange que aceitará um único argumento forçadoFlag. Esse argumento forceFlag será usado para determinar se o método é chamado devido ao evento de mudança de visibilidade ou aos eventos de foco ou desfoque. Isso ocorre porque os métodos forceVisibilityTrue e forceVisibilityFalse não fazem nada, mas chamam o método handleVisibilityChange com valor true e false para o argumento forceFlag. Dentro do método handleVisibilityChange, primeiro verificamos se o valor do argumento forceFlag é um booleano (porque, se for chamado a partir do manipulador de eventos visiblechange, o argumento transmitido será um objeto SyntheticEvent). Se for um booleano, verificamos se é verdadeiro ou falso. Quando é verdade, chamamos o método setVisibility com true, caso contrário, chamamos o método com false como argumento. O método setVisibility aproveita o método this.setState para atualizar o valor do campo isVisible no estado do componente. Mas, se o extendedFlag não for um booleano, verificaremos o valor do atributo oculto no documento e chamaremos o método setVisibility adequadamente. Isso encerra nossa lógica de rastreamento do estado da visibilidade da página.

Para tornar o componente reutilizável por natureza, usamos o padrão Render Props, ou seja, em vez de renderizar um componente a partir do método render, invocamos this.props.children como uma função com this.state.isVisible.

Por fim, montamos nosso aplicativo React no DOM em nosso index.js arquivo Importamos nossos dois componentes do React VisibilityManager e Video e criamos um pequeno aplicativo funcional do componente do React, compondo-os. Passamos uma função como filhos do componente VisibilityManager que aceita é Visible como argumento e a transmitimos ao componente Video em sua declaração de retorno. Também passamos um URL de vídeo como src props para o componente Video. É assim que consumimos o componente VisiblityManager baseado em Render Props. Por fim, usamos o método ReactDOM.render para renderizar nosso aplicativo React no nó DOM com o ID "root".

Conclusão

As APIs modernas do navegador estão ficando realmente poderosas e podem ser usadas para fazer coisas incríveis. A maioria dessas APIs é de natureza imperativa e pode ser difícil de trabalhar algumas vezes no paradigma declarativo do React. Usar padrões poderosos como Render Props para agrupar essas APIs em seus próprios componentes reutilizáveis ​​do React pode ser muito útil.

Desenvolvedor JavaScript e entusiasta da segurança cibernética.

Publicado o dia 24 Ago

Pin
Send
Share
Send
Send