Uso de la API de visibilidad para optimizar el desarrollo dinámico de WordPress

No es inusual que las personas tengan más ventanas abiertas (cada una con más pestañas) mientras navegan en Internet. De hecho, pueden tener aún más navegadores en funcionamiento. Como desarrolladores web, tendemos a hacer muchas cosas cuando una página se carga por primera vez: animaciones, videos iniciales, apertura modal, toboganes iniciales, etc. Sabemos que cuando se cobra una página y cuando se ve en realidad no suelen ser el mismo evento. Por ejemplo, si un enlace a su sitio está abierto en una nueva pestaña, podría llevar minutos, horas o incluso días hasta que realmente se vea.
Esto crea dos problemas. Un buen ejemplo de uno de estos problemas es un video que desea reproducir automáticamente. Esto es muy fácil de hacer al cargar la página, pero si alguien abre la página en otra pestaña, es posible que no abra la pestaña hasta que termine el video. El otro problema que esto crea es cuando una página tiene que hacer una solicitud de AJAX a un servidor a un intervalo regular. Si la página se abre en una pestaña no utilizada, en una ventana oculta o en un navegador inactivo, podría conducir a muchas solicitudes innecesarias del servidor. Este era exactamente el problema que enfrenté cuando estaba trabajando con su nuevo complemento de plantilla en vivo, Epoch.
Cada quince segundos, Epoch cuenta automáticamente el número de comentarios para garantizar que no se hayan agregado nuevos comentarios. Si se descubre un nuevo comentario, Epoch lo considera y luego lo representa. Estábamos muy preocupados por los efectos de alguien que abre una publicación, la lea y luego la dejó abierto en una pestaña no utilizada durante una semana. La solución a este problema demostró ser solo unas pocas líneas de código. Sobre la API de visibilidad en los navegadores más antiguos, podríamos determinar la condición activa de una pestaña utilizando el método jQuery Blur. Este método, sin embargo, era bastante inseguro; Sin mencionar que simplemente no funciona en nuevos navegadores. En cambio, en 2011 se introdujo una nueva API de visibilidad, que tiene un puntaje de uso bastante bueno. Sin embargo, no incluye IE9 o una versión anterior. La apibilidad de visibilidad le indica el estado actual de la página, si se vuelve, visible, no visible, etc. Si bien la implementación de la API de visibilidad está muy extendida, se basa, por supuesto, en los prefijos específicos del proveedor. Esta es solo una prueba adicional de que las personas que hacen navegadores tienen la misión de volvernos locos con los prefijos específicos del proveedor. Afortunadamente, hay algunos paquetes para la API de visibilidad que nos hacen invisibles. En este artículo explicaré cómo usar visibilidad.js de Andrey Sitnik. Este envoltorio es muy fácil de usar y está cubierto por la licencia del MIT compatible con GLP, lo que seguramente se utilizará en sus proyectos de WordPress.
Se puede agregar como adicción a su proyecto utilizando todos los sistemas de administración de adicciones populares o cargados a través de un CDN. Confiaré en ti para que hagas cola correctamente. Usando un envoltorio de visibilidad en las siguientes dos secciones, le mostraré dos formas simples de implementar el paquete de visibilidad para resolver ambos temas que discutí al presentar este artículo. Mostraré ambos ejemplos solo en JavaScript. Nota: asegúrese de implementarlos en su complemento o tema correctamente. Ejemplo uno: la reproducción automática de un video de YouTube de YouTube ofrece un video para cargar un video en un iframe. Es bastante simple. Si observa el código de ejemplo, verá que se ejecuta un evento cuando se cargue el video. En la llamada inversa para ese evento, muestran cómo reproducir el video. Así es como se ve: función OnplayerReady (Event) {
Event.target.playvideo ();
} Usando el contenedor visibilidad.js, podemos cambiar esa función para no encender el video hasta que la página sea visible con un cambio muy simple:
Función OnplayerReady (evento) {
Visibilidad.onvisible (function () {

Event.target.playvideo ();
});
} Si la página se representa en una pestaña de navegador activo, el comportamiento será idéntico. Por otro lado, si alguien abre la página en una pestaña inactiva, el video no comenzará hasta que esa pestaña esté activa nuevamente. La misma estrategia se puede aplicar en varias situaciones diferentes. Por ejemplo, si usa una diapositiva, es posible que desee comenzar la presentación de diapositivas solo cuando la página sea realmente visible.
Ejemplo dos: funciones de sincronización mejoradas JavaScript proporciona una manera muy simple de repetir la misma función en un intervalo establecido. Aquí está el ejemplo más elemental: setInterval (function () {console.log (‘bocadillos’);
}, 10000); Esto registrará la palabra “bocadillos” en la consola cada diez segundos. Estos tipos de funciones de sincronización se utilizan para activar las diapositivas de reproducción automática, pero también se pueden usar para realizar llamadas inversas regulares para verificar los cambios de datos a través de AJAX. A menudo, estos tipos de verificaciones ordinarias de “llamadas domiciliarias” se requieren en las configuraciones del servidor sin una conexión bidireccional constante al servidor.
Ahora considere esta función de sincronización: setInterval (function () {
$ .Get (url, {acción: “algo”},
Función (respuesta) {
//Hacer algo
}
);
}, 10000); Hará una solicitud de AJAX cada diez segundos. Es decir, seis solicitudes adicionales a su servidor por minuto, para cada espectador activo. Si necesita una encuesta tan constante, está bien, pero si alguien abre la página, lea durante cinco minutos y luego deje la pestaña abierta pero inactiva por un día, significa más de ocho mil solicitudes innecesarias a su servidor.
Aunque este es un problema que las tecnologías como WebSockers resuelven muy bien, un complemento de WordPress o un desarrollador de temas no puede basarse en WebSockers o una tecnología similar utilizada a menos que funcionen en código para un sitio en particular, donde sé que WebSockers está en uso. El mismo contenedor para la API de visibilidad que discutimos en el último paso también se puede usar en el conjunto en el conjunto, pero ejecutará la función de llamada inversa solo si la pestaña actual es visible. Aquí está el último ejemplo, restaurado para ejecutar solo si la pestaña actual es visible: visibilidad.every (10000, function () {$ .get (url, {acción: “algo”},
Función (respuesta) {
//Hacer algo
}
);
}); Cuando la página está en una pestaña visible, se comporta exactamente como cuando se usa SetInterval. Pero cuando la pestaña no es visible, no pasa nada. La mejor parte, además del bajo uso de recursos tanto en su servidor como en su computadora de visitante, es que la función de llamada inversa se ejecutará inmediatamente después de que la pestaña se haga visible.