Javascript. The History API
Una introducción a la API History y cómo emplearla para que el botón “atrás” del navegador funcione correctamente
La API History de Javascript probablemente sea una de las más útiles características de las que disponemos para controlar el flujo de navegación de los usuarios. Sin ella, reaccionar correctamente a las pulsaciones sobre el botón atrás de los navegadores se volvería realmente difícil provocando que a menudo los usuarios de nuestra aplicación viesen cómo pierden información o experimentan una navegación confusa.
Por tanto, en este artículo repasaré tanto el funcionamiento como algunos de los casos de uso de la API History ya que creo que resulta interesante disponer de este conocimiento sobre todo ahora que vivimos en mundo donde reinan las SPA.
Así que como siempre, ¡vamos a ello!
👨💼: “No me funciona el botón atrás”
Creo que este es uno de los comentarios más escuchados cuando trabajamos en el desarrollo de una aplicación basada en algún framework o librería de Javascript. Pero… ¿cuál es el origen de este problema?
Antiguamente se tendía a asociar cada página de una web a una única tarea. De este modo, en el momento en que el visitante necesitaba realizar otra acción pulsaba sobre un enlace y navegaba a otra URL.
Sin embargo, con la llegada de Javascript y, sobre todo, con la popularización del uso de las llamadas XMLHttpRequest se tendió a sustituir este tipo de navegación “página a página” por una navegación donde la nueva información era traída mediante este tipo de llamadas. Sin embargo, el botón “atrás” de los navegadores mantuvo su funcionamiento de modo que, si tras una petición de este tipo el usuario pulsaba sobre el botón, lo que hacía era regresar a la página anterior, no al “estado” anterior a la llamada.
Y esto, convendréis conmigo, es realmente confuso para quien no tenga idea de cómo funciona todo por debajo.
La API History al rescate
Sin embargo, con la llegada de HTML5 los desarrolladores ganamos la posibilidad de acceder al historial de navegación del usuario dentro de la web, de modo que controlar el funcionamiento del botón “atrás” se volvió mucho más sencillo. Esto fue posible gracias a la ampliación de la funcionalidad que proporciona el objeto history , que si bien ya existía desde los inicios, con esta actualización se volvió mucho más potente.
Inicialmente, el objeto history contaba con 3 métodos y una sola propiedad. Los métodos eran:
back, para enviar al visitante un paso atrás.forward, para enviar al visitante un paso adelante.go, el cual aceptaba unoffsetnumérico para indicar al navegador cuantos pasos hacia delante o hacia atrás debía dar en el historial.
La única propiedad del objeto history era length e indicaba cuantas entradas había en el historial del navegador. La llegada de la API History añadió dos métodos que supusieron un gran cambio en el uso de este objeto: pushState y onPopState
Añadiendo una entrada al historial
El método pushState como su propio nombre indica permite añadir una nueva entrada en el historial de navegación dentro de la web actual. Esta entrada puede contener un estado asociado a ella (de ahí el nombre del método) de modo que cuando el usuario vuelve hacia atrás a través del historial es posible recuperar dicho estado. Dicho de otro modo, podemos recuperar la versión inicial de la página que estaba viendo.
Este método recibe 3 argumentos:
data, que representa el estado actual de la página y que nos permitirá restaurar la página a una versión anterior.title, que nos permite indicar al navegador qué título debe mostrar para la página actual (aunque actualmente es ignorado por todos los navegadores).URL, para indicar la nueva URL que se debe mostrar en la barra de direcciones. Gracias a este argumento es posible controlar mejor el funcionamiento del botón de recargar.
Volviendo a un estado anterior
El método onPopState nos permite realizar la operación inversa a pushState , es decir, nos da la opción de controlar lo que sucede cuando el usuario vuelve a una entrada del historial.
Este método en realidad actúa como el callback de un evento que es disparado cada vez que el visitante navega por la página empleando el historial dentro de la misma. Dentro de este evento, que es recibido como argumento dentro de la función callback, podremos acceder al estado que fue guardado anteriormente mediante el método pushState :
Modificando la URL
Una vez que comenzamos a trastear con la API History lo más probable es que comencemos a actualizar la URL gracias al tercer argumento del método pushState del objeto history .
Suponed por ejemplo que estamos desarrollando una SPA donde la página de inicio es una lista de artículos y pulsando sobre cualquiera de ellos se va al detalle del elemento pulsado. El código Javascript asociado a este comportamiento será similar al siguiente:
Este código a primera vista puede dar la impresión de que funciona perfectamente. Sin embargo presenta el siguiente problema: si el usuario recarga la página tras haber pulsado sobre un artículo obtendrá un 404. Esto es debido a que en ningún sitio estamos definiendo la ruta article/{id} por lo que será necesario:
- Bien definir la ruta en el servidor para que al acceder a una URL del tipo
article/{id}se cargue el cuerpo de un artículo. - Bien controlar desde Javascript la ruta a la que se ha accedido para cargar el contenido correcto.
Cualquiera de estos dos métodos puede ser una solución valida por lo que queda a vuestro criterio decidir cual de ellos implementar. Pero recordad siempre este tipo de casuísticas de cara a evitar errores mientras los usuarios navegan por la página.
Conclusiones
Como habéis podido ver, la API History del navegador nos otorga gran flexibilidad a la hora de controlar el flujo de navegación a través de una SPA y conseguir que éste sea coherente cuando el visitante accede y navega por nuestra página. Sin embargo, y como decía Tío Ben: “Un gran poder conlleva una gran responsabilidad” por lo que revisad situaciones como la que os comentaba anteriormente para evitar fallos y comportamientos extraños.
¿Quieres recibir más artículos como este?
Si te ha gustado este artículo te animo a que te suscribas a la newsletter que envío cada domingo con publicaciones similares a esta y más contenido recomendado: 👇👇👇
