Для тех, кто находится в темноте и нуждается в небольшом свете, PWA - это прогрессивное веб-приложение (PWA). Прогрессивные веб-приложения сейчас в моде, и кажется, что с появлением фантастических фреймворков, таких как Ruby on Rails, Angular5, VueJS и React, и это лишь некоторые из них, веб-разработка никогда не будет прежней.

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

Так зачем вам добавлять возможность геолокации на свой сайт? Аналитика. Это очень важный вопрос, который многие разработчики упускают из виду. После того, как вы закончите работу со своим сайтом, вам может потребоваться узнать, где ваши клиенты на самом деле проживают или получают доступ к вашему сайту, чтобы предлагать им более качественные услуги. Получение информации о географическом положении пользователя может поставить под угрозу его / ее конфиденциальность, поэтому невозможно будет получить доступ к его местоположению, если пользователь его не одобрит. Геолокация также используется для отслеживания актуальной местной информации, пошаговой GPS-навигации, чтобы направлять ваших пользователей к определенному месту или отображать достопримечательности, которые находятся в пределах досягаемости пользователя.

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

Поддержка браузера

Эту новую функцию поддерживают многие браузеры, в том числе Chrome, Edge, Firefox, Safari и Opera. В IE вам придется сражаться с несколькими конфигурациями, чтобы заставить его работать, и я всегда считаю, что это серьезно того не стоит, потому что кто в любом случае использует IE ??

Следует отметить, что начиная с версии Chrome 50.0 геолокация поддерживается только через безопасное соединение, которое реализует уровень SSL (HTTPS). Географическое местоположение не будет работать с незащищенными источниками, такими как HTTP.

Получение географического положения пользователя

Для работы с Geo Location, реализованной в JS, вам необходимо хорошо разбираться в JavaScript. Вот код, который вам нужен для выхода из позиции пользователя на консоли.

//function that gets the location and returns it
function getLocation() {
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    console.log("Geo Location not supported by browser");
  }
}
//function that retrieves the position
function showPosition(position) {
  var location = {
    longitude: position.coords.longitude,
    latitude: position.coords.latitude
  }
  console.log(location)
}
//request for location
getLocation();

Приведенный выше код выведет ваши координаты. Просто нажмите кнопку F12 или щелкните правой кнопкой мыши в браузере и выберите инспектор элементов или инструменты разработчика. Вот мой конечный результат с моей консоли браузера.

Чтобы доказать, насколько это точно, я ввел свое местоположение в Google и поискал их, и результаты были убедительными. В настоящее время я нахожусь в Vision Towers, Muthithi Road, Westlands. Синяя точка, которую вы видите в центре на карте ниже, - это мое фактическое местоположение.

Довольно круто, правда…? Да, я знаю.

Ошибки

Мы все ненавидим иметь дело с этими маленькими ублюдками, которые появляются, когда вы меньше всего их ожидаете. Обработка ошибок - это то, чем я всегда ненавижу заниматься, это утомительно, утомительно и требует большого внимания к деталям. Это также подразумевает, что вы пытаетесь быть пользователем и делаете самые глупые вещи, которые делают пользователи, чтобы увидеть, не вылетят ли ваши скрипты. Или самые умные вещи, которые пользователи могут сделать, чтобы «взломать» или скомпрометировать ваше приложение.

При попытке получить местоположение пользователя может появиться множество ошибок, пользователь может запретить доступ к местоположению, что вызывает ошибку PERMISSION_DENIED. Положение пользователя не всегда доступно, поскольку не все устройства оснащены функцией GPS, поэтому приложение выдаст исключение POSITION_UNAVAILABLE. Медленные соединения также могут быть обломом, поскольку ваше приложение выдаст исключение TIMEOUT, если соединения слишком медленные. Также существует «универсальный» обработчик ошибок для геолокации, когда компьютер не понимает, в чем проблема, это обычно вызывает исключение UNKNOWN_ERROR. Для обработки этих ошибок вы можете добавить следующий блок кода в функцию getLocation ().

function locationError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            return "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            return "Location information is unavailable."
            break;
        case error.TIMEOUT:
            return "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            return "An unknown error occurred."
            break;
    }
}

Использование карт

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

function showInMap(pos) {
    var latlon = pos.coords.latitude + "," + pos.coords.longitude;

    var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
    "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_:KEY";
    var map = document.querySelector("mapholder");
    map.innerHTML = "<img src='"+img_url+"'>";
}

Наконец, объект геолокации.

Класс навигатора содержит объект геолокации, у которого есть еще два интересных метода, которыми вы можете манипулировать. Первый - это метод watchPosition (). Этот метод принимает один параметр, который содержит позицию пользователя. Затем метод действует как наблюдатель, когда он «наблюдает» за пользователем и «отслеживает» его, когда он активно перемещается, и постоянно обновляет вас (функция, которая его вызвала). Это может быть полезно при отслеживании движения автомобилей или пользователей в таких отделах, как продажи и доставка. Второй параметр - это clearWatch (), который останавливает метод watchPosition ().

Геолокация лучше всего работает на устройствах с GPS, таких как iPhone и большинство современных смартфонов.