L'histoire est toujours intéressante, n'est-ce pas? Dans les anciennes versions de HTML, nous avions un contrôle limité sur l'historique du navigateur. Nous pouvions aller et venir en utilisant les méthodes disponibles, mais c'était tout

Avec l'API Historique de HTML5, nous avons plus de contrôle sur l'utilisation de l'historique du navigateur. Par exemple, nous avons un moyen d’ajouter une entrée dans l’historique ou de modifier l’URL dans la barre d’adresse sans actualiser la page..

Pourquoi une API d'historique?

Dans cet article, nous allons apprendre pourquoi l’API d’historique HTML5 a vu le jour. Avant l'existence de cette API, nous utilisions souvent des valeurs de hachage pour modifier le contenu de la page, en particulier pour les applications lourdes d'une seule page, car il n'était pas possible de modifier l'URL sans actualiser la page. En outre, lorsque vous modifiez la valeur de hachage d'une URL, l'historique du navigateur n'est pas modifié.. 

Maintenant, toutefois, ces deux éléments sont disponibles avec l’API de l’historique HTML5 et permettent de développer des applications lourdes en scripts et composées d’une seule page sans avoir à utiliser de valeurs de hachage. Cela nous permet également de construire des applications de manière conviviale pour le référencement. De plus, cette technique nous permet de réduire la bande passante - mais comment? 

Dans cet article, nous allons développer une application d'une seule page avec cette API pour démontrer exactement que. 

Cela signifie que nous chargerons toutes les ressources requises lors du chargement de la première page. À partir de là, l'application ne téléchargera que le contenu requis. En d'autres termes, au lieu de charger toutes les ressources tout le temps, il ne chargera que les ressources requises à partir d'une deuxième demande de contenu.. 

Notez que vous devez effectuer un codage côté serveur pour ne livrer que des ressources partielles au lieu d'un contenu de page entière..

Prise en charge du navigateur

Au moment de la rédaction de cet article, la prise en charge du navigateur pour l’API de l’historique HTML5 est très bonne. Nous pouvons examiner son statut ici. Ce lien vous donne un aperçu des navigateurs pris en charge, mais il est toujours recommandé de détecter le support d'une fonctionnalité particulière avant de l'utiliser.. 

Pour déterminer par programme si votre navigateur prend en charge l'API, consultez la ligne de code suivante:

return !! (window.history && history.pushState);

De plus, je suggérerais de prendre cet article pour détecter le support de diverses fonctionnalités HTML5.

Si vous utilisez Modernizr, vous devriez utiliser le code ci-dessous:

if (Modernizr.history) // API d'historique prise en charge

Si votre navigateur ne prend pas en charge l'historique API, vous pouvez utiliser les polyfills history.js..

Manipulation de l'histoire

HTML5 fournit deux nouvelles méthodes:

1. history.pushState () 
2. history.replaceState ()

Tous deux nous permettent d'ajouter et de mettre à jour l'état de l'historique, respectivement. Les deux fonctionnent de la même manière et attendent le même nombre de paramètres. En plus de ces méthodes, nous avons popstate un événement. Nous verrons plus loin dans cet article comment et quand utiliser cette popstate un événement.

pushState et replaceState les deux attendent le même nombre de paramètres que sous:

1. Etat peut stocker une chaîne JSON et sera disponible pour popstate un événement.
2. Titre est un paramètre ignoré par la majorité des navigateurs, il est donc préférable de le définir sur nul pour aujourd'hui.
   
3. url peut représenter n'importe quelle URL. Il sera mis à jour avec l'adresse du navigateur, et peu importe si cette URL existe ou non. Plus important encore, il ne rechargera pas votre page Web.
   

Les principales différences entre ces méthodes sont que le pushState ajoutera une nouvelle entrée dans la pile d’historique et replaceState remplacera la valeur d'historique actuelle au lieu d'en ajouter une nouvelle. Si vous êtes toujours confus dans ces deux méthodes, démontrons le même cas avec un meilleur exemple.

Supposons que nous avons des piles de deux blocs étiquetés 1 et 2 et que vous avez le bloc étiqueté 3 dans votre main. Maintenant, quand nous effectuons pushState, le bloc 3 sera ajouté à une pile existante pour que la pile ait 3 blocs. 

Supposons maintenant la même pile avec deux blocs et un de plus dans votre main. Quand on joue replaceState, il sortira le bloc 2 de la pile et placera le bloc 3. Le nombre de valeurs d'historique restera le même. pushState, d'autre part, augmente le compte de l'histoire par un. 

L'image ci-dessous montre la même démonstration.

Jusqu'ici, nous avons couvert la pushState et replaceState événements afin de contrôler l'historique du navigateur, mais supposons que nous ayons une variété de faux historiques que nous avons totalisés dans le navigateur. L'utilisateur peut ou non être redirigé vers cette page. Dans ce cas, il y aura un problème lorsque l'utilisateur cliquera sur le bouton de navigation en arrière pour naviguer vers les pages d'historique..

Bien que vous puissiez vous attendre popstate être renvoyé quand le pushState ou replaceState les méthodes sont abordées, mais en réalité, ce n'est pas le cas. Au lieu, popstate se déclenche lorsque vous naviguez dans l’entrée de l’historique de la session, en appuyant sur les boutons Précédent / Suivant ou en utilisant la touche histoire.go ou histoire.back les méthodes.

Dans les navigateurs WebKit, un événement popstate serait déclenché après l'événement onload du document, mais Firefox et IE ne présentent pas ce comportement..

La démonstration

Le HTML

 
 
 
Accueil
 
Sur
 
Contact
 
 
 
 
 
 Cliquez sur Liens ci-dessus pour voir l'historique de l'utilisation de l'API à l'aide de pushState méthode. 
 
 
 
 
Accueil!
 
Lorem Ipsum est tout simplement un texte factice de l'industrie de l'impression et de la composition.
 
 
 
 

Le javascript

Démo 1: API de l'historique HTML5 - pushState

Dans cette démo, vous constaterez que les entrées d'historique sont comptabilisées dans le navigateur et que vous pouvez naviguer à l'aide de ce bouton à l'aide du bouton Précédent / Suivant du navigateur. Voir la démo

Démo 2: API de l'historique HTML5 - replaceState

Dans cette démo, vous constaterez que les entrées d'historique sont en cours de mise à jour dans les navigateurs et que vous ne pouvez pas les parcourir à l'aide du bouton Précédent / Suivant du navigateur. Voir la démo

Conclusion

Cette API a eu un impact important sur le fonctionnement de notre application Web. Il a supprimé la dépendance à l'égard des valeurs de hachage dans les URL afin de faciliter la création d'une application simple, efficace et orientée SEO.. 

C'est une très belle API, n'est-ce pas?