Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

Местоположение пользователя

С помощью API геолокации можно узнать, в каком месте находится пользователь — конечно, всегда с его согласия. Эту функциональную возможность можно использовать в запросах, например, для указания маршрута до пункта назначения. Также она будет полезна для добавления геотегов в созданный пользователем контент (например, для обозначения места съемки фотографии)

С помощью API геолокации можно определить, в каком месте находится пользователь, и отслеживать его перемещение – с согласия пользователя (и только при открытой странице), что открывает множество интересных возможностей, таких как возможность внедрения в серверную систему, которая подготовит бланк заказа, если пользователь находится поблизости.

При использовании API геолокации необходимо знать о множестве вещей, и в этом руководстве мы рассмотрим самые распространенные варианты применения и решения в этой сфере.

Определение текущего местоположения пользователя

С помощью API геолокации можно узнать, в каком месте находится пользователь, – конечно, всегда с его согласия. Эту функциональную возможность можно использовать в запросах, например, для указания маршрута до пункта назначения. Также она будет полезна для добавления геотегов в созданный пользователем контент (например, для обозначения места съемки фотографии)

TL;DR

  • Перед тем как использовать API, всегда проверяйте совместимость.
  • Приблизительное местоположение лучше точного.
  • Всегда обрабатывайте ошибки.
  • "Чем реже выполняется опрос устройства пользователя, тем лучше_– в целях экономии заряда аккумулятора."

Использование API не зависит от устройства; способ определения местоположения браузером не имеет значения, поскольку клиенты могут запрашивать и получать данные обычным способом. Для этого может использоваться GPS, Wi-Fi или просто просьба вручную ввести свое местоположение. Поскольку на выполнение любого такого запроса требуется некоторое время, API работает асинхронно; метод обратного вызова отправляется ему каждый раз, когда вы запрашиваете данные о местоположении.

Ситуации, в которых следует использовать геолокацию

  • Поиск ближайших интересующих пользователя объектов на основе данных о местоположении устройства пользователя.
  • Предоставление информации в соответствии с местоположением пользователя (например, новостей).
  • Указание местоположения пользователя на карте.
  • Добавление тегов, созданных в приложении, с данными о местоположении пользователя (т. е. добавление геотегов к изображениям).

Проверка совместимости

API геолокации в настоящее время поддерживаются большинством браузеров, однако, прежде чем приступать к разработке, всегда рекомендуется проверять, поддерживает ли устройство соответствующие функции.

Для этого достаточно проверить, имеется ли в коде объект "geolocation":

// check for Geolocation support
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
}
else {
  console.log('Geolocation is not supported for this Browser/OS version yet.');
}

Определение текущего местоположения пользователя

В API геолокации имеется простой однократный метод получения информации о местоположении пользователя – getCurrentPosition(). При вызове этого метода выполняется асинхронный запрос данных о текущем местоположении пользователя.

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);
};

Если разрешения запрашиваются приложением впервые в этом домене, браузер обычно запрашивает у пользователя согласие на выполнение действия. В зависимости от браузера в его настройках можно указать, что он будет всегда выдавать (или никогда не будет выдавать) запросы на получение разрешений, благодаря чему не будет требоваться подтверждение на отправку запроса.

Кроме того, в зависимости от устройства определения местоположения, используемого браузером, объект "position" может содержать не просто данные о широте и долготе, а гораздо больше информации, например, – сведения о высоте над уровнем моря или направлении движения. Узнать, какие дополнительные сведения используются системой определения местоположения, можно только после того, как она вернет данные.

Тестирование поддержки геолокации на вашем сайте

При наличии в приложении поддержки геолокации HTML5 может оказаться полезным выполнить отладку результата, полученного с использованием различных значений широты и долготы.

С помощью инструментов для разработчиков можно как переопределять значения объекта "position" для параметра "navigator.geolocation", так и имитировать данные геолокации, отсутствующие в меню "Overrides".

  1. В DevTools перейдите в меню "Overrides".
  2. Установите флажок "Override Geolocation", затем введите в поле "Lat =" значение "41.4949819", а в поле "Lon =" – значение "-0.1461206".
  3. Обновите страницу, после чего для нее будут использоваться переопределенные вами координаты для геолокации.

Всегда обрабатывайте ошибки

К сожалению, не все попытки определить местоположение венчаются успехом. Причиной может послужить невозможность подключиться к системе GPS или внезапное отключение пользователем функций определения местоположения. В случае ошибки вызывается второй, дополнительный аргумент для метода getCurrentPosition(), и вы можете добавить в обратный вызов соответствующее уведомление для пользователя:

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(position) {
    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);
};

Старайтесь пореже запускать оборудование для геолокации

Во многих случаях не требуется самая актуальная информация о местоположении пользователя, обычно нужны лишь данные о приблизительном местонахождении.

С помощью дополнительного свойства maximumAge можно указать, чтобы браузер использовал недавно полученные данные геолокации. Это позволит не только ускорить получение ответа, если пользователь ранее уже запрашивал соответствующие данные, но и предотвратить запуск браузером интерфейсов оборудования для геолокации, таких как триангуляция Wi-Fi или модуль 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(position) {
    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);
};

Не заставляйте пользователя ждать, задайте тайм-аут

Если не задать тайм-аут, ответ на запрос местоположения может так и не прийти.

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);
};

Приблизительное местоположение лучше точного

Если требуется найти магазины поблизости от пользователя, маловероятно, что для этого вам потребуются данные с точностью до 1 метра. API разработан таким образом, что он за кратчайшее время выдает приблизительную информацию о местоположении пользователя.

Если высокая точность геопозиционирования не требуется, можно переопределить значение параметра enableHighAccuracy, которое используется по умолчанию. Однако использовать этот параметр следует с осторожностью, поскольку при этом увеличивается время обработки и интенсивно используются ресурсы аккумулятора.

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);
};

Отслеживание местоположения пользователя

"С помощью API геолокации можно определить, в каком месте находится пользователь, и отслеживать его перемещение – всегда с его согласия

Использование API не зависит от устройства; способ определения местоположения браузером не имеет значения, поскольку клиенты могут запрашивать и получать данные обычным способом. Для этого может использоваться GPS или Wi-Fi. Поскольку на выполнение любого такого запроса требуется некоторое время, API работает асинхронно; метод обратного вызова отправляется ему каждый раз, когда вы запрашиваете данные о местоположении.

TL;DR

  • Перед тем как использовать API, всегда проверяйте совместимость.
  • Сведите к минимуму отслеживание местоположения пользователя для экономии ресурса аккумулятора устройства.
  • Всегда обрабатывайте ошибки.

Ситуации, в которых следует использовать геолокацию для определения местоположения пользователя

  • Необходимо получить более точные данные о местоположении пользователя.
  • Необходимо обновить пользовательский интерфейс приложения на основе данных о новом местоположении пользователя.
  • Необходимо обновить программный код приложения, реализующий его функциональные возможности, когда пользователь находится в определенной зоне.

Отслеживание местоположения пользователя

С помощью API геолокации можно отслеживать местоположение пользователя (предварительно получив на это согласие пользователя), вызвав один раз метод getCurrentPosition().

Для непрерывного отслеживания местоположения пользователя в API геолокации предусмотрен метод watchPosition(). Он аналогичен методу getCurrentPosition(), только вызывается несколько раз, по мере того как:

  1. Программное обеспечение для определения местоположения получает точные данные о местонахождении пользователя.
  2. Местоположение пользователя изменяется.

    var watchId = navigator.geolocation.watchPosition(function(position) { document.getElementById('currentLat').innerHTML = position.coords.latitude; document.getElementById('currentLon').innerHTML = position.coords.longitude; });

Обязательная экономия энергии аккумулятора устройства

Отслеживание местоположения — это довольно ресурсоемкая операция. В операционных системах могут быть реализованы функции привязки приложения к подсистеме геопозиционирования, но вы как веб-разработчик не знаете, какая на устройстве пользователя имеется поддержка определения местоположения. В результате, когда вы определяете местоположение пользователя, устройство вынуждено выполнять много излишней работы.

Когда отслеживание местоположения больше не требуется, вызовите метод clearWatch, чтобы отключить системы геопозиционирования.

Всегда обрабатывайте ошибки

К сожалению, не все попытки определить местоположение венчаются успехом. Причиной может послужить невозможность подключиться к системе GPS или внезапное отключение пользователем функций определения местоположения. В случае ошибки вызывается второй, дополнительный аргумент для метода getCurrentPosition(), и вы можете добавить в обратный вызов соответствующее уведомление для пользователя:

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(position) {
    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.watchPosition(geoSuccess, geoError);
};

Получение согласия пользователя на использование данных о его местоположении

Доступ к данным о местоположении пользователя открывает для веб-разработчика широчайшие возможности, такие как целенаправленная фильтрация контента, определение местоположения пользователя на карте, а также упреждающее предоставление ему рекомендаций относительно возможных действий на основе текущего местоположения

Пользователь всегда будете настороженно относиться к просьбам указать информацию о своем местоположении и наверняка согласится предоставить такие сведения только тем, кому доверяет. Именно поэтому в браузере отображается соответствующий запрос, когда сайту требуются данные о вашем местоположении.

Результаты недавних исследований свидетельствуют, что пользователи не доверяют сайтам, на которых их просят предоставить данные о местоположении сразу при загрузке страницы. Так как же лучше всего поступить в таких случаях?

TL;DR

  • Всегда имейте в виду, что пользователи могут отказаться предоставлять информацию о своем местоположении.
  • Четко поясняйте для чего вам требуется доступ к данным о местоположении пользователя.
  • Не запрашивайте доступ к данным геолокации сразу при загрузке страницы.

Всегда имейте в виду, что пользователи могут отказаться предоставлять информацию о своем местоположении

Как бы это ни было огорчительно, но большинство ваших пользователей откажутся предоставлять вам информацию о своем местоположении, поэтому при разработке сайта заранее учтите этот факт.

  1. Обеспечьте обработку всех ошибок вне API геолокации, чтобы адаптировать ваш сайт к такому поведению пользователей.
  2. Четко и ясно поясняйте, для чего вам нужна информация о местоположении.
  3. При необходимости используйте запасной вариант решения.

Используйте запасной вариант, если требуются данные геолокации

Мы рекомендуем организовать работу вашего сайта или приложения таким образом, чтобы они могли обойтись без информации о текущем местоположении пользователя, однако если эти данные им требуются непременно, можно воспользоваться сторонними решениями, которые позволяют получить наиболее вероятное предположение о том, где находится пользователь.

Зачастую такие решения основаны на определении IP-адреса устройства пользователя и сопоставлении этих данных с физическими адресами, зарегистрированными в базе данных RIPE. Такие способы позволяют определить приблизительное местоположение пользователя на основе данных о расположении ближайшего к пользователю узла связи или базовой станции оператора сотовой связи. В большинстве случаев точность определения местоположения таким способом не гарантируется, особенно в случаях, когда используется подключение через VPN или иная прокси-служба.

Доступ к информации о местоположении всегда следует запрашивать, ориентируясь на действия пользователя

Пользователи должны четко понимать, зачем вам нужны эти сведения и какую пользу они получат от этого. Запрос информации о местоположении сразу при загрузке домашней страницы сайта – прекрасный пример того, как не следует делать.

DO: Always request access to location on a user gesture.
DON'T: Ask for it immediately on the homepage as the site loads; it results in a poor user experience.

Вместо этого вы должны дать пользователю четкий призыв к действию или указание того, что для выполнения операции требуется доступ к информации о местоположении пользователя. Это позволит пользователю без труда связать такой запрос с только что начатым им действием.

Ясно давайте понять, что для выполнения действия требуются данные геолокации

В исследовании, проведенном командой Google Ads, пользователей просили забронировать номер в гостинице в Бостоне на определенном сайте бронирования. Сразу после нажатия кнопки "Найти и забронировать" на главной странице сайта им было предложено указать свое местоположение на основе данных GPS.

В ряде случаев пользовали пришли в недоумение, поскольку они не могли понять, почему в результатах поиска отображаются гостиницы в Сан-Франциско, когда номер нужно забронировать в Бостоне.

Лучше будет указать, в каких целях у пользователей интересуются сведениями об их текущем местоположении. Добавьте хорошо узнаваемое обозначение, которое широко используется на различных устройствах (например, определение расстояния).

Также можно использовать явный призыв к действию, такой как "Find Near Me" (Найти поблизости от меня).

Ненавязчиво намекните пользователям, что вам необходим доступ к данным геолокации

Вам не известно, предпримет ли пользователь какие-либо действия для предоставления соответствующей информации. Когда пользователь отказался предоставлять данные о своем место нахождении, вы безусловно узнаете об этом, однако положительный ответ вы получите только при отображении результатов использования функции геолокации.

Рекомендуется побудить пользователя к выполнению действия, если вам требуется, чтобы он выполнил его.

Вот что мы рекомендуем:

  1. Настройте таймер, который будет срабатывать по прошествии короткого периода времени (5 секунд вполне достаточно).
  2. При получении сообщения об ошибке на экране должно отображаться соответствующее сообщение.
  3. В случае положительного ответа таймер отключается и начинается обработка полученного результата.
  4. Если после тайм-аута положительный ответ так и не получен, на экране должно отображаться соответствующее уведомление.
  5. Если ответ последовал позже, а уведомление по-прежнему отображается, его необходимо отключить.

    button.onclick = function() { var startPos; var element = 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); };