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 surveiller 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 aux systèmes backend afin de préparer une commande pour la collecte 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 lorsqu'elle présente des avantages pour 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.
  • Adaptez les informations (telles que les actualités) à l'emplacement de l'utilisateur.
  • Afficher la position d'un utilisateur sur une carte
  • Taguez les données créées dans votre application avec l'emplacement de l'utilisateur (c'est-à-dire, géomarquez une image).

Demander l'autorisation de façon responsable

De récentes études utilisateur ont montré que les utilisateurs se méfiaient des sites qui les invitent simplement à donner 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. Utilisez une solution de remplacement si nécessaire.

Utiliser un élément 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 l'antenne-relais 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 lors d'un geste de l'utilisateur.
Site demandant une autorisation sur la page d'accueil.
À ÉVITER: demandez de le faire sur la page d'accueil lors du chargement du site. L'expérience utilisateur sera médiocre.

À 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.

Indiquer clairement qu'une action demandera sa 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é

Encourager délicatement les utilisateurs à autoriser leur position

Vous n'avez accès à rien de ce que font les utilisateurs. Vous savez exactement quand les utilisateurs interdisent l'accès à leurs établissements, mais vous ne savez pas quand ils vous accordent l'accès. Vous savez seulement 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. 5 secondes est une bonne valeur.
  2. Si un message d'erreur s'affiche, affichez un message à 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 majorité 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 "one-shot" simple 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é.

Selon l'appareil de localisation utilisé par votre navigateur, l'objet de position peut contenir bien plus que la latitude et la longitude. Il peut, par exemple, 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 semblable à getCurrentPosition(), mais il se déclenche plusieurs fois en tant que logiciel de positionnement:

  1. Obtient un verrouillage plus précis sur 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 un verrouillage plus précis de 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.

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

Toujours vider et économiser la batterie

L'observation des modifications apportées à une géolocalisation n'est pas une opération sans frais. Même si les systèmes d'exploitation introduisent des fonctionnalités de plate-forme permettant aux applications de s'associer au sous-système géographique, vous, en tant que développeur Web, n'avez aucune idée de la compatibilité de l'appareil de l'utilisateur pour surveiller la position de l'utilisateur. De plus, lorsque vous regardez une position, vous effectuez 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'établissements 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 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 d'utiliser du 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 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 pas faire attendre l'utilisateur : définir 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 se dégrade 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".

À partir de là, vous pouvez 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