HTML5 PushState
0 j'aime2,097 vues
Le document traite de l'utilisation de l'API HTML5 History et de la méthode pushState dans le contexte des applications web. Il souligne les problèmes causés par l'utilisation généralisée d'AJAX sur la navigation et présente des solutions telles que l'intégration de polyfills comme jQuery-Pjax. La conclusion met en avant la compatibilité croissante avec les navigateurs modernes et l'amélioration de l'expérience utilisateur.
![History API
interface History {
readonly attribute long length;
readonly attribute any state;
void go([delta]);
void back();
void forward();
void pushState(data, title [, url ]);
void replaceState (data, title [, url ]);
};](https://image.slidesharecdn.com/parisrb-pushstate-120412044050-phpapp01/85/HTML5-PushState-9-320.jpg)
![jquery-pjax
Simple !
Ra jouter «data-pjax-container» + une classe sur les liens
Système de fallback
Fait une requête AJAX et ensuite push
Filtre la la balise <title>
Filtre le conteneur
Envoi un argument «_pjax»
render :layout => params[:pjax].blank?](https://image.slidesharecdn.com/parisrb-pushstate-120412044050-phpapp01/85/HTML5-PushState-16-320.jpg)
HTML5 PushState
- 2. Oocto.com
- 3. Constat
- 4. Hier Pages WEB Stateful L’URL était lié à l’état La navigation changeait l’état Full compatible
- 5. Aujourd’hui Utilisation massive de de Ajax Ajax casse les états Fragment Stateless URL ne marque pas l’état Navigation ne fonctionne plus
- 6. Aujourd’hui Solution: Hack par l’utilisation de Hashbang : #! https://twitter.com/#!/florian_elam Problèmes N’est pas envoyé dans l’HTTP request Comptabilité JS (Moteurs de recherche...)
- 7. Solution
- 8. Demain HTML 5 History API !
- 9. History API interface History { readonly attribute long length; readonly attribute any state; void go([delta]); void back(); void forward(); void pushState(data, title [, url ]); void replaceState (data, title [, url ]); };
- 10. PushState 2 méthodes pushState replaceState 1 événement onpopstate
- 11. Compatibilité IE Firefox Chrome Safari Opera iOS Android 2.1 6 3.6 3.2 2.2 7 9 4.0 2.3 8 10 17 5 4.2 3 9 11 18 5.1 11.6 5 4 10 12 19 5.2 12.0 13 20
- 12. Librairies/Polyfill jQuery Address (Hashtag + pushState) History.js (Hashtag + pushState) pjax (Full pushState + Fallback) Un polyfill est un morceau de code (ou plugin) qui fournit la technologie qui aurait du être implémentée par le navigateur de façon native.
- 13. Exemples d’implémentation Github Pour le TreeView (Navigation dans les sources) Facebook NewsFeed, Pages profils, etc... Flickr Navigation dans les photos Oocto Navigation dans les onglets des projets...
- 14. Demo
- 15. Et Rails dans tout ça ? Intégration facile (As usual...) jquery-pjax rack-pjax
- 16. jquery-pjax Simple ! Ra jouter «data-pjax-container» + une classe sur les liens Système de fallback Fait une requête AJAX et ensuite push Filtre la la balise <title> Filtre le conteneur Envoi un argument «_pjax» render :layout => params[:pjax].blank?
- 17. rack-pjax Middleware de 40 lignes Seulement le titre et le conteneur sont envoyés au client.
- 18. Conclusion Rapide à mettre en place 60% des navigateurs compatibles Implémentation transparente Au lieu d’appauvrir l’expérience pour tous on l’améliore pour certains...
- 20. Merci !