Dans la foulée des avancées que le nouveau standard HTML5 a apportées, un ajout intéressant a été incorporé à l‘API javascript permettant d’accéder à l’historique du navigateur.
Cet ajout est nommé pushstate. Pushstate permet de dynamiser la navigation de l’historique d’un navigateur sans avoir à rafraichir de la page.
Pushstate, c’est quoi?
Pushstate permet de modifier l’URL d’une page dans le navigateur sans générer un rafraichissementde page web. Le principal avantage de ce mécanisme est qu’il est maintenant possible d’utiliser des URL « Belles » pour modifier l’état de navigation d’une application web en AJAX, par exemple. Par le fait même, l’utilisation de l’appel à pushstate va génère un ajout à l’historique de navigation de votre navigateur.
L’ennemi : Le Hashbang
Depuis la venue des applications avec une navigation 100 % côté client en AJAX, l’état de la navigation est défini avec le hash dans l’URL. Dans le jargon du web, cet élément est aussi appelé le Fragment Identifier.
Le hash est la partie suivant le # dans l’URL. Par exemple, dans l’URL https://mail.google.com/mail/u/0/?shva=1#inbox, #inbox est le Fragment Identifier.
Cette technique exploite le concept que lorsqu’on modifie le hash de l’URL, il est possible de modifier l’historique de navigation de l’application web que l’on utilise. Le meilleur exemple de cette navigation est probablement GMail où il est possible de passer d’une section à l’autre sans rafraichissent de page et avec un historique de navigation modifiée.
Le principal désavantage de cette technique est que le hash n’est pas communiqué au serveur. Tout se passe au niveau du client, c’est-à-dire le navigateur.
Puisque le hash est utilisé côté client, il s’avère que cela n’est pas vraiment compatible avec les moteurs de recherche. Ceux-ci, dans la majorité des cas, indexent que du texte brut sans transformations par le client en Javascript.
Toutefois, un mécanisme a été mis en place par Google afin de faire en sorte que les applications web AJAX soient indexables. Toutefois, l’implémentation de celui-ci n’est pas garantie par tous les services en ligne où vous pouvez partager un lien.
Ce mécanisme fait en sorte qu’une URL comme www.example.com/ajax.html#!key=value soit transformé par www.example.com/ajax.html?_escaped_fragment_=key=value. Ce n’est pas très beau et pas très naturel.
La solution
La documentation du standard HTML5 est assez clair. Les applications AJAX ne doivent pas dépendre d’un mécanisme utilisé initialement pour positionner le client dans un document donné.
Une application web AJAX doit garder les deux propriétés suivantes :
- Utiliser des URLs lisibles et simple permettant de naviguer dans l’application.
- Être indexée par google.
Un bon exemple qui pourrait tirer profit de cette technique est le site Twitter qui est connu pour son utilisation abusive du hashbang pour sa navigation.
Lorsqu’on visite la page de mon profil sur Twitter, l’URL https://twitter.com/pparadis est automatiquement traduite à https://twitter.com/#!/pparadis.
Le concept proposé ici par HTML5 est d’éliminer complètement la redirection vers https://twitter.com/#!/pparadis et d’utiliser des URL normalement constituées pour naviguer dans l’application.
Dans le concret?
L’implémentation du pushstate dans votre page web nécessite deux éléments, au minimum.
- Implémenter l’évènement window.onpopstate = function(event) { return; };
- Générer un l’évènement comme : history.pushState(null, null, link.href);
En termes clairs, l’évènement onpopstate va être généré à chaque fois que vous appuierez sur le bouton précédent et/ou suivant de votre navigateur. La même chose s’applique si vous faites un history.back(); en javascript.
Le facteur clé permettant une plus grande acceptation du pushstate dans les solutions AJAX est le support dans les navigateurs web. Les navigateurs Chrome et Firefox sont déjà bien en avant avec le support pour pushstate. Toutefois, le support de celui-ci avec Internet Explorer est prévu seulement pour la version 10.
Pour arriver à implémenter la réécriture de l’historique de navigation à travers une majorité de navigateurs, l’utilisation de la librairie history.js. Cette librairie expose un API unifié et testé à travers une multitude de navigateurs de différentes époques. history.js suggère même que la librairie fonctionne aussi sur Internet Explorer 6. C’est pour dire!
En fin de compte
L’utilisation du pushstate va devenir un incontournable avec les applications AJAX sur le web dans les prochains mois et les années qui vont suivre.
L’implémentation la plus utilisée de pushstate est probablement celle réalisée par le très populaire site d’hébergement de code en ligne Github. Depuis décembre 2010, le site utilise pushstate dans la navigation des repository. Le tout se fait en javascript et CSS3 dans une fluidité déconcertante.
Alors, pourquoi pas votre site? Et pourquoi pas maintenant?
Source(s)
French Coding 