L'API Geolocation vous permet de découvrir la position de l'utilisateur, à condition qu'il ait donné son consentement.
L'API Geolocation vous permet de découvrir la position de l'utilisateur, avec son consentement. Vous pouvez utiliser cette fonctionnalité, par exemple pour guider un utilisateur vers sa destination et pour géomarquer du contenu créé par l'utilisateur (par exemple, pour indiquer le lieu de prise de vue d'une photo).
L'API Geolocation vous permet également de voir où se trouve l'utilisateur et de garder un œil sur lui lorsqu'il se déplace, toujours avec son consentement (et uniquement lorsque la page est ouverte). Cela crée de nombreux cas d'utilisation intéressants, tels que l'intégration à des systèmes backend pour préparer une commande à récupérer si l'utilisateur se trouve à proximité.
Lorsque vous utilisez l'API Geolocation, de nombreux éléments doivent être pris en compte. Ce guide vous présente les cas d'utilisation courants et leurs solutions.
Résumé
- Utilisez la géolocalisation lorsque cela profite à l'utilisateur.
- Demandez l'autorisation en réponse claire à un geste de l'utilisateur.
- Utilisez la détection de fonctionnalités lorsque le navigateur d'un utilisateur n'est pas compatible avec la géolocalisation.
- Ne vous contentez pas d'apprendre à implémenter la géolocalisation. Découvrez la meilleure façon d'utiliser la géolocalisation.
- Testez la géolocalisation avec votre site.
Quand utiliser la géolocalisation ?
- Identifiez où l'utilisateur est le plus proche d'un emplacement physique spécifique pour personnaliser l'expérience utilisateur.
- Adaptez les informations (telles que les actualités) à la position géographique de l'utilisateur.
- Affichez la position d'un utilisateur sur une carte.
- Ajoutez des balises aux données créées dans votre application en indiquant la position de l'utilisateur (par exemple, géomarquez une image).
Demandez les autorisations de manière responsable
Des études récentes ont montré que les utilisateurs se méfient des sites qui les invitent simplement à céder leur position au chargement de la page. Quelles sont les bonnes pratiques à respecter ?
Partir du principe que les utilisateurs ne vous communiqueront pas leur position
Beaucoup de vos utilisateurs ne voudront pas vous donner leur position. Vous devez donc adopter un style de développement défensif.
- Traitez toutes les erreurs hors de l'API de géolocalisation afin d'adapter votre site à cette condition.
- Expliquez clairement vos besoins concernant l'emplacement.
- Utilisez une solution de remplacement si nécessaire.
Utiliser une création de remplacement si la géolocalisation est requise
Nous vous recommandons de ne pas autoriser votre site ou votre application à accéder à la position actuelle de l'utilisateur. Toutefois, si votre site ou votre application nécessite la position actuelle de l'utilisateur, il existe des solutions tierces qui vous permettent d'avoir une idée plus précise de sa position actuelle.
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 du RIPE. Ces emplacements ne sont souvent pas très précis, ce qui vous donne normalement la position du hub de télécommunications ou de la tour de téléphonie mobile la plus proche de l'utilisateur. Dans de nombreux cas, elles ne sont même pas aussi précises, en particulier si l'utilisateur est connecté à un VPN ou à un autre service proxy.
Toujours demander l'accès à la localisation avec un geste de l'utilisateur
Assurez-vous que les utilisateurs comprennent pourquoi vous leur demandez leur emplacement et quels en seront les avantages. Si vous le demandez immédiatement sur la page d'accueil lors du chargement du site, l'expérience utilisateur sera médiocre.
À la place, donnez à l'utilisateur une incitation à l'action claire ou indiquez-lui qu'une opération nécessitera l'accès à sa position. L'utilisateur peut alors plus facilement associer l'invite d'accès du système à l'action qui vient d'être lancée.
Indiquer clairement qu'une action demandera sa position
Dans une étude menée par l'équipe Google Ads, lorsqu'un utilisateur était invité à réserver une chambre d'hôtel à Boston pour une conférence sur le site d'un hôtel particulier, il était 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 était frustré parce qu'il ne comprenait pas pourquoi on lui présentait des hôtels à San Francisco lorsqu'il voulait réserver une chambre à Boston.
Pour une meilleure expérience, assurez-vous que les utilisateurs comprennent pourquoi vous leur demandez leur emplacement. Ajoutez un symbole connu et commun à tous les appareils, comme un télémètre, ou une incitation à l'action explicite comme "Trouver près de moi".
Incitez les utilisateurs à autoriser l'accès à leur position
Vous n'avez accès à aucune activité des utilisateurs. Vous savez exactement quand les utilisateurs interdisent l'accès à leur position, mais vous ne savez pas quand ils vous accordent l'accès. Vous savez uniquement que vous avez obtenu l'accès lorsque des résultats s'affichent.
Une bonne pratique consiste à "encourager " les utilisateurs à effectuer l'action si vous en avez besoin.
Nos conseils
- Configurez un minuteur qui se déclenche après une courte période. Une durée de 5 secondes est une bonne valeur.
- Si un message d'erreur s'affiche, présentez-le à l'utilisateur.
- Si vous obtenez une réponse positive, désactivez le minuteur et traitez les résultats.
- Si, après ce 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 l'assistance avant d'effectuer quoi que ce soit.
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 "one-shot" simple pour obtenir la position de l'utilisateur: getCurrentPosition(). Un appel à cette méthode génère des rapports asynchrones sur 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 de l'utilisateur. Selon le navigateur, il peut également y avoir des préférences permettant de toujours autoriser (ou interdire) les recherches d'autorisations, auquel cas le processus de confirmation est contourné.
Selon l'appareil de localisation utilisé par votre navigateur, l'objet de position peut contenir bien plus que des coordonnées de latitude et de longitude. Par exemple, il peut inclure une altitude ou une direction. Vous ne pouvez pas déterminer 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) via un seul appel à getCurrentPosition().
Si vous souhaitez surveiller en permanence la position de l'utilisateur, utilisez la méthode de l'API Geolocation watchPosition(). Il fonctionne de la même manière que getCurrentPosition(), mais il se déclenche plusieurs fois en tant que logiciel de positionnement:
- Permet d'obtenir un verrouillage plus précis de l'utilisateur.
- Détermine si 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 verrouiller plus précisément la position 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 zone définie donnée.
Bonnes pratiques d'utilisation de la géolocalisation
Toujours vider la batterie 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, vous, en tant que développeur Web, n'avez aucune idée de la prise en charge de l'appareil de l'utilisateur pour surveiller la position de l'utilisateur. Pendant que vous observez une position, vous faites appel à l'appareil pour qu'il effectue de nombreux traitements supplémentaires.
Une fois que vous n'avez plus besoin de suivre la position de l'utilisateur, appelez clearWatch pour désactiver les systèmes de géolocalisation.
Gestion optimale des erreurs
Malheureusement, toutes les recherches d'emplacement n'aboutissent pas. Il se peut qu'un GPS n'ait pas pu être localisé ou que l'utilisateur ait soudainement désactivé la recherche de la position. En cas d'erreur, un deuxième argument facultatif de getCurrentPosition() est appelé pour que vous puissiez avertir 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 la nécessité 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. Vous avez simplement besoin 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. Non seulement cette méthode est renvoyée plus rapidement si l'utilisateur a déjà demandé les données, mais elle empêche également 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 pas faire attendre l'utilisateur plus longtemps, définir un délai d'inactivité
À moins que vous ne définissiez un délai avant expiration, votre requête pour la position actuelle pourrait ne jamais être renvoyée.
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);
};
Privilégier un emplacement approximatif plutôt qu'un emplacement précis
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 s'affiche le plus rapidement possible.
Si vous avez besoin d'un niveau de précision élevé, vous pouvez remplacer le paramètre par défaut avec l'option enableHighAccuracy. Utilisez-le avec parcimonie: la résolution est plus lente et utilise 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, effectuez les opérations suivantes:
- Testez le fonctionnement de votre application dans différentes zones géographiques.
- Vérifiez que votre application se dégrade correctement lorsque la géolocalisation n'est pas disponible.
Vous pouvez utiliser ces deux outils à partir des outils pour les développeurs Chrome.
- Accédez aux outils pour les développeurs Chrome.
- Appuyez sur Esc pour ouvrir le panneau de la console.
- Ouvrir le menu de navigation de la console
- Cliquez sur l'option Capteurs pour afficher l'onglet "Capteurs".
Vous pouvez alors remplacer l'emplacement par une grande ville prédéfinie, saisir un lieu personnalisé ou désactiver la géolocalisation en définissant le forçage sur Position indisponible.