Share
Dans ce didacticiel, nous allons construire un site Web avec des pages de transition parfaitement nettes, sans le rafraîchissement de page agressif habituel. Parcourez les pages de la démo pour voir ce que je veux dire.
Pour atteindre cet effet, nous allons utiliser l'historique API Web. En un mot, cette API est utilisée pour modifier l'historique du navigateur. Cela nous permet de charger une nouvelle URL, de changer le titre de la page, puis de l'enregistrer en même temps comme une nouvelle visite dans le navigateur sans avoir à charger la page..
Cela semble déroutant, mais cela ouvre un certain nombre de possibilités, telles que la capacité de traiter des transitions de page plus douces et de donner une impression de rapidité qui améliore l'expérience de l'utilisateur. Vous avez probablement déjà vu l'API d'historique Web en action sur un certain nombre de sites Web et d'applications Web, tels que Trello, Quartz et Privacy..
Le site Web assez abstrait (et plutôt agréable) de QuartzAvant d'aller plus loin, examinons d'abord une API particulière que nous allons déployer sur le site Web..
Pour accéder à l’API d’historique Web, nous écrivons d’abord fenêtre.histoire suivez ensuite ceci avec l'une des API; une méthode ou une propriété. Dans ce tutoriel, nous allons nous concentrer sur les pushState () méthode, donc:
window.history.pushState (état, titre, url);
Comme vous pouvez le voir dans l'extrait ci-dessus, le pushState () méthode prend trois paramètres.
Accentsconagua
Etat, devrait être un objet contenant des données arbitraires. Ces données seront ensuite accessibles via window.history.state. Dans une application du monde réel, nous transmettons des données telles qu'un ID de page, une URL ou des entrées sérialisées dérivées d'un formulaire.. Titre eturl. Ces deux changent l'URL et le titre du document dans le navigateur, et les enregistrent comme une nouvelle entrée dans l'historique du navigateur.. Disséquons l’exemple suivant pour mieux comprendre comment le pushState () Méthode fonctionne.
(function ($) $ ("a") .on ("clic", fonction (événement) event.preventDefault (); window.history.pushState (ID: 9, "About - Acme", "about / "););) (jQuery);Dans le code ci-dessus, un lien joint au Cliquez sur événement déploie alors le pushState () méthode. Lorsque nous cliquons sur le lien, nous nous attendons à ce que le code modifie le titre du document et l’URL:
Du haut jusqu'en bas: Chrome, Firefox, Opera.Et ça le fait; la capture d’écran montre que l’URL a été remplacé par «à propos de /» comme défini dans les pushState () méthode. Et depuis le pushState () méthode crée un nouvel enregistrement dans l'historique du navigateur, nous pouvons revenir à la page précédente via le navigateur Retour bouton.
Cependant, tous les navigateurs de cet exemple ignorent actuellement la Titre paramètre. Vous pouvez voir sur la capture d'écran que le document ne change pas en À propos - Acme comme spécifié. De plus, en appelant le pushState () méthode ne déclenchera pas également la popstate un événement; un événement qui se déroule à chaque changement d’histoire, ce dont nous avons besoin! Il existe quelques divergences sur la façon dont les navigateurs traitent cet événement, comme indiqué dans MDN:
“Les navigateurs ont tendance à gérer lespopstateévénement différemment au chargement de la page. Chrome (avant la v34) et Safari émettent toujours unepopstateévénement sur le chargement de la page, mais pas Firefox ».
Nous aurons besoin d’une bibliothèque comme solution de secours pour que les API Web History fonctionnent de manière cohérente sur le navigateur, sans aucune difficulté..
Depuis le pushState () méthode ne fonctionne pas à son plein potentiel, dans ce tutoriel, nous allons exploiter History.js. Comme son nom l'indique, cette bibliothèque JavaScript est une polyfill, répliquer les API d'historique natives qui fonctionnent sur différents navigateurs. Il expose également un ensemble de méthodes similaires aux API natives, avec toutefois quelques différences..
Comme mentionné précédemment, l’API native du navigateur est appelée via le l'histoire l’objet window avec la lettre minuscule «h», tandis que l’API History.js est accessible via L'histoire avec le «H» majuscule. Étant donné l'exemple précédent et en supposant que le fichier history.js soit chargé, nous pouvons réviser le code comme suit (notez à nouveau la lettre majuscule «H»).
window.History.pushState (, titre, url);
J'espère que cette brève explication est facile à comprendre. Sinon, voici d'autres références si vous souhaitez en savoir plus sur l'API d'historique Web..
Dans cette section, nous ne discuterons pas de chaque étape nécessaire pour construire un site Web statique en détail. Notre site Web est simple, comme le montre la capture d'écran suivante:
La page d'accueil du siteVous n'avez pas à créer un site Web qui a exactement la même apparence. vous êtes libre d'ajouter du contenu et de créer autant de pages que nécessaire. Cependant, vous devez tenir compte de certains points particuliers concernant la structure HTML et l’utilisation de identifiant et classe attributs pour certains éléments.
tête. Vous pouvez le charger en tant que dépendance de projet via Bower ou via un CDN tel que CDNJS ou JSDelivr..div avec l'identifiant emballage; lien de page classe que nous allons utiliser pour sélectionner ces menus.Titre attribut que nous allons passer à pushState () pour déterminer le titre du document.En tenant compte de tout cela, notre balisage HTML se présentera comme suit:
Lorsque vous avez terminé la construction de votre site Web statique, nous pouvons passer à la section principale de ce didacticiel..
Avant de commencer à écrire du code, nous devons créer un nouveau fichier contenant notre code JavaScript. nous le nommerons script.js et chargez le fichier dans le document avant la corps balise de fermeture.
Ajoutons notre premier morceau de code pour changer le titre du document et l'URL en cliquant sur le menu de navigation:
// 1. var $ wrap = $ ("#wrap"); // 2. $ wrap.on ("clic", ".page-link", fonction (événement) // 3. événement.preventDefault (); // 4. if (window.location === this.href ) return; // 5. var pageTitle = (this.title)? this.title: this.textContent; pageTitle = (this.getAttribute ("rel") === "home")? pageTitle: pageTitle + " â € ”Acme"; // 6. History.pushState (null, pageTitle, this.href););J'ai divisé le code en plusieurs sections numérotées. Celles-ci vous permettront d’identifier plus facilement le code avec la référence suivante:
#emballage élément au lieu d’attacher l’événement directement sur chaque menu de navigation. Cette pratique s'appelle délégation d'événement. En d'autres termes, notre #emballage L’élément est responsable de l’écoute des événements de clic pour le compte de .lien de page.event.preventDefault () afin que les utilisateurs ne soient pas dirigés vers la page en question.titre de la page variable contient le format du titre, dérivé de l'attribut title du lien ou du texte du lien. Chaque titre de page suit Titre de la page - Acme convention, à l'exception de la page d'accueil. “Acme” est notre nom fictif.titre de la page et l'URL de la page vers History.js pushState () méthode.À ce stade, lorsque nous cliquons sur le menu de navigation, le titre ainsi que l'URL devraient changer en conséquence, comme indiqué ci-dessous:
Le titre de la page et l'URL sont modifiésPourtant, le contenu de la page reste le même! Il n'est pas mis à jour pour correspondre au nouveau titre et à la nouvelle URL.
Nous devons ajouter les lignes de code suivantes pour remplacer le contenu de la page..
// 1. History.Adapter.bind (window, "statechange", function () // 2. var state = Histoire.getState (); // 3. $ .get (state.url, fonction (res) // 4. $ .each ($ (res), fonction (index, elem) if ($ wrap.selector! == "#" + elem.id) return; $ wrap.html ($ (elem) .html ()););););
Encore une fois, le code ici est divisé en plusieurs sections numérotées.
pushState () méthode et exécute la fonction attachée..obtenir() méthode on récupère le contenu de l'URL donnée.identifiant nommé emballage à partir du contenu récupéré, et éventuellement remplacer le contenu de la page en cours avec elle.Une fois ajouté, le contenu devrait maintenant être mis à jour lorsque nous cliquons sur le menu de navigation. Comme mentionné, nous sommes également en mesure d'accéder aux pages visitées via le navigateur Retour et Vers l'avant boutons.
Notre site Web est présentable à ce stade. Cependant, nous aimerions aller plus loin en ajoutant une petite animation pour donner vie à la page et, enfin, notre site Web semble plus attrayant..
Dans cette situation, les animations doivent être simples et nous allons donc tout écrire, au lieu de les charger dans une bibliothèque telle que Animate.css, Motion UI de ZURB ou Effeckt.css. Nous nommerons l'animation slideInUp, comme suit:
@keyframes slideInUp from transform: translate3d (0, 10px, 0); opacité: 0; à transformer: translate3d (0, 0, 0); opacité: 1;
Comme son nom l'indique, l'animation fera glisser le contenu de la page de bas en haut en même temps que l'opacité de l'élément. Appliquez l'animation à l'élément qui enveloppe le contenu principal de la page, comme suit.
.section animation-duration: .38s; animation-fill-mode: les deux; nom-animation: slideInUp;
La transition d'une page à une autre devrait maintenant être plus fluide une fois l'animation appliquée. Ici, vous pouvez vous arrêter et appeler un jour! Notre site Web est terminé et nous sommes prêts à le déployer pour que le monde entier puisse le voir..
Cependant, vous devrez peut-être ajouter quelque chose, en particulier pour ceux qui souhaitent contrôler le nombre de visites et le comportement des visiteurs sur votre site Web..
Nous devons ajouter Google Analytics pour suivre chaque page vue.
Comme nos pages seront chargées de manière asynchrone (à l’exception du initiale page chargée) le suivi du numéro d'affichage de la page doit également être effectué de manière asynchrone.
Pour commencer, assurez-vous que Google Analytics standard a été ajouté au document. tête. Le code ressemble généralement à ceci:
Ensuite, nous devons ajuster notre code JavaScript pour inclure le code de suivi de Google Analytics afin que chaque page chargée de manière asynchrone soit également mesurée en tant que page vue.
Nous avons plusieurs options. Tout d'abord, nous pouvons commencer à compter lorsque l'utilisateur clique sur un lien de navigation, lors du changement du titre et de l'URL de la page ou lorsque le contenu de la page a été entièrement chargé..
Nous allons opter pour le dernier, qui est sans doute le plus authentique, et ce faisant, nous exploitons le jQuery promettre() méthode après avoir changé le contenu de la page, comme suit:
$ wrap.html ($ (elem) .html ()) .promise () .done (function (res) // Assurez-vous que le nouveau contenu est ajouté et que la méthode 'ga ()' est disponible. if (typeof ga === "fonction" && res.length! == 0) ga ('set', page: window.location.pathname, titre: state.title); ga ('send', 'pageview') ;);C'est tout ce que c'est, nous allons maintenant avoir le page vue enregistré dans Google Analytics.
Dans ce didacticiel, nous avons amélioré un site Web statique simple avec une API d'historique Web afin de rendre la transition de page plus fluide, de charger plus rapidement et d'offrir globalement une meilleure expérience à nos utilisateurs. À la fin de ce didacticiel, nous avons également implémenté Google Analytics pour enregistrer les page vue de manière asynchrone. De plus, notre site Web est parfaitement rampant par les robots des moteurs de recherche puisqu'il s'agit, comme mentionné, d'un simple site Web HTML.
Il s’agissait d’un didacticiel, expliquant de nombreuses choses telles que l’animation CSS, jQuery Ajax et jQuery Promise. Voici une poignée de références à explorer pour renforcer ce que vous avez appris.
Enfin, n'oubliez pas de visiter le site de démonstration de ce tutoriel ainsi que le code source dans le référentiel.
