Как интегрировать геолокацию в PWA

Предположим, что пользователь использует поддерживаемый браузер, вы можете настроить PWA так, чтобы он легко определял местоположение пользователя с помощью Geolocation API или, если быть более точным, с помощью объекта navigator.geolocation внутри него. Вот как это сделать правильно в PWA:

Предпосылки

• Уверенное знание JavaScript и HTML.
• Рабочий PWA , обслуживаемый через HTTPS (следуйте нашему руководству по PWA, чтобы создать его).

Геолокация в действии

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

Как интегрировать геолокацию в PWA

Основы

Во-первых, нам нужно понять механизм, лежащий в основе объекта navigator.geolocation . Объект navigator — это объект-контейнер, с помощью которого нам становится доступным множество веб-API. Внутри контейнера navigator находится объект geolocation , предоставляемый тремя методами:

• getCurrentPosition()
• watchPosition()
• clearWatch()

Использование getCurrentPosition() для получения позиции пользователя

Цель первого метода, getCurrentPosition() , должна быть вам понятна — он получает позицию устройства пользователя.

 navigator.geolocation.getCurrentPosition(() => {})

Выбранные позиции доступны в coords и ​​отметке timestamp , при этом coords являются объектом Coordinates . По умолчанию объект « Coordinates » определяется следующими свойствами:

• accuracy точность положения в метрах
• altitude высота положения
• accuracy точность высоты положения в метрах
• heading , в котором движется устройство, выраженное в градусах. (0 = север, восток = 90, юг = 180, запад = 270)
• latitude широта положения
• longitude долгота положения
• speed скорость, с которой движется устройство, выраженная в метрах в секунду

Как вы могли догадаться, устройства, на которых отсутствует надлежащее оборудование для отслеживания, просто не получат всех преимуществ этого API, поэтому возвращают только некоторые значения и оставляют другие значения null . Например, на настольном компьютере мы можем получить только значения longitude , latitude и accuracy , в то время как другие запрошенные значения ( heading , speed ) возвращаются null .

watchPosition() — периодическое получение позиции пользователя

Хотя вышеупомянутый метод в основном используется для получения местоположения пользователя, он не так полезен для приложений, которые полагаются на точное местоположение пользователя, поскольку известно, что ваши пользователи часто находятся в движении. Именно тогда нам нужен метод watchPosition() для navigator.geolocation , который зарегистрирует функцию обратного вызова для периодических обновлений позиции пользователя.

 navigator.geolocation.watchPosition (позиция => {
    console.log(позиция)
})

Метод watchPosition возвращает уникальный id транзакции, который можно использовать для прекращения получения обновлений местоположения. Используя уникальный id и метод navigator.geolocation.clearWatch() , мы можем перестать следить за положением:

 const id = navigator.geolocation.watchPosition (позиция => {
    console.log(позиция)
})

// остановить просмотр через 10 секунд
setTimeout(() => {
  navigator.geolocation.clearWatch(id)
}, 10*1000)

Обработка ошибок

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

 функция locationError(ошибка) {
    переключатель (код ошибки) {
        случай ошибки.PERMISSION_DENIED:
            return "Пользователь отклонил запрос на геолокацию.";
        случай ошибки.POSITION_UNAVAILABLE:
            return "Информация о местоположении в настоящее время недоступна.";
        случай ошибки.TIMEOUT:
            return "Время ожидания запроса на определение местоположения пользователя истекло.";
        случай ошибки.UNKNOWN_ERROR:
            return "Произошла неизвестная ошибка.";
    }
}

Кроме того, вы можете проверить это в консоли:

 navigator.geolocation.getCurrentPosition (позиция => {
  console.log(позиция)
}, ошибка => {
	console.error(ошибка)
})

Это вернет свойство code , где 1 означает, что разрешение пользователя было отклонено, 2 означает, что позиция пользователя в настоящее время недоступна, а 3 означает, что время запроса истекло.

Помимо основ

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

Тайм-аут при поиске координат

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

• timeout количество миллисекунд до истечения срока действия операции.
• maxiumAge максимальный возраст позиции, кэшированной браузерами, измеряется в миллисекундах.
• enableHighAccuracy — не требующий пояснений параметр true/false, который может потребовать больше времени и ресурсов для получения более точных позиций.

 navigator.geolocation.getCurrentPosition (позиция => {
  console.log(позиция)
}, ошибка => {
	console.error(ошибка)
}, {
  тайм-аут: 2000,
  максимальный возраст: 20000,
  enableHighAccuracy: правда
})

Отображение положения пользователя на Google Maps

Используя Google Maps API, мы можем отображать позицию пользователя на карте Google.

 <script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

Для демонстрации API Карт Google в Интернете мы рекомендуем это руководство от Google: Отображение положения пользователя или устройства на Картах. В руководстве вы найдете базовый HTML-код с интегрированным API Карт Google.

В качестве альтернативы используйте react-geolocated для вашего PWA на основе React.

В случае, если вы не готовы к этому, react-geolocated — это также отличный способ быстро и легко интегрировать геолокацию с вашим приложением на основе React. Просто установите модуль поверх существующего PWA, используя:

 npm установить реакцию с геолокацией --save

После чего выполните действия, указанные в официальной ссылке GitHub, и у вас должно получиться функциональное PWA со встроенной геолокацией.

Вывод

Вот и все, что касается процесса интеграции геолокации вашего PWA. Если какая-либо часть урока покажется вам сложной, не стесняйтесь задать нам вопрос ниже!

Для продавцов Magento, которые ищут надежное решение, мы предлагаем комплексное и экономичное решение Magento PWA для вашего бизнеса.