L'API Geolocation vous permet de découvrir la position de l'utilisateur, avec son autorisation.
L'API Geolocation vous permet de découvrir la position de l'utilisateur, avec son consentement. Vous pouvez utiliser cette fonctionnalité pour guider un utilisateur vers sa destination et géolocaliser du contenu créé par les utilisateurs (par exemple, pour indiquer l'endroit où une photo a été prise).
L'API Geolocation vous permet également de voir où se trouve l'utilisateur et de suivre ses déplacements, toujours avec son consentement (et uniquement lorsque la page est ouverte). Cela permet de créer de nombreux cas d'utilisation intéressants, comme l'intégration à des systèmes backend pour préparer une commande à retirer si l'utilisateur se trouve à proximité.
Vous devez prendre en compte de nombreux éléments lorsque vous utilisez l'API Geolocation. Ce guide présente les cas d'utilisation et les solutions courants.
Résumé
- Utilisez la géolocalisation lorsqu'elle est utile à l'utilisateur.
- Demandez l'autorisation en réponse claire à un geste de l'utilisateur.
- Utilisez la détection de fonctionnalité au cas où le navigateur d'un utilisateur ne serait pas compatible avec la géolocalisation.
- Ne vous contentez pas d'apprendre à implémenter la géolocalisation, découvrez comment l'utiliser de manière optimale.
- Testez la géolocalisation avec votre site.
Quand utiliser la géolocalisation
- Déterminez l'endroit où l'utilisateur est le plus proche d'un emplacement physique spécifique pour personnaliser l'expérience utilisateur.
- Adapter les informations (comme les actualités) à la position de l'utilisateur.
- Afficher la position d'un utilisateur sur une carte
- Ajouter un tag aux données créées dans votre application avec la position de l'utilisateur (par exemple, géolocaliser une photo)
Demander l'autorisation de manière responsable
Des études utilisateur récentes ont montré que les utilisateurs se méfient des sites qui leur demandent simplement de fournir leur position lors du chargement de la page. Quelles sont les bonnes pratiques ?
Partez du principe que les utilisateurs ne vous donneront pas leur position
De nombreux utilisateurs ne souhaitent pas vous communiquer leur position. Vous devez donc adopter un style de développement défensif.
- Gérez toutes les erreurs de l'API Geolocation afin de pouvoir adapter votre site à cette condition.
- Soyez clair et explicite sur la raison pour laquelle vous avez besoin de la position.
- Utilisez une solution de remplacement si nécessaire.
Utiliser une solution de remplacement si la géolocalisation est requise
Nous vous recommandons de ne pas exiger l'accès à la position actuelle de l'utilisateur sur votre site ou dans votre application. Toutefois, si votre site ou votre application nécessite la position actuelle de l'utilisateur, il existe des solutions tierces qui vous permettent d'obtenir une estimation de l'endroit où se trouve actuellement la personne.
Ces solutions fonctionnent souvent en examinant l'adresse IP de l'utilisateur et en la mappant aux adresses physiques enregistrées dans la base de données RIPE. Ces emplacements sont souvent peu précis et indiquent généralement la position du hub de télécommunications ou de l'antenne-relais le plus proche de l'utilisateur. Dans de nombreux cas, elles peuvent même ne pas être très précises, en particulier si l'utilisateur utilise un VPN ou un autre service proxy.
Toujours demander l'accès à la position lors d'un geste de l'utilisateur
Assurez-vous que les utilisateurs comprennent pourquoi vous leur demandez leur position et ce qu'ils en retireront. Le demander immédiatement sur la page d'accueil au chargement du site nuit à l'expérience utilisateur.
À la place, proposez à l'utilisateur une incitation à l'action claire ou indiquez-lui qu'une opération nécessite l'accès à sa position. L'utilisateur peut alors associer plus facilement l'invite d'accès du système à l'action qu'il vient de lancer.
Indiquez clairement qu'une action demandera leur position.
Dans une étude menée par l'équipe Google Ads, un utilisateur a été invité à réserver une chambre d'hôtel à Boston pour une conférence à venir sur un site d'hôtels particulier. Il a été invité à partager sa position GPS immédiatement après avoir appuyé sur l'incitation à l'action "Rechercher et réserver" sur la page d'accueil.
Dans certains cas, l'utilisateur a été frustré, car il ne comprenait pas pourquoi des hôtels de San Francisco lui étaient proposés alors qu'il souhaitait réserver une chambre à Boston.
Pour une meilleure expérience, assurez-vous que les utilisateurs comprennent pourquoi vous leur demandez leur position. Ajoutez un signifiant bien connu et commun à tous les appareils, comme un télémètre, ou une incitation à l'action explicite telle que "Trouver à proximité".
Incitez gentiment les utilisateurs à autoriser l'accès à leur position
Vous n'avez pas accès à ce que font les utilisateurs. Vous savez exactement quand les utilisateurs refusent l'accès à leur position, mais vous ne savez pas quand ils vous l'accordent. Vous ne savez que vous avez obtenu l'accès que lorsque les résultats s'affichent.
Il est recommandé d'inciter les utilisateurs à agir si vous avez besoin qu'ils effectuent l'action.
Nos conseils
- Configurez un minuteur qui se déclenche après une courte période (cinq secondes est une bonne valeur).
- Si un message d'erreur s'affiche, affichez un message pour l'utilisateur.
- Si vous obtenez une réponse positive, désactivez le minuteur et traitez les résultats.
- Si, après l'expiration du délai, vous n'avez pas obtenu de réponse positive, affichez une notification à l'utilisateur.
- Si la réponse arrive plus tard et que la notification est toujours présente, supprimez-la de l'écran.
button.onclick = function () {
var startPos;
var nudge = document.getElementById('nudge');
var showNudgeBanner = function () {
nudge.style.display = 'block';
};
var hideNudgeBanner = function () {
nudge.style.display = 'none';
};
var nudgeTimeoutId = setTimeout(showNudgeBanner, 5000);
var geoSuccess = function (position) {
hideNudgeBanner();
// We have the location, don't display banner
clearTimeout(nudgeTimeoutId);
// Do magic with location
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
switch (error.code) {
case error.TIMEOUT:
// The user didn't accept the callout
showNudgeBanner();
break;
}
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
Prise en charge des navigateurs
La plupart des navigateurs sont désormais compatibles avec l'API Geolocation, mais il est recommandé de toujours vérifier la compatibilité avant d'effectuer une action.
Vous pouvez facilement vérifier la compatibilité en testant la présence de l'objet de géolocalisation :
// check for Geolocation support
if (navigator.geolocation) {
console.log('Geolocation is supported!');
} else {
console.log('Geolocation is not supported for this Browser/OS.');
}
Déterminer la position actuelle de l'utilisateur
L'API Geolocation propose une méthode simple et ponctuelle pour obtenir la position de l'utilisateur : getCurrentPosition(). Un appel à cette méthode indique de manière asynchrone la position actuelle de l'utilisateur.
window.onload = function () {
var startPos;
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
navigator.geolocation.getCurrentPosition(geoSuccess);
};
Si c'est la première fois qu'une application de ce domaine demande des autorisations, le navigateur vérifie généralement le consentement utilisateur. Selon le navigateur, il peut également exister des préférences permettant de toujours autoriser (ou refuser) les demandes d'autorisation, auquel cas le processus de confirmation est ignoré.
Selon l'appareil de localisation utilisé par votre navigateur, l'objet de position peut contenir bien plus que la latitude et la longitude. Par exemple, il peut inclure une altitude ou une direction. Vous ne pouvez pas savoir quelles informations supplémentaires ce système de localisation utilise tant qu'il n'a pas renvoyé les données.
Surveiller la position de l'utilisateur
L'API Geolocation vous permet d'obtenir la position de l'utilisateur (avec son consentement) en un seul appel à getCurrentPosition().
Si vous souhaitez surveiller en continu la position de l'utilisateur, utilisez la méthode watchPosition() de l'API Geolocation. Il fonctionne de la même manière que getCurrentPosition(), mais se déclenche plusieurs fois lorsque le logiciel de positionnement :
- Obtient un verrouillage plus précis sur l'utilisateur.
- Détermine que la position de l'utilisateur change.
var watchId = navigator.geolocation.watchPosition(function (position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});
Quand utiliser la géolocalisation pour surveiller la position de l'utilisateur ?
- Vous souhaitez obtenir une localisation plus précise de l'utilisateur.
- Votre application doit mettre à jour l'interface utilisateur en fonction des nouvelles informations de localisation.
- Votre application doit mettre à jour la logique métier lorsque l'utilisateur entre dans une certaine zone définie.
Bonnes pratiques pour l'utilisation de la géolocalisation
Toujours effacer et économiser la batterie
La surveillance des modifications apportées à une géolocalisation n'est pas une opération sans frais. Bien que les systèmes d'exploitation puissent introduire des fonctionnalités de plate-forme permettant aux applications de se connecter au sous-système géographique, en tant que développeur Web, vous ne savez pas si l'appareil de l'utilisateur est compatible avec la surveillance de sa position. De plus, lorsque vous surveillez une position, vous engagez l'appareil dans de nombreux traitements supplémentaires.
Lorsque vous n'avez plus besoin de suivre la position de l'utilisateur, appelez clearWatch pour désactiver les systèmes de géolocalisation.
Gérer les erreurs de façon optimale
Malheureusement, toutes les recherches de position ne sont pas concluantes. Il est possible que le GPS n'ait pas pu être localisé ou que l'utilisateur ait soudainement désactivé la recherche de position. En cas d'erreur, un deuxième argument facultatif de getCurrentPosition() est appelé afin que vous puissiez en informer l'utilisateur dans le rappel :
window.onload = function () {
var startPos;
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
Réduire le besoin de démarrer le matériel de géolocalisation
Dans de nombreux cas d'utilisation, vous n'avez pas besoin de la position la plus récente de l'utilisateur, mais simplement d'une estimation approximative.
Utilisez la propriété facultative maximumAge pour indiquer au navigateur d'utiliser un résultat de géolocalisation récemment obtenu. Cela permet non seulement de renvoyer les données plus rapidement si l'utilisateur les a déjà demandées, mais aussi d'empêcher le navigateur de démarrer ses interfaces matérielles de géolocalisation, telles que la triangulation Wi-Fi ou le GPS.
window.onload = function () {
var startPos;
var geoOptions = {
maximumAge: 5 * 60 * 1000,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Ne faites pas attendre l'utilisateur, définissez un délai avant expiration
Si vous ne définissez pas de délai avant expiration, votre requête de position actuelle risque de ne jamais aboutir.
window.onload = function () {
var startPos;
var geoOptions = {
timeout: 10 * 1000,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Préférer une position approximative à une position précise
Si vous souhaitez trouver le magasin le plus proche d'un utilisateur, il est peu probable que vous ayez besoin d'une précision d'un mètre. L'API est conçue pour fournir une position approximative qui est renvoyée le plus rapidement possible.
Si vous avez besoin d'un niveau de précision élevé, vous pouvez remplacer le paramètre par défaut par l'option enableHighAccuracy. Utilisez-la avec parcimonie, car elle est plus lente à résoudre et consomme plus de batterie.
window.onload = function () {
var startPos;
var geoOptions = {
enableHighAccuracy: true,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Émuler la géolocalisation avec les Outils pour les développeurs Chrome
Une fois la géolocalisation configurée, vous devez :
- Testez le fonctionnement de votre application dans différentes zones géographiques.
- Vérifiez que votre application se dégrade de manière appropriée lorsque la géolocalisation n'est pas disponible.
Vous pouvez faire les deux à partir des outils pour les développeurs Chrome.
- Ouvrez les outils pour les développeurs Chrome.
- Appuyez sur Esc pour ouvrir le panneau de la console.
- Ouvrir le menu du panneau de la console
- Cliquez sur l'option Capteurs pour afficher l'onglet "Capteurs".
Vous pouvez alors remplacer la position par une grande ville prédéfinie, saisir une position personnalisée ou désactiver la géolocalisation en définissant le remplacement sur Position indisponible.