Position de l'utilisateur

L'API Geolocation vous permet de connaître la position de l'utilisateur, sous réserve de son consentement.

Paul Kinlan

L'API Geolocation vous permet de découvrir la position géographique de l'utilisateur, avec son autorisation. Vous pouvez utiliser cette fonctionnalité pour guider un utilisateur vers sa destination et ajouter des balises géographiques aux contenus créés 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 le suivre lorsqu'il se déplace, toujours avec son autorisation (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 à emporter si l'utilisateur se trouve à proximité.

Vous devez prendre en compte de nombreux éléments lorsque vous utilisez l'API Geolocation. Ce guide vous présente les cas d'utilisation et les solutions courants.

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 si le navigateur de l'utilisateur n'est pas compatible avec la géolocalisation.
  • Apprenez non seulement à implémenter la géolocalisation, mais aussi à l'utiliser de la meilleure façon.
  • Testez la géolocalisation avec votre site.

Quand utiliser la géolocalisation ?

  • Déterminez l'emplacement physique le plus proche de l'utilisateur pour adapter l'expérience utilisateur.
  • Adapter les informations (comme les actualités) à la localisation de l'utilisateur
  • Afficher la position d'un utilisateur sur une carte
  • Ajoutez des balises aux données créées dans votre application avec la position de l'utilisateur (c'est-à-dire géomarquez une photo).

Demander l'autorisation de façon responsable

Des études récentes sur l'expérience utilisateur ont montré que les utilisateurs ne font pas confiance aux sites qui les invitent simplement à divulguer leur position lors du chargement de la page. Quelles sont les bonnes pratiques à suivre ?

Partez du principe que les utilisateurs ne vous communiqueront pas leur position

De nombreux utilisateurs ne voudront pas vous communiquer leur position. Vous devez donc adopter un style de développement défensif.

  1. Gérez toutes les erreurs de l'API de géolocalisation afin de pouvoir adapter votre site à cette condition.
  2. Soyez clair et explicite sur votre besoin de l'emplacement.
  3. Si nécessaire, utilisez une solution de remplacement.

Utiliser un paramètre 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, des solutions tierces vous permettent d'obtenir une estimation de l'emplacement actuel de la personne.

Ces solutions fonctionnent souvent en examinant l'adresse IP de l'utilisateur et en la mappant sur les adresses physiques enregistrées dans la base de données RIPE. Ces emplacements ne sont souvent pas très précis et correspondent généralement à 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 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 en cas de geste de l'utilisateur

Assurez-vous que les utilisateurs comprennent pourquoi vous leur demandez leur position et quel est l'avantage pour eux. Le demander immédiatement sur la page d'accueil pendant le chargement du site entraîne une mauvaise expérience utilisateur.

Site demandant une autorisation sur une page de recherche de magasin
À FAIRE: Demandez toujours l'accès à la position en fonction d'un geste de l'utilisateur.
Site demandant une autorisation sur la page d'accueil.
À NE PAS FAIRE: Demandez-le sur la page d'accueil pendant le chargement du site. Cela entraînera une mauvaise expérience utilisateur.

À la place, fournissez à l'utilisateur une incitation à l'action claire ou indiquez qu'une opération nécessitera l'accès à sa position. L'utilisateur peut alors associer plus facilement l'invite système d'accès à l'action qu'il vient d'effectuer.

Indiquez clairement qu'une action nécessitera leur position

Dans une étude menée par l'équipe Google Ads, lorsqu'un utilisateur a été invité à réserver une chambre d'hôtel à Boston pour une conférence à venir sur le site d'un hôtel 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 était frustré, car il ne comprenait pas pourquoi des hôtels de San Francisco s'affichaient 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 indicateur bien connu, commun à tous les appareils, tel qu'un télémètre ou une incitation à l'action explicite telle que "Rechercher à proximité".

Un télémètre.
Un outil de mesure de la distance
Formulaire avec un bouton "Rechercher à proximité".
Une incitation à l'action spécifique pour trouver un établissement à proximité

Inciter gentiment les utilisateurs à autoriser l'accès à leur position

Vous n'avez accès à rien de 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 y autorisent. Vous ne savez que vous avez obtenu l'accès lorsque les résultats s'affichent.

Il est recommandé d'inciter les utilisateurs à agir si vous avez besoin qu'ils le fassent.

Nos conseils

  1. Configurez un minuteur qui se déclenche après une courte période. Cinq secondes est une bonne valeur.
  2. Si un message d'erreur s'affiche, envoyez-en un à l'utilisateur.
  3. Si vous obtenez une réponse positive, désactivez le minuteur et traitez les résultats.
  4. Si, après le délai avant expiration, vous n'avez pas reçu de réponse positive, affichez une notification à l'utilisateur.
  5. 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 de faire quoi que ce soit.

Vous pouvez facilement vérifier la compatibilité en vérifiant 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 fournit des informations de manière asynchrone 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 sur ce domaine demande des autorisations, le navigateur vérifie généralement l'autorisation de l'utilisateur. Selon le navigateur, il peut également y avoir des préférences permettant de toujours autoriser ou d'interdire les recherches d'autorisations, auquel cas le processus de confirmation est contourné.

En fonction de l'appareil de localisation utilisé par votre navigateur, l'objet de position peut contenir beaucoup 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 le système de localisation utilise tant qu'il ne renvoie pas les données.

Surveiller la position de l'utilisateur

L'API Geolocation vous permet d'obtenir la position de l'utilisateur (avec son autorisation) en 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 manière similaire à getCurrentPosition(), mais il se déclenche plusieurs fois lorsque le logiciel de positionnement:

  1. Obtenez un verrouillage plus précis de l'utilisateur.
  2. 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 zone définie.

Bonnes pratiques à adopter lors de l'utilisation de la géolocalisation

Toujours vider la mémoire et économiser la batterie

La surveillance des modifications d'une géolocalisation n'est pas une opération sans frais. Bien que les systèmes d'exploitation puissent présenter des fonctionnalités de plate-forme permettant aux applications de s'intégrer au sous-système géo, en tant que développeur Web, vous n'avez aucune idée de la compatibilité de l'appareil de l'utilisateur pour surveiller sa position. De plus, lorsque vous surveillez une position, vous engagez l'appareil dans 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.

Gérer les erreurs de manière appropriée

Malheureusement, toutes les recherches d'établissements ne sont pas couronnées de succès. Il est possible qu'un GPS ne puisse pas ê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. Vous avez juste besoin d'une estimation approximative.

Utilisez la propriété facultative maximumAge pour indiquer au navigateur d'utiliser un résultat de géolocalisation obtenu récemment. 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 laissez pas l'utilisateur attendre, définissez un délai avant expiration

Sauf si vous définissez un délai avant expiration, votre requête de position actuelle risque de 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 une position approximative plutôt qu'une position précise

Si vous souhaitez trouver le magasin le plus proche d'un utilisateur, vous n'avez probablement pas besoin d'une précision de 1 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 cette option 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

Onglet "Capteur" dans les outils de développement.

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 s'adapte de manière appropriée lorsque la géolocalisation n'est pas disponible.

Vous pouvez effectuer les deux opérations à partir des outils pour les développeurs Chrome.

  1. Accédez aux outils pour les développeurs Chrome.
  2. Appuyez sur Échap pour ouvrir le panneau de la console.
  3. Ouvrir le menu du panneau de la console
  4. 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 emplacement personnalisé ou désactiver la géolocalisation en définissant le forçage sur Emplacement indisponible.

Commentaires