How to get the correct value for the geolocation permission in JS?

Question

In a React application (made mainly for mobile devices) , I am using the user location on some pages. I need to know each time he access these pages the current state of the location permission.

I'm using some basic code to retrieve this :

if (navigator.geolocation) {
    navigator.permissions.query({ name: "geolocation" })
    .then(function (result) {
         ...// values can be granted, denied or prompt

However when testing, it looks like sometimes the result value is not consistent with the permission I gave. Since the app is used on mobile devices, the use can define this permission in 2 places :

1. Globally for the browser (Safari, Chrome ...)
2. Specially for a website in the browser app

Here a little matrix showing the results I get for each position permission combination:

| Browser authorization | Site authorization | Permission result | Geolocation retrieved |

| --------------------- | ------------------ | ----------------- | --------------------- |

| Allowed               | Allowed            | granted           | yes                   |

| Allowed               | Ask (Then allowed) | granted           | yes                   |

| Allowed               | Ask (Then refused) | granted           | no                    |

| Allowed               | refused            | granted           | no                    |

| Refused               | refused            | prompt            | no                    |

| Refused               | Ask (Then allowed) | prompt            | yes                   |

etc.

I've tried both normal and private navigation.

The main purpose is not to track users, but just to have some coherence between authorization and geolocation stored in DB. For example not having the "granted" status when the app is unable to get a location.

What would be the best way to get the user authorization, especially the one for the given website ?

Tried this on iPhone, Android, using Safari, Chrome.