Utilicemos PushState()

Querido  pushState( )

Para conseguir la mejor experiencia de navegación posible uno de los recursos que utilizamos es la precarga o caché de diferentes secciones de nuestras web. Con esto conseguimos que la transición entre dichas secciones no conlleve una recarga en el navegador, sino que aparezca y oculte de forma inmediata.
De igual forma, utilizamos AJAX allá donde lo consideramos necesario para reducir en lo máximo posible los tiempos de espera del usuario.

Todo esto es muy bonito, y se lleva utilizando desde hace bastantes años, son técnicas básicas que cualquier desarrollador web habrá utilizado en infinidad de ocasiones pero conlleva un problema inherente: nuestros contenidos cambian pero nuestra url en la barra del navegador permanece inalterada.

¿Cuál es el problema entonces? Pues sencillamente que esos contenidos dinámicos serán inaccesibles desde una url determinada, de tal forma que para llegar a ellos tendremos que ejecutar la lógica necesaria en nuestra aplicación ya sea un botón, enlace o cualquier forma de evento que se nos haya ocurrido siendo, por tanto, imposible compartir directamente esa sección que tanto nos interesa, o incluso siendo invisible para los motores de indexación de moda (aka Google). Esto rompe con la filosofía de la web, pues con una misma URL tendremos diferentes contenidos, según las acciones que llevemos a cabo. Debemos intentar reducir al mínimo este comportamiento.

Afortunadamente, y para ello es este post, tenemos una solución bastante elegante y poco intrusiva: El método pushState().
PushState() admite 3 parámetros, el primero es un objeto JS que podemos asociar en el historial con los datos que nos interesen, el segundo es el título que queremos poner en nuestra página (de momento no lo acepta casi ningún navegador, pero siempre podemos utilizar document.title), y el tercero sería la propia URL que queremos que aparezca en nuestro navegador. Con la URL bastaría si no necesitamos asociar datos a cada paso en el historial.

De esta forma, asociando pushState a nuestra carga de datos AJAX, o cualquier cambio dinámico de contenido, podemos establecer una URL diferente para cada caso. Obviamente, debemos de tratar esas url y mostrar al usuario el contenido dinámico apropiado en caso de que acceda directamente desde la URL que hemos generado.

Para muestra un botón, podéis ver un ejemplo en nuestra web comercial de TwinPush, en la sección características. Podemos cambiar entre las diferentes ‘features‘ sin carga de datos entre ellas, sin embargo, la URL si que está cambiando por si necesitamos compartir una característica determinada.

Podremos acompañar al uso de pushState con el evento onpopState. Este evento detecta un cambio en nuestro historial (por ejemplo al presionar el botón ‘Back’ en nuestro navegador). Con este evento, además, obtendremos una copia del objeto que utilizamos en el pushState (si es que se lo llegamos a indicar). Este evento es muy útil para cuando queremos navegar hacia atrás o adelante en nuestro historial generado por pushStates.

Con estas herramientas ya no tenemos excusa para que nuestro contenido dinámico no genere sus propias URL, y de esta forma mejorar la accesibilidad de nuestra web.