Tengo una aplicación React, agregué eventlisteners a la ventana. Entonces, de esta manera puedo detectar si el usuario realmente está viendo la página o no. En el navegador de la computadora, todo funciona como se esperaba.
Pero probé esto en IphoneX (es irrelevante pero el navegador era Safari), y me encontré con esto: si el usuario mantiene presionada la parte inferior del menú y desliza todos los abiertos , entonces onBlur no funciona . Permanece en el evento onFocus. Entonces, en realidad, window.eventlistener no funciona correctamente en dispositivos móviles.
Además, cuando abro el navegador nuevamente (pero sin hacer clic en nada, solo abro el navegador y veo la página), el evento onFocus tampoco funciona. Espera a que toque o haga clic en algún lugar de la página.
¿Cómo manejar el enfoque/desenfoque del usuario completamente en el lado móvil?
En la documentación de los eventos compatibles con iOS/Safari, sugieren pageshow y pagehide para escuchar el tipo de actividad de la que creo que estás hablando.
Puede usar requestAnimationFrame para verificar si el usuario está viendo la página.
function isWatching(){ console.log("watching: " + Date.now()); requestAnimationFrame(isWatching); } requestAnimationFrame(isWatching);Vea el ejemplo aquí: https://jsfiddle.net/t2r1sp56/ y también debería leer más sobre esto aquí: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
puede usar window.navigator para obtener toda la información del sistema operativo y del navegador