Как определить, когда пользователь разрешает местоположение в браузере?

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

  const attemptLocation = () => {
    if ("geolocation" in navigator) {

Возможные сценарии:

  1. В браузере появляется всплывающее окно, и пользователь сразу разрешает местоположение - Works !
  2. Пользователь нажимает «Заблокировать», и местоположение недоступно. Затем пользователь понимает, что он не может продолжить, поэтому он нажимает значок местоположения в браузере и allow местоположение.

Как обнаружить это изменение, которое они сделали с block на allow в браузере, потому что прямо сейчас

  • В Chrome: страница не обнаруживает изменение на allow, и пользователи получают застрявший.

  • В Firefox: если пользователь не нажмет remember this selection браузер продолжает задавать один и тот же allow or not вопрос, даже когда пользователь сказал allow и обновил страницу.

  • В Edge: когда пользователь разрешает, местоположение обновляется и works, но снова только после обновления страницы и начала заново.

Чтобы упростить вопрос: После загрузки страницы пользователь, который заблокировал местоположение, переходит с блокировки на разрешение местоположения, как я могу предупредить («спасибо, что изменили местоположение с блокировки на разрешение местоположения»)?

Я не уверен, что вопрос здесь

apokryfos 31.10.2022 18:04

@apokryfos Как определить, когда пользователь обновился с block на allow местоположение в браузере? Они делают это не в приложении, а в браузере.

Kal 31.10.2022 18:06

Пробовали ли вы PermissionStatus: событие изменения

Gabriele Petrioli 31.10.2022 18:13

@GabrielePetrioli Кажется, это ответ моего двухминутного теста. Он реагирует на изменения местоположения, и я вижу в console.info

Kal 31.10.2022 18:16

@GabrielePetrioli, вы должны опубликовать это как ответ, прежде чем это сделает кто-то другой. Не могу найти хороший дубликат (должен быть там)

0stone0 31.10.2022 18:22

@ 0stone0 stackoverflow.com/questions/7463367/… кажется связанным, но не дубликатом.

Bergi 31.10.2022 18:36
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
6
227
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

В вашем приложении, используя useEffect(), когда ваше приложение монтируется, проверьте это:

if ("geolocation" in navigator) {
      console.info("Available");
   } else {
      console.info("Not Available");
   }

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

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

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

Kal 31.10.2022 17:58

Разве вы не поместили бы navigator в массив зависимостей для useEffect?

dmikester1 31.10.2022 18:10

Конечно, я могу попробовать

Kal 31.10.2022 18:18
Ответ принят как подходящий

Благодаря комментарию @GabrielePetrioli. В приведенном ниже коде используется navigator.permissions.queryСобытие изменения статуса разрешений

Я проверяю, было ли предоставлено разрешение, и обновляю приложение, вызывая функцию, которая обновляет местоположение.

const [locationAccess, setLocationAccess] = useState(false);//user changes in browser
...
      //check user location changes in navigator
      navigator.permissions.query({ name: 'geolocation' }).then((permissionStatus) => {
       
          permissionStatus.onchange = () => {
          setLocationAccess(permissionStatus.state= = "granted")

          if (permissionStatus.state= = "granted") {
              attemptLocation();
            }
          };
        });

  

Пожалуйста, удалите тернарный оператор и нас setLocationAccess(permissionStatus.state= = "granted")

0stone0 31.10.2022 18:43

Другие вопросы по теме