How to detect browser country in client site?
There are multiple options to determine the locale. In descending order of usefulness, these are:
- Look up the IP address, with an IP geolocation service like Maxmind GeoIP. This is the location the request is coming from, i.e. if an American vacations in Italy and uses a Swedish VPN, it will return
Sweden
.
It can only be done with the help of the server. The main advantage is that it's very reliable. The accuracy will be country or region for free services, city or region for paid ones.
- Look up the precise location on Earth from the browser with the geolocation API. An American vacationing in Italy using a Swedish VPN will register as Italy.
The answer will be very precise, usually no more than 10m off. In principle, it could work client-side, although you may want to perform the coordinate -> country lookup on the server. The main disadvantages are that not all devices have either GPS or WiFi position, and that it generally requires explicit user consent.
- Look in the
Accept-Language
header on the server (or with the help of the server), and extract the locale information. An American vacationing in Italy using a Swedish VPN will register as USA.
The downside is that this is a setting that's extremely easy to change. For instance, English speakers around the world may prefer en-US
settings in order to avoid machine-translated text. On modern browsers (as of writing not IE/Edge, and only Safari 11+), you can also request navigator.languages.
navigator.language
is the first element of thenavigator.languages
header. All of the considerations of navigator.languages apply. On top, this information can sometimes be just the language without any locale (i.e.en
instead ofen-US
).Use another, third-party service. For instance, if the user signs in via a Single-Sign-On system such Facebook connect, you can request the hometown of the user. This information is typically very unreliable, and requires a third party.
Another option could be using the (internationalization API)
console.log(Intl.DateTimeFormat().resolvedOptions().timeZone)