Hacer que la pestaña del navegador muestre una notificación

Question

Por razones de seguridad, mi sitio web automáticamente cierra la sesión a los usuarios después de 5 minutos de inactividad. Lo logro a través de tiempos de espera de jquery que se restablecen cada vez que el usuario hace lo que yo considero una "actividad". Para garantizar la seguridad, el tiempo de espera de la cookie también se establece en 5 minutos, y mi jquery realiza un latido de vuelta al servidor para garantizar que la cookie no caduque.

Actualmente, a unos 4 minutos de inactividad, aparece un cuadro de diálogo de jquery ui, que advierte al usuario de su inminente tiempo de espera. El usuario puede optar por permanecer conectado, cerrar sesión ahora o no hacer nada y se ven obligados a cerrar sesión al final de los 5 minutos.

Mi problema es que quiero hacer que la pestaña parpadee/parpadee con un color de fondo diferente para advertir al usuario de que algo está pasando mientras no estaban prestando atención. No estoy seguro de cómo hacerlo.

Answer 1

Puede cambiar el título de la página (esto también se debe cambiar el texto en la pestaña).

document.title = 'New title'; 

Además usted puede hacer esto en un setInterval de ida y vuelta entre el título de la página y la información que está tratando de mostrar al usuario. He visto este comportamiento en gmail con la comunicación de chat entrante.

Answer 2

puede cambiar el título de la página y que se mostrará en la pestaña del navegador, pero no se puede cambiar el color de fondo o hacerlo parpadear

Answer 3

No es posible cambiar el fondo de una pestaña del navegador, al menos no consistentemente en todos.

Como ha mencionado Josiah, setInterval se puede utilizar para crear un título de página intermitente.

Esta Javascript hace uso de ella:

var PageTitleNotification = { 
    Vars:{ 
     OriginalTitle: document.title, 
     Interval: null 
    },  
    On: function(notification, intervalSpeed){ 
     var _this = this; 
     _this.Vars.Interval = setInterval(function(){ 
      document.title = (_this.Vars.OriginalTitle == document.title) 
           ? notification 
           : _this.Vars.OriginalTitle; 
     }, (intervalSpeed) ? intervalSpeed : 1000); 
    }, 
    Off: function(){ 
     clearInterval(this.Vars.Interval); 
     document.title = this.Vars.OriginalTitle; 
    } 
} 

Esto puede ser usado como:

PageTitleNotification.On("User logged out!"); 

Ver mi siguiente entrada en el blog para más información:

http://curtistimson.co.uk/js/create-a-flashing-tab-notification-page-title/

Answer 4

Usted también puede agregar una alerta ventana. Cuando el usuario está en otra pestaña, el navegador tiene una función incorporada de mostrar las pestañas (tener alerta). Por lo tanto, cambiar el título del documento junto con una alerta servirá para su propósito. Nota: antes de mostrar la alerta, primero debe verificar si la pestaña está activa.