Bon tutoriel pour l'utilisation de l'API HTML5 History (Pushstate ?)

Question

Je cherche à utiliser l'API HTML5 History pour résoudre les problèmes de liens profonds avec le contenu chargé par AJAX, mais j'ai du mal à décoller. Quelqu'un connaît-il de bonnes ressources ?

Je veux l'utiliser car il semble que ce soit un excellent moyen de permettre à ceux qui reçoivent les liens de ne pas avoir activé JS. De nombreuses solutions échouent lorsque quelqu'un avec JS envoie un lien à quelqu'un sans JS.

Mes premières recherches semblent pointer vers une API d'histoire dans JS, et la méthode pushState.

http://html5demos.com/history

Answer 1

Pour un excellent tutoriel, la page du Mozilla Developer Network consacrée à cette fonctionnalité est tout ce dont vous avez besoin : https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Malheureusement, l'API HTML5 History est mise en œuvre différemment dans tous les navigateurs HTML5 (ce qui la rend incohérente et boguée) et ne dispose d'aucune solution de repli pour les navigateurs HTML4. Heureusement, Histoire.js assure la compatibilité croisée pour les navigateurs HTML5 (en veillant à ce que tous les navigateurs HTML5 fonctionnent comme prévu) et fournit facultativement un retour de hachage pour les navigateurs HTML4 (y compris le maintien de la prise en charge des données, des titres et des fonctionnalités pushState et replaceState).

Vous pouvez en savoir plus sur History.js ici : https://github.com/browserstate/history.js

Pour un article sur les Hashbangs VS Hashes VS HTML5 History API, voir ici : https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling

Answer 2

J'ai beaucoup profité de "Dive into HTML 5". Les explications et les démonstrations sont plus simples et plus précises. Chapitre sur l'histoire - http://diveintohtml5.info/history.html et démo d'histoire - http://diveintohtml5.info/examples/history/fer.html

Answer 3

Gardez à l'esprit que, lors de l'utilisation de HTML5 pushstate, si un utilisateur copie ou met en signet un lien profond et le visite à nouveau, il s'agira d'un hit direct du serveur qui donnera 404. Vous devez donc vous y préparer et même une bibliothèque js pushstate ne vous aidera pas. La solution la plus simple est d'ajouter une règle de réécriture à votre serveur Nginx ou Apache comme suit :

Apache (dans votre serveur virtuel si vous en utilisez un) :

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>

Nginx

rewrite ^(.+)$ /index.html last;

Answer 4

Vous pouvez essayer Davis.js Il vous offre un routage dans votre JavaScript en utilisant pushState lorsqu'il est disponible et, sans JavaScript, il permet à votre code côté serveur de traiter les demandes.

Answer 5

Voici un excellent screen-cast sur le sujet par Ryan Bates de railscasts. À la fin, il désactive simplement la fonctionnalité ajax si la méthode history.pushState n'est pas disponible :

http://railscasts.com/episodes/246-ajax-history-state