Maîtriser l'API de Navigation : Routage et Gestion de l'Historique pour les Applications Monopages

L'API de Navigation représente une avancée significative dans la manière dont nous gérons le routage et l'historique au sein des Applications Monopages (SPA). Les méthodes traditionnelles reposent souvent sur la manipulation de l'objet `window.location` ou l'utilisation de bibliothèques tierces. Bien que ces approches nous aient bien servis, l'API de Navigation offre une solution plus rationalisée, performante et riche en fonctionnalités, offrant aux développeurs un plus grand contrôle sur l'expérience de navigation de l'utilisateur.

Qu'est-ce que l'API de Navigation ?

L'API de Navigation est une API de navigateur moderne conçue pour simplifier et améliorer la façon dont les SPA gèrent la navigation, le routage et l'historique. Elle introduit un nouvel objet `navigation`, fournissant des méthodes et des événements qui permettent aux développeurs d'intercepter et de contrôler les événements de navigation, de mettre à jour l'URL et de maintenir un historique de navigation cohérent sans rechargement complet de la page. Il en résulte une expérience utilisateur plus rapide, plus fluide et plus réactive.

Avantages de l'utilisation de l'API de Navigation

• Performance améliorée : En éliminant les rechargements complets de page, l'API de Navigation améliore considérablement les performances des SPA. Les transitions entre les différentes vues deviennent plus rapides et plus fluides, conduisant à une expérience utilisateur plus engageante.
• Contrôle accru : L'API offre un contrôle précis sur les événements de navigation, permettant aux développeurs d'intercepter et de modifier le comportement de navigation selon les besoins. Cela inclut la prévention de la navigation, la redirection des utilisateurs et l'exécution de logique personnalisée avant ou après la navigation.
• Gestion de l'historique simplifiée : La gestion de la pile d'historique du navigateur est facilitée avec l'API de Navigation. Les développeurs peuvent ajouter, remplacer et parcourir les entrées de l'historique par programmation, garantissant une expérience de navigation cohérente et prévisible.
• Navigation déclarative : L'API de Navigation encourage une approche plus déclarative du routage, permettant aux développeurs de définir des règles et des comportements de navigation de manière claire et concise. Cela améliore la lisibilité et la maintenabilité du code.
• Intégration avec les frameworks modernes : L'API de Navigation est conçue pour s'intégrer de manière transparente avec les frameworks et bibliothèques JavaScript modernes, tels que React, Angular et Vue.js. Cela permet aux développeurs de tirer parti des fonctionnalités de l'API dans leurs flux de travail de développement existants.

Concepts et fonctionnalités de base

1. L'objet `navigation`

Le cœur de l'API de Navigation est l'objet `navigation`, accessible via l'objet global `window` (c.-à-d. `window.navigation`). Cet objet donne accès à diverses propriétés et méthodes liées à la navigation, notamment :

• `currentEntry` : Renvoie un objet `NavigationHistoryEntry` représentant l'entrée actuelle dans l'historique de navigation.
• `entries()` : Renvoie un tableau d'objets `NavigationHistoryEntry` représentant toutes les entrées de l'historique de navigation.
• `navigate(url, { state, info, replace })` : Navigue vers une nouvelle URL.
• `back()` : Revient à l'entrée précédente de l'historique.
• `forward()` : Avance à l'entrée suivante de l'historique.
• `reload()` : Recharge la page actuelle.
• `addEventListener(event, listener)` : Ajoute un écouteur d'événements pour les événements liés à la navigation.

2. `NavigationHistoryEntry`

L'interface `NavigationHistoryEntry` représente une seule entrée dans l'historique de navigation. Elle fournit des informations sur l'entrée, telles que son URL, son état et son ID unique.

• `url` : L'URL de l'entrée de l'historique.
• `key` : Un identifiant unique pour l'entrée de l'historique.
• `id` : Un autre identifiant unique, particulièrement utile pour suivre le cycle de vie d'un événement de navigation.
• `sameDocument` : Un booléen indiquant si la navigation aboutit à une navigation au sein du même document.
• `getState()` : Renvoie l'état associé à l'entrée de l'historique (défini lors de la navigation).

3. Événements de navigation

L'API de Navigation déclenche plusieurs événements qui permettent aux développeurs de surveiller et de contrôler le comportement de la navigation. Ces événements incluent :

• `navigate` : Déclenché lorsqu'une navigation est initiée (par ex., en cliquant sur un lien, en soumettant un formulaire ou en appelant `navigation.navigate()`). C'est l'événement principal pour intercepter et gérer les requêtes de navigation.
• `navigatesuccess` : Déclenché lorsqu'une navigation se termine avec succès.
• `navigateerror` : Déclenché lorsqu'une navigation échoue (par ex., en raison d'une erreur réseau ou d'une exception non gérée).
• `currentchange` : Déclenché lorsque l'entrée actuelle de l'historique change (par ex., lors d'une navigation avant ou arrière).
• `dispose` : Déclenché lorsqu'un `NavigationHistoryEntry` n'est plus accessible, par exemple lorsqu'il est retiré de l'historique lors d'une opération `replaceState`.

Mettre en œuvre le routage avec l'API de Navigation : Un exemple pratique

Illustrons comment utiliser l'API de Navigation pour implémenter un routage de base dans une SPA simple. Considérons une application avec trois vues : Accueil, À propos et Contact.

Tout d'abord, créez une fonction pour gérer les changements de route :

function handleRouteChange(url) {
  const contentDiv = document.getElementById('content');
  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Accueil
Bienvenue sur la page d\'accueil !
';
      break;
    case '/about':
      contentDiv.innerHTML = '
À propos
Apprenez-en plus sur nous.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Contact
Contactez-nous.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Introuvable
Page non trouvée.
';
  }
}

Ensuite, ajoutez un écouteur d'événements à l'événement `navigate` :

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  event.preventDefault(); // Empêche la navigation par défaut du navigateur

  const promise = new Promise((resolve) => {
      handleRouteChange(url);
      resolve(); // Résout la promesse après la gestion de la route
  });

  event.transition = promise;
});

Ce code intercepte l'événement `navigate`, extrait l'URL de l'objet `event.destination`, empêche la navigation par défaut du navigateur, appelle `handleRouteChange` pour mettre à jour le contenu et définit la promesse `event.transition`. Définir `event.transition` garantit que le navigateur attend que la mise à jour du contenu soit terminée avant de mettre à jour visuellement la page.

Enfin, vous pouvez créer des liens qui déclenchent la navigation :

Accueil | À propos | Contact

Et attachez un écouteur de clic à ces liens :

document.addEventListener('click', (event) => {
  if (event.target.tagName === 'A' && event.target.hasAttribute('data-navigo')) {
    event.preventDefault();
    window.navigation.navigate(event.target.href);
  }
});

Cela met en place un routage de base côté client à l'aide de l'API de Navigation. Désormais, cliquer sur les liens déclenchera un événement de navigation qui mettra à jour le contenu de la div `content` sans un rechargement complet de la page.

Ajouter la gestion d'état

L'API de Navigation vous permet également d'associer un état à chaque entrée de l'historique. Ceci est utile pour préserver des données entre les événements de navigation. Modifions l'exemple précédent pour inclure un objet d'état.

Lors de l'appel à `navigation.navigate()`, vous pouvez passer un objet `state` :

window.navigation.navigate('/about', { state: { pageTitle: 'À Propos de Nous' } });

À l'intérieur de l'écouteur d'événements `navigate`, vous pouvez accéder à l'état en utilisant `event.destination.getState()` :

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  const state = event.destination.getState();
  event.preventDefault();

  const promise = new Promise((resolve) => {
      handleRouteChange(url, state);
      resolve();
  });
  event.transition = promise;

});

function handleRouteChange(url, state = {}) {
  const contentDiv = document.getElementById('content');
  let title = state.pageTitle || 'Mon App'; // Titre par défaut

  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Accueil
Bienvenue sur la page d\'accueil !
';
      title = 'Accueil';
      break;
    case '/about':
      contentDiv.innerHTML = '
À propos
Apprenez-en plus sur nous.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Contact
Contactez-nous.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Introuvable
Page non trouvée.
';
      title = '404 Introuvable';
  }
  document.title = title;
}

Dans cet exemple modifié, la fonction `handleRouteChange` accepte désormais un paramètre `state` et l'utilise pour mettre à jour le titre du document. Si aucun état n'est passé, il utilise par défaut 'Mon App'.

Utiliser `navigation.updateCurrentEntry()`

Parfois, vous pourriez vouloir mettre à jour l'état de l'entrée d'historique actuelle sans déclencher une nouvelle navigation. La méthode `navigation.updateCurrentEntry()` vous permet de le faire. Par exemple, si un utilisateur modifie un paramètre sur la page actuelle, vous pouvez mettre à jour l'état pour refléter ce changement :

function updateUserSetting(setting, value) {
  const currentState = navigation.currentEntry.getState() || {};
  const newState = { ...currentState, [setting]: value };
  navigation.updateCurrentEntry({ state: newState });
  console.log('Paramètre mis à jour :', setting, 'à', value);
}

// Exemple d'utilisation :
updateUserSetting('theme', 'dark');

Cette fonction récupère l'état actuel, y fusionne le paramètre mis à jour, puis met à jour l'entrée d'historique actuelle avec le nouvel état.

Cas d'utilisation avancés et considérations

1. Gérer les soumissions de formulaires

L'API de Navigation peut être utilisée pour gérer les soumissions de formulaires dans les SPA, empêchant les rechargements complets de page et offrant une expérience utilisateur plus transparente. Vous pouvez intercepter l'événement de soumission du formulaire et utiliser `navigation.navigate()` pour mettre à jour l'URL et afficher les résultats sans un rechargement complet de la page.

2. Opérations asynchrones

Lors de la gestion des événements de navigation, vous devrez peut-être effectuer des opérations asynchrones, comme récupérer des données d'une API. La propriété `event.transition` vous permet d'associer une promesse à l'événement de navigation, garantissant que le navigateur attend que l'opération asynchrone se termine avant de mettre à jour la page. Voir les exemples ci-dessus.

3. Restauration du défilement

Maintenir la position de défilement pendant la navigation est crucial pour offrir une bonne expérience utilisateur. L'API de Navigation fournit des mécanismes pour restaurer la position de défilement lors de la navigation en arrière ou en avant dans l'historique. Vous pouvez utiliser la propriété `scroll` du `NavigationHistoryEntry` pour stocker et restaurer la position de défilement.

4. Gestion des erreurs

Il est essentiel de gérer les erreurs qui peuvent survenir pendant la navigation, telles que les erreurs réseau ou les exceptions non gérées. L'événement `navigateerror` vous permet de capturer et de gérer ces erreurs avec élégance, empêchant l'application de planter ou d'afficher un message d'erreur à l'utilisateur.

5. Amélioration progressive

Lors de la création de SPA avec l'API de Navigation, il est important de prendre en compte l'amélioration progressive. Assurez-vous que votre application fonctionne correctement même si l'API de Navigation n'est pas prise en charge par le navigateur. Vous pouvez utiliser la détection de fonctionnalités pour vérifier la présence de l'objet `navigation` et revenir à des méthodes de routage traditionnelles si nécessaire.

Comparaison avec les méthodes de routage traditionnelles

Les méthodes de routage traditionnelles dans les SPA reposent souvent sur la manipulation de l'objet `window.location` ou l'utilisation de bibliothèques tierces comme `react-router` ou `vue-router`. Bien que ces méthodes soient largement utilisées et bien établies, elles présentent certaines limitations :

• Rechargements complets de page : La manipulation directe de `window.location` peut déclencher des rechargements complets de page, ce qui peut être lent et perturber l'expérience utilisateur.
• Complexité : La gestion de l'historique et de l'état avec les méthodes traditionnelles peut être complexe et source d'erreurs, en particulier dans les applications volumineuses et complexes.
• Surcharge de performance : Les bibliothèques de routage tierces peuvent ajouter une surcharge de performance significative, surtout si elles ne sont pas optimisées pour les besoins spécifiques de votre application.

L'API de Navigation résout ces limitations en fournissant une solution plus rationalisée, performante et riche en fonctionnalités pour le routage et la gestion de l'historique. Elle élimine les rechargements complets de page, simplifie la gestion de l'historique et offre un contrôle précis sur les événements de navigation.

Compatibilité des navigateurs

À la fin de 2024, l'API de Navigation bénéficie d'un bon support sur les navigateurs modernes, y compris Chrome, Firefox, Safari et Edge. Cependant, il est toujours bon de vérifier les dernières informations de compatibilité des navigateurs sur des ressources comme Can I use avant d'implémenter l'API de Navigation dans vos applications de production. Si le support des anciens navigateurs est indispensable, envisagez d'utiliser un polyfill ou un mécanisme de repli.

Conclusion

L'API de Navigation est un outil puissant pour construire des SPA modernes et performantes avec des capacités avancées de routage et de gestion de l'historique. En tirant parti des fonctionnalités de l'API, les développeurs peuvent créer des expériences utilisateur plus rapides, plus fluides et plus engageantes. Bien que la courbe d'apprentissage initiale puisse être un peu plus abrupte par rapport à l'utilisation de méthodes plus simples et plus anciennes, les avantages de l'API de Navigation, en particulier dans les applications complexes, en font un investissement rentable. Adoptez l'API de Navigation et libérez tout le potentiel de vos SPA.

Pour en savoir plus

• MDN Web Docs : API de Navigation
• Spécification de l'API de Navigation du WICG