Quelles sont les différences entre history.pushState et location.hash?

https://stackoverflow.com/questions/9340121

27-10-2019
|

Question

Je suis en train de mettre à jour l'URL en utilisant soit

window.location.hash ou
history.pushState.

Quelles sont les différences / avantages de chacun?

La solution

location.hash a un meilleur support que le history.pushState méthode.
L'avantage de la méthode est pushState que vous pouvez lier un état à l'entrée de l'histoire.
Si vous n'avez pas besoin de cet objet d'état, je vous recommande d'utiliser la propriété location.hash, d'avoir une meilleure compatibilité avec les anciens navigateurs.

location.hash = 'new-hash';
console.log(history.state); // null or undefined

history.pushState({extraData: "some state info"}, '', 'new-hash'); //<---
console.log(history.state); // [object Object] = {"extraData": "some state info"}

Autres conseils

pushState est l'avenir. Il vaut mieux parce que:

Il semble plus propre.
Sur répétitivité d'un lien profond que vous pouvez réellement la surface réelle des données de Serverside choses de soutien comme SEO et Facebook Open Graph (à la fois envoyer des araignées pour gratter le code html de votre page).
Les serveurs n'ont pas accès aux données des étiquettes de hachage de sorte que vous ne voyez pas dans vos journaux de serveur il aide un peu avec l'analyse.
Il aide les problèmes de balise de hachage de correctif. Par exemple, j'ai eu une réécriture Nginx aux utilisateurs de redirection visiter mon application à la même https URL. Il fonctionne dans tous les navigateurs Safari, mais qui vous redirigera juste le domaine sans le hachage (si ennuyeux)!
Vous pouvez effectivement utiliser la balise de hachage pour ce qui est était destiné, aux liens profonds sections de pages.
Vous pouvez à l'aide de requêtes fallback back-end HTTP réel pour navigateur qui ne supportent pas l'état de poussée ou vous pouvez revient à utiliser balise de hachage. Les deux nécessitent la mise en œuvre supplémentaire, mais sont facilement réalisables avec un peu de travail.

Voir ce discours de la designer Github pour plus: http://warpspire.com/talks/responsive/

history.pushState est mieux que location.hash. mais il est une caractéristique de HTML5. il faut donc toujours préférable d'avoir une méthode de repli comme ci-dessous.

if (typeof(window.history.pushState) == 'function') {
    window.history.pushState(null, path, path);
} else {
    window.location.hash = '#!' + path;
}

Je suis d'accord avec les autres réponses, mais voici quelques arguments en faveur de location.hash:

il fonctionne dans tous les navigateurs, y compris Internet Exploder ^TM
history.pushState est une norme en développement, et l'API peut changer à l'avenir
si les utilisateurs ouvrent un lien dans une nouvelle fenêtre / onglet, un hachage URL fait en sorte qu'il n'y a pas de demande serveur nécessaire pour charger la page (si les en-têtes de mise en cache corrects sont définis)
La configuration du serveur est facile, car tout le serveur voit jamais est l'URL sans partie de hachage

edit: j'ai oublié un

avec hashtags, vous pouvez utiliser les liens réels (a href). Donc, vous ne devez pas configurer des écouteurs de clic, ce qui améliore les performances et réduit la taille du code.

Les avantages / inconvénients de window.location.hash vs HTML5 history.pushstate sont en grande partie déterminée par la façon dont vous voulez exactement votre page à se dégrader.

Ici, vous pourriez être intéressé par la dégradation gracieuse dans deux scénarios différents:

Le premier étant un client qui ne supporte pas Javascript, ou un robot / robot d'exploration qui visitent votre site. Ceci est particulièrement important du point de vue SEO. Si votre page web / web-application utilise hachage urls alors le contenu qui est disponible par le biais de ces liens ne sont pas disponibles à ces utilisateurs finaux. Ceci est définitivement un problème si vous faites des sections de contenu disponible uniquement via hachage urls sans solutions de repli. Cependant, il est certainement pas un problème si vous utilisez des liens de hachage-tag pour modifier l'état d'application qui tout simplement ne conserve pas de sens que si les pages se dégrade.

À titre d'exemple, considérons un scénario dans lequel vous avez une page avec trois sections de texte disponible en trois onglets dans une mise en page à onglets-widget. Maintenant, il y a deux scénarios possibles: Dans le premier, vous chargerait tout le contenu au cours de la charge de la page - et le widget à onglets simplement servir à cacher d'autres sections et montrer une section particulière. Donc, si vous utilisez hachage urls dans les liens que vous utilisez pour construire les pouces onglet, vous les utilisez que pour changer l'état d'application côté client. Lorsque javascript est désactivé / n'est pas disponible, il suffit de le javascript utilisé pour construire la mise en page d'onglets ne fonctionne pas, et tout le contenu est immédiatement disponible - une solution de repli gracieuse raisonnable. Les différents états d'application n'existent pas seulement dans ce cas, et si le hachage urls se dégradent de nouveau juste pointant vers des ancres en html - le but recherché. Au lieu de hachage urls si vous deviez utiliser html5 pushState dans ce cas, ce serait une mauvaise idée. La raison, si un utilisateur peut mettre en signet le lien vers un onglet particulier. Parce que votre serveur devrait prendre cette URL et présenter à l'utilisateur l'état du côté client qu'il attend. Ce n'est pas bon pour une architecture mince serveur sur lequel le côté client doit prendre soin de sa propre gestion de l'État. Vous pouvez ignorer cet aspect ofcourse côté serveur et laissez le client vérifier le droit d'URL au début à la page de chargement, puis passer à l'état d'application approprié. Mais il est encore pas une bonne idée parce que votre système de routage côté serveur est préoccupé par la surcharge de fragments d'URL supplémentaires qu'elle devrait ignorer, alors que cela ne devrait pas être pris la peine sur ce fragment du tout d'un point de vue esthétique. Cette mappe exactement à l'exigence pour laquelle hachage urls ont été conçus et leur utilisation est fortement recommandé. Si, au contraire dans les trois sections, le texte est chargé dynamiquement lorsqu'un pouce onglet particulier est cliqué, puis à l'aide de hachage urls n'est pas une bonne idée. La raison étant que l'utilisateur aura tout simplement pas moyen d'accéder au contenu lié si javascript est pas disponible. Ceci est particulièrement mauvais pour le référencement. Dans ce scénario, si vous gérez urls (qui dans le scénario normale soit « détourné » et « ajaxified ») sur le côté serveur pour rendre le contenu disponible en général, il est excellent à la fois du point de vue de l'expérience de l'utilisateur final ainsi que le référencement.

Le deuxième scénario est un client qui a un navigateur obsolète qui ne supporte pas html5 pushstates. Bien que les points ci-dessus tiennent encore, en plus, je dirais aussi que de forcer les utilisateurs sans pushState avec le même degré de dégradation sans javascript ne se justifie pas. Beaucoup d'utilisateurs finaux aura simplement aucune idée de pourquoi ils reçoivent une version dégradée.

Je vous recommande de ne pas étiquette avec la motivation dogmatique d'utiliser la dernière technologie toujours, et décider de la meilleure option pour votre scénario d'utilisation.

Ceci est une question assez ancienne (5 ans + au moment de cette réponse), mais beaucoup de commentaires sur les réponses existantes demandent une mise à jour en fonction de l'état « actuel » des choses.

Voici l'affaire:

HTML5 pushState est pris en charge sur tous les principaux navigateurs. Si vous soutenez les navigateurs plus anciens aussi, history.js fournit un grand polyfill qui permet d'utiliser pushState en mode natif et l'ont facilement tomber de nouveau aux URL héritées pour les anciens navigateurs. Maintenant que cependant, pushState est nativement prise en charge ne signifie pas qu'il est définitivement le chemin à parcourir.

Il y a un point très important qui n'a pas été soulevée dans l'une des réponses plus anciennes et qui est que les URL de hachage et les URL pushState ne sont pas seulement différents dans la façon dont ils apparaissent, mais ils sont en fait différents dans la façon dont ils travaillent, aussi . Cette différence fondamentale entre les deux pourrait vous amener à choisir l'un sur l'autre.

pushState est plus joli et plus propre et peut être utilisé pour la navigation complètement faux sur votre site / dans votre application. Par exemple, GitHub utilise pour remplacer invisiblement toute navigation. Lorsque vous cliquez sur un lien sur leur site, javascript est utilisé pour intercepter ce clic et le transformer en une demande d'AJAX qui met à jour le contenu de la page sans charger une nouvelle page, alors que l'URL change dans la barre d'adresse pour correspondre au contenu qui a été tiré par les cheveux. C'est ce que pushState a été conçu pour être utilisé pour .

Dans le cas de GitHub, http: // monsite / page1 et http: // monsite / page2 sont les URL valides. Ils sont des liens « réels » avec un contenu « réel », et la visite d'abord l'une des pages passe par l'approche MVC traditionnelle. GitHub utilise pushState pour la navigation dans les navigateurs modernes, mais ne nécessite pas - à savoir pushState est utilisé comme « add caractéristique » à (à leur avis) conduisent à une meilleure expérience utilisateur en matière de navigation. Lorsque vous copiez le lien dans la barre d'adresse du navigateur, vous copiez un lien qui a été créé via javascript et pushState, mais un lien qui est pourtant réelle et valide.

Toutefois, si vous commencez à partir de grattage et de créer une application unique page et n'utilisez pas un framework MVC, les chances sont que vous réellement avez seulement une seule page, surtout si vous n'utilisez pas un backend dynamique (ie contenu est tout récupéré via javascript, jamais généré par un serveur). Dans ce cas, si vous utilisez pushState sur urls de hachage, vous devez gérer le cas que l'URL dans le navigateur n'est pas l'URL réelle. Je vais illustrer.

L'utilisateur charge votre application d'une seule page: http: // monsite / mainpage

A ce point, la barre de navigation contient le vrai lien vers votre application, et l'utilisateur vers la même vue qu'ils voient actuellement: la page principale. Maintenant, ils cliquent sur un lien qui les mènera à une « page » montrant les détails de certaines activités. À ce stade, vous souhaitez mettre à jour la barre d'adresse pour indiquer le changement d'état. Vous utilisez une URL de hachage et votre apparence de la barre d'emplacement comme http: // monsite / mainpage # graphiques / 1 ou vous utilisez pushState et bidouiller pour devenir http: // monsite / mainpage / graphiques / 1

Si vous avez utilisé pushState, qui n'est pas un lien réel . La navigation via fonctionnera grand et l'utilisateur des boutons arrière / avant du navigateur passera de la page principale à la page de détail dans le bar de l'emplacement et dans l'application (en supposant que vous gérez le changement d'état correctement), mais si les signets de l'utilisateur ce lien ou copie et colle le lien pour partager, voodoo côté serveur supplémentaire sera nécessaire.

Vous devrez rediriger les requêtes vers / mainpage / graphiques / 1 à mainpage / et ensuite utiliser JS pour résoudre l'URL et mener ee but opération de changement d'état. Une redirection du serveur est absolument nécessaire. Vous ne pouvez pas héberger cette page sur AWS ou sur votre disque local sans serveur http scriptable.

Maintenant, si vous avez utilisé urls de hachage, votre URL que l'utilisateur aurait vu et interagi avec aurait été http: // monsite / mainpage # / graphiques / 1 et qui est valide, réelle url . Browsers comprendre qu'il ya une seule page, et si l'utilisateur copie et coller le lien ou les signets, vous avez juste à gérer l'état de hachage en javascript et ne pas besoin de magie côté serveur pour faire fonctionner les choses.

Ce que personne ne semble mentionner est que pushState et des liens de hachage ne sont pas mutuellement exclusives . pushState est juste une API pour manipuler l'emplacement du navigateur qui est visible pour l'utilisateur et mettre en œuvre fiable de dos / navigation vers l'avant dans les navigateurs modernes. Il ne dit rien sur ce que votre système d'URL devrait ressembler.

En 2017, Google et à peu près tous les bot de JS-capables de comprendre les URL de hachage et les traversent très bien. Google veut que vous utilisez le #! abomination pour le référencement fins de maximisation, mais même si vous ne le faites pas, votre site sera navigable très bien.

La bonne réponse est d'utiliser ce qui vous convient le mieux. Si vous avez de réelles URL et que vous voulez navigation faux entre eux, utilisez pushState et continuer (éventuellement avec un polyfill pour les anciens navigateurs). Mais si vous avez une application d'une seule page, ne faites pas semblant de ne pas (sauf si vous avez une très bonne raison). Utilisez des URL de hachage pour rendre votre vie plus facile et ne pas introduire des problèmes inutiles puis utilisez pushState pour manipuler les URL de hachage pour profiter d'un meilleur retour / support avant .

À l'heure actuelle, pushState est pris en charge par tous les navigateurs modernes. Par conséquent pushState est meilleur que location.hash, mais il est une caractéristique de HTML5.

Alors, location.hash n'est pas mort, en fait, il sera autour pendant longtemps, très longtemps.

Une bonne façon d'utiliser est avec un lib supports pushState, mais aussi grâce à l'utilisation se dégrade location.hash.
Exemple - https://github.com/browserstate/history.js

De plus location.hash sera toujours utile pour sauter aux ancres nommées. pushState sera d'une grande aide dans la création d'applications web. Je suis impatient de l'utiliser.

Personnellement, je préfère pushState car il rend plus agréable à la recherche URL et je pense qu'il est important pour l'expérience utilisateur.

Vous pouvez utiliser history.pushState avec un hachage en utilisant history.js polyfill si vous voulez d'utiliser pushState, mais ne veulent pas avoir des problèmes avec l'aide du navigateur plus.

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow