2

For a web Application, when the user makes a choice of radio button on a previous unrelated field, I am trigerring location for the next step by calling attemptLocation().

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

The possible scenarios are:

  1. A popup appears in browser and user allows the location immediately - Works !
  2. The user clicks on 'Block' and location is not available. The user then realizes that they cannot proceed so they click on the location icon in browser and allow location.

How to detect this change they made from block to allow in the browser because right now

  • In Chrome: the page does not detect change to allow and users get stuck.

  • In Firefox: Unless the user clicks remember this selection the browser keeps asking the same allow or not question even when user said allow and refreshed the page.

  • In Edge: When the user changes to allow, location is updated and works but again only after they refresh the page and start over

To simplify the question: After page loads, the user who blocked location, changes from block to allow location, how can I alert ("thanks for changing from block location to allow location") ?

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
Kal
  • 1,656
  • 4
  • 26
  • 41
  • I'm not sure what the question is here – apokryfos Oct 31 '22 at 17:04
  • @apokryfos How to detect when user updated from `block` to `allow` location in browser? They are not doing that within the application but doing that in browser. – Kal Oct 31 '22 at 17:06
  • 3
    Have you tried the [PermissionStatus: `change` event](https://developer.mozilla.org/en-US/docs/Web/API/PermissionStatus/change_event) – Gabriele Petrioli Oct 31 '22 at 17:13
  • @GabrielePetrioli That seems to be the answer from my 2 mins test. It is responding to location changes and I see in console.log – Kal Oct 31 '22 at 17:16
  • @GabrielePetrioli you should post this as an answer before somebody else does. Can't find a nice duplicate (must be there tho) – 0stone0 Oct 31 '22 at 17:22
  • @0stone0 https://stackoverflow.com/questions/7463367/how-to-call-function-when-user-allows-or-denies-access-to-physical-location seems related but not a duplicate. – Bergi Oct 31 '22 at 17:36

2 Answers2

2

Thanks to @GabrielePetrioli's comment. The code below uses navigator.permissions.queryPermissions Status Change Event

I am checking if permission was granted and updating the application by calling the function which updates location.

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();
            }
          };
        });
Kal
  • 1,656
  • 4
  • 26
  • 41
  • Please remove the ternary operator and us `setLocationAccess(permissionStatus.state=="granted")` – 0stone0 Oct 31 '22 at 17:43
-1

In your App using the useEffect() when your App mounts check this:

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

If it is Available you can then access various geolocation properties. If you cannot access this properties then the user has disabled the location access.

Based on this you can create some states logic using useState() hook to use across your application.

Dev
  • 74
  • 3
  • Thanks Dev. UseEffect only detects if page has mounted or it can retrigger based on a variable that changes. In this case, the user could load the page, go have a coffee and come back and allow location. How can I detect they changed to `allow` location? In other words, I can trigger useEffect but what should trigger that useEffect when user changes to `allow` location? – Kal Oct 31 '22 at 16:58
  • Wouldn't you put `navigator` in the dependencies array for the `useEffect`? – dmikester1 Oct 31 '22 at 17:10
  • Sure, I can give that a try – Kal Oct 31 '22 at 17:18