Consejos útiles

Rastree la visibilidad de la página en React usando Render Props

Pin
Send
Share
Send
Send


Al crear una aplicación web, puede encontrar situaciones en las que necesita realizar un seguimiento del estado actual de visibilidad. Sucede que necesita reproducir o pausar el efecto de una animación o video, reducir la intensidad o rastrear el comportamiento del usuario para el análisis. A primera vista, esta función parece bastante simple de implementar, pero no lo es tanto. El seguimiento de la actividad del usuario es un proceso bastante complicado.

Hay una API de Visibilidad de página que funciona bien en la mayoría de los casos, pero no maneja todos los casos posibles de inactividad de la pestaña del navegador. La API de visibilidad de página distribuye un evento de cambio de visibilidad para que los oyentes sepan que el estado de visibilidad de la página ha cambiado. No desencadena un evento en algunos casos si la ventana del navegador o la pestaña correspondiente está oculta a la vista. Para manejar algunos de estos casos, necesitamos usar una combinación de eventos de enfoque y desenfoque tanto en el documento como en la ventana.

Entonces, de este artículo aprenderá cómo crear un componente React simple que rastrea el estado de visibilidad de la página.

Codesandbox se usará aquí para crear la aplicación React (también puede usar create-react-app). Crearemos una pequeña aplicación en la que el elemento de video HTML5 se reproducirá solo si la pestaña del navegador está enfocada o activa, de lo contrario, se pausará automáticamente. El video se utiliza para facilitar la prueba de las características de la aplicación.

visibilidadjs - Contenedor para la API de visibilidad de página

Visibility.js es un contenedor para la API de visibilidad de página. Oculta los prefijos de proveedor y agrega funciones de alto nivel. La API de visibilidad de página le permite determinar si su página web es visible para un usuario o si está oculta en la pestaña de fondo o en la representación previa. Le permite utilizar el estado de visibilidad de la página en la lógica de JavaScript y mejorar el rendimiento del navegador al deshabilitar temporizadores innecesarios y solicitudes AJAX, o mejorar la experiencia de la interfaz de usuario (por ejemplo, al detener la reproducción de video o presentación de diapositivas cuando el usuario cambia a otra pestaña del navegador).

Crossbrowser y una forma liviana de verificar si el usuario está mirando la página o interactuando con ella. (contenedor alrededor de la API de visibilidad HTML5)

Empezando

Usaremos Codesandbox para iniciar nuestra aplicación React (puede usar crear-reaccionar-aplicación también). Crearemos una pequeña aplicación que tendrá un elemento de video HTML5 que se reproducirá solo cuando la pestaña del navegador esté enfocada o activa, de lo contrario, se pausará automáticamente. Estamos usando un video porque facilitará la prueba de la funcionalidad de nuestra aplicación.

Comencemos creando la pieza más simple, es decir El componente de video. Será un componente simple que recibirá una utilería booleana llamada activa y una utilería de cadena llamada src que contendrá la URL del video. Si los accesorios activos son verdaderos, reproduciremos el video; de lo contrario, lo detendremos.

Crearemos un componente de clase React simple. Representaremos un elemento de video simple con su fuente establecida en la URL pasada usando los accesorios src y usaremos la nueva API de referencia de React para adjuntar una referencia en el nodo DOM del video. Configuraremos el video para que se reproduzca automáticamente, suponiendo que cuando iniciemos la aplicación, la página estará activa. Una cosa a tener en cuenta aquí es que Safari ahora no permite elementos multimedia de reproducción automática sin interacción del usuario. El método del ciclo de vida de componentDidUpdate es muy útil para manejar los efectos secundarios cuando cambian los accesorios de un componente. Por lo tanto, aquí usaremos este método de ciclo de vida para reproducir y pausar el video según el valor actual de this.props.active.

Las diferencias de prefijos de proveedores del navegador son muy molestas cuando se utilizan ciertas API y la API de Visibilidad de página es sin duda una de ellas. Por lo tanto, crearemos una función de utilidad simple que manejará estas diferencias y nos devolverá la API compatible basada en el navegador del usuario de manera uniforme. Crearemos y exportaremos esta pequeña función desde pageVisibilityUtils.js bajo el src directorio

En esta función, utilizaremos un flujo de control simple basado en instrucciones if-else para devolver la API específica del navegador. Puedes ver que adjuntamos el ms prefijo para internet explorer y kit web prefijo para los navegadores webkit. Almacenaremos la API correcta en variables de cadena ocultas y de visibilidadCambie y las devolveremos de la función en forma de un objeto simple. Por último, exportaremos la función.

A continuación, pasamos a nuestro componente principal. Encapsularemos toda nuestra lógica de seguimiento de Visibilidad de página en un componente de clase React reutilizable aprovechando el patrón Render Props. Crearemos un componente de clase llamado VisibilityManager. Este componente manejará la adición y eliminación de todos los oyentes de eventos basados ​​en DOM.

Comenzaremos importando la función de utilidad que creamos anteriormente e invocando para obtener las API específicas del navegador correctas. Luego, crearemos el componente React e inicializaremos su estado con un solo campo isVisible establecido en true. Este campo de estado booleano será responsable de reflejar el estado de visibilidad de nuestra página. En el método del ciclo de vida del componente componentDidMount del componente, adjuntaremos un detector de eventos en el documento para el evento de cambio de visibilidad con el método this.handleVisibilityChange como controlador. También adjuntaremos oyentes de eventos para el foco y eventos borrosos en el documento, así como el elemento de la ventana. Esta vez estableceremos this.forceVisibilityTrue y this.forceVisibilityFalse como controladores para los eventos de enfoque y desenfoque, respectivamente.

Ahora, crearemos el método handleVisibilityChange que aceptará un argumento único forceFlag. Este argumento forceFlag se utilizará para determinar si se llama al método debido al evento de cambio de visibilidad o al evento de foco o desenfoque. Esto es así porque los métodos forceVisibilityTrue y forceVisibilityFalse no hacen nada más que llamar al método handleVisibilityChange con valor verdadero y falso para el argumento ForceFlag. Dentro del método handleVisibilityChange, primero verificamos si el valor del argumento forceFlag es un valor booleano (esto se debe a que si se llama desde el controlador de eventos de intercambio de visibilidad, el argumento transmitido será un objeto SyntheticEvent). Si es un booleano, verificamos si es verdadero o falso. Cuando es cierto, llamamos al método setVisibility con verdadero; de lo contrario, llamamos al método falso como argumento. El método setVisibility aprovecha el método this.setState para actualizar el valor del campo isVisible en el estado del componente. Pero si el ForceFlag no es un booleano, verificamos el valor del atributo oculto en el documento y llamamos al método setVisibility en consecuencia. Esto concluye nuestra lógica de seguimiento del estado de visibilidad de la página.

Para hacer que el componente sea reutilizable en la naturaleza, usamos el patrón Render Props, es decir en lugar de representar un componente desde el método de representación, invocamos this.props.children como una función con this.state.isVisible.

Por último, montamos nuestra aplicación React en el DOM en nuestro index.js archivo. Importamos nuestros dos componentes React VisibilityManager y Video y creamos una pequeña aplicación funcional de componentes React componiéndolos. Pasamos una función como hijos del componente VisibilityManager que acepta que es Visible como argumento y la pasa al componente Video en su declaración de retorno. También pasamos una URL de video como accesorios de src al componente Video. Así es como consumimos el componente VisiblityManager basado en Render Props. Finalmente, utilizamos el método ReactDOM.render para representar nuestra aplicación React en el nodo DOM con el ID "root".

Conclusión

Las API de navegador modernas se están volviendo realmente poderosas y se pueden usar para hacer cosas increíbles. La mayoría de estas API son de naturaleza imperativa y pueden ser difíciles de trabajar a veces en el paradigma declarativo de React. Usar patrones potentes como Render Props para envolver estas API en sus propios componentes React reutilizables puede ser muy útil.

Desarrollador de JavaScript y entusiasta de la seguridad cibernética.

Publicado 24 ago

Pin
Send
Share
Send
Send