API de géolocalisation dans les composants React

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) demande une fois la position de l’appareil. La fonction de rappel de succès reçoit un objet GeolocationPosition. Cette méthode convient lorsque vous avez besoin de la position une seule fois, par exemple pour trouver le magasin le plus proche après un clic sur un bouton, plutôt que pour suivre des déplacements continus.

navigator.geolocation.watchPosition(successCallback, errorCallback, options) appelle continuellement la fonction de rappel chaque fois que la position de l’appareil change. Cette méthode renvoie un watchId numérique. Elle convient aux cas d’utilisation en temps réel, comme le suivi d’une livraison ou la navigation virage par virage, lorsque la position doit rester à jour.

L’objet GeolocationPosition contient une propriété coords avec la latitude, la longitude et l’accuracy (en mètres). Les champs facultatifs supplémentaires incluent altitude, altitudeAccuracy, heading et speed. Le champ timestamp indique le moment où la position a été capturée.

La fonction de rappel d’erreur reçoit une GeolocationPositionError dotée d’une propriété code numérique. Le code 1 correspond à PERMISSION_DENIED (l’utilisateur a refusé), le code 2 à POSITION_UNAVAILABLE (défaillance matérielle ou réseau) et le code 3 à TIMEOUT (la demande a pris trop de temps). Gérez toujours ces trois cas.

Un écouteur watchPosition s’exécute indéfiniment jusqu’à ce que vous l’arrêtiez. Dans useEffect, renvoyez une fonction de nettoyage qui appelle navigator.geolocation.clearWatch(watchId). Si vous oubliez ce nettoyage, l’observateur continue de s’exécuter après le démontage du composant, ce qui épuise la batterie et peut mettre à jour l’état d’un composant démonté.

Un crochet useGeolocation gère un état de statut comportant quatre valeurs possibles : idle (pas encore demandé), loading (demande en cours), success (position reçue) et error (échec). Il conserve également position et errorMessage dans son état. Les composants reçoivent ainsi une interface claire et cohérente.

Lorsque l’utilisateur refuse la géolocalisation, affichez un message utile expliquant pourquoi la fonctionnalité a besoin de l’accès à la position et comment le réactiver dans les paramètres du navigateur. N’affichez jamais un code d’erreur brut aux utilisateurs. Proposez une solution de secours permettant de saisir une adresse manuellement afin que la fonctionnalité reste utilisable sans autorisation de localisation.

Comme la plupart des API avancées des navigateurs, la géolocalisation est limitée aux contextes sécurisés. navigator.geolocation vaut undefined sur les pages HTTP ordinaires. Pendant le développement sur localhost, elle fonctionne sans HTTPS. En production, assurez-vous toujours que votre application est diffusée via HTTPS, sinon les utilisateurs ne seront jamais invités à accorder leur autorisation.

Le troisième argument facultatif de getCurrentPosition et de watchPosition accepte un objet d’options. enableHighAccuracy: true demande une précision de niveau GPS, au prix d’une consommation d’énergie plus élevée. timeout définit le nombre maximal de millisecondes d’attente. maximumAge autorise l’utilisation d’une position mise en cache si elle a été capturée dans le délai indiqué en millisecondes.

La géolocalisation permet des fonctionnalités comme « trouver un magasin près de moi », le suivi d’un livreur sur une carte, la météo selon la ville actuelle, les publications associées à un lieu et le calcul de la distance entre l’utilisateur et une destination. Expliquez toujours clairement aux utilisateurs pourquoi l’application a besoin de leur position avant de demander leur autorisation.

Chrome DevTools vous permet de définir un emplacement fictif pour l’appareil. Ouvrez DevTools, accédez au menu à trois points, sélectionnez Plus d’outils, puis Capteurs. Vous pouvez saisir des coordonnées de latitude et de longitude pour simuler n’importe quel emplacement. C’est beaucoup plus rapide que de vous déplacer réellement pour tester des fonctionnalités dépendantes de la localisation.

Que signifie un code 1 de GeolocationPositionError ?

Utilisez getCurrentPosition pour une lecture ponctuelle et watchPosition pour un suivi continu. Appelez toujours clearWatch dans la fonction de nettoyage de useEffect. Créez un crochet useGeolocation avec les états idle, loading, success et error. Gérez avec tact le refus d’autorisation et rappelez-vous que la géolocalisation nécessite HTTPS en production.