Bon tutoriel sur l'utilisation de l'API HTML5 History (Pushstate?) [Fermé]

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

Je veux l'utiliser car cela semble être un excellent moyen de permettre à ceux qui sont envoyés que les liens ne soient pas activés par JS. De nombreuses solutions échouent lorsque quelqu'un avec JS envoie un lien à quelqu'un sans.

Ma recherche initiale semble pointer vers une API History dans JS et la méthode pushState.

http://html5demos.com/history

Pour un excellent didacticiel, la page Mozilla Developer Network sur cette fonctionnalité est tout ce dont vous aurez besoin: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Malheureusement, l'API HTML5 History est implémentée différemment dans tous les navigateurs HTML5 (ce qui la rend incohérente et boguée) et n'a pas de solution de secours pour les navigateurs HTML4. Heureusement, History.js offre une compatibilité croisée pour les navigateurs HTML5 (garantissant que tous les navigateurs HTML5 fonctionnent comme prévu) et fournit éventuellement un hachage de secours pour les navigateurs HTML4 (y compris la prise en charge maintenue des données, des titres, 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 l'API Hashbangs VS Hashes VS HTML5 History, voir ici: https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling

J'ai beaucoup profité de «Dive into HTML 5». L'explication et la démo sont plus faciles et pertinentes. Chapitre d'histoire - http://diveintohtml5.info/history.html et démo d'histoire - http://diveintohtml5.info/examples/history/fer.html

Gardez à l'esprit lorsque vous utilisez HTML5 pushstate si un utilisateur copie ou marque un lien profond et le visite à nouveau, alors ce sera un coup de serveur direct qui sera 404 donc vous devez être prêt pour cela et même une bibliothèque pushstate js n'aidera pas tu. La solution la plus simple consiste à ajouter une règle de réécriture à votre serveur Nginx ou Apache comme ceci:

Apache (dans votre vhost 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;

La spécification de l'historique HTML5 est bizarre.

history.pushState()ne envoie pas d' popstateévénement ni ne charge une nouvelle page par lui-même. Il s'agissait uniquement de pousser l'État dans l'histoire. Il s'agit d'une fonction «d'annulation» pour les applications d'une seule page. Vous devez distribuer manuellement un popstateévénement ou utiliser history.go()pour naviguer vers le nouvel état. L'idée est qu'un routeur puisse écouter les popstateévénements et faire la navigation à votre place.

Quelques points à noter:

• history.pushState()et history.replaceState()ne pas envoyer d' popstateévénements.
• history.back(), history.forward()et les boutons Précédent et Suivant du navigateur envoient des popstateévénements.
• history.go()et history.go(0)faites un rechargement complet de la page et ne distribuez pas d' popstateévénements.
• history.go(-1)(1 page précédente) et history.go(1)(1 page suivante) envoient des popstateévénements.

Vous pouvez utiliser l'API d'historique comme celle-ci pour pousser un nouvel état ET envoyer un événement popstate.

history.pushState({message:'New State!'}, 'New Title', '/link'); window.dispatchEvent(new PopStateEvent('popstate', { bubbles: false, cancelable: false, state: history.state }));

Ensuite, écoutez les popstateévénements avec un routeur.

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

Voici un grand écran-casting 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

Vous voudrez peut-être jeter un coup d'œil à ce plugin jQuery. Ils ont de nombreux exemples sur leur site. http://www.asual.com/jquery/address/

J'ai écrit une abstraction de routeur très simple au-dessus de History.js, appelée StateRouter.js . C'est dans les tout premiers stades de développement, mais je l'utilise comme solution de routage dans une application d'une page que j'écris. Comme vous, j'ai trouvé History.js très difficile à comprendre, d'autant plus que je suis assez nouveau dans JavaScript, jusqu'à ce que je comprenne que vous avez vraiment besoin (ou devriez avoir) une abstraction de routage par-dessus, car il résout un bas niveau problème.

Cet exemple de code simple doit montrer comment il est utilisé:

var router = new staterouter.Router();
// Configure routes
router
  .route('/', getHome)
  .route('/persons', getPersons)
  .route('/persons/:id', getPerson);
// Perform routing of the current state
router.perform();

Voici un petit violon que j'ai concocté afin de démontrer son utilisation.

si jQuery est disponible, vous pouvez utiliser jQuery BBQ