Truco Web 2.0: Bloquear el botón “Atrás” del Navegador

Cuando desplegamos nuestros proyectos Web 2.0 nos encontramos, en muchas ocasiones, con el mensaje de que se ha interrumpido la conexión del servidor cuando el usuario utiliza el botón para regresar a la página anterior en el navegador y luego vuelve a la app.

Esto es incluso más frecuente cuando el usuario accede a nuestra aplicación utilizando un dispositivo móvil y utiliza (muchas veces por inercia) el gesto de regresar a la página anterior.

Para evitar este tipo de situaciones te propongo el siguiente truco, con ello se evita que ocurran este tipo de situaciones puesto que se “bloquea” el botón atrás del navegador manteniendo en todo momento la página en curso de nuestra aplicación.

En realidad se vuelve a cargar la página actual, por lo que probablemente querrás utilizar cookies u otros elementos que te permitan guardar y volver a recuperar los datos de interés para un mismo usuario.

Aplicar este truco es bastante simple. En primer lugar, añade un valor a la propiedad HashTag del objeto Session en el evento Opening de la página web. Por ejemplo:

Session.HashTag = "#"

A continuación, selecciona el objeto App e introduce el siguiente fragmento en el apartado HTML Header del Inspector asociado:

<script>
window.addEventListener('popstate', function(event) {
	history.pushState(null, null, window.location.pathname);
	history.pushState(null, null, window.location.pathname);
	}, false);
</script>

¡Y eso es todo! El resultado es el que puedes ver en el siguiente vídeo: