Meilleure façon de déterminer les paramètres régionaux de l'utilisateur dans le navigateur

J'ai un site Web (Flash) localisé dans une douzaine de langues et je veux définir automatiquement une valeur par défaut en fonction des paramètres du navigateur de l'utilisateur afin de minimiser les étapes pour accéder au contenu.

Pour info, je ne peux pas utiliser de scripts serveur en raison de restrictions de proxy, donc je suppose que JavaScript ou ActionScript serait approprié pour résoudre le problème.

Des questions:

1. Quelle serait la meilleure méthode pour «deviner» les paramètres régionaux de l'utilisateur?

2. Existe-t-il des classes / fonctions simples existantes qui pourraient m'aider (pas de bundles de localisation complexes)? Spécialement pour décomposer toutes les langues possibles en un plus petit nombre (les traductions que j'ai) de manière intelligente.

3. Jusqu'à quel point puis-je faire confiance à une telle solution?

4. D'autres solutions ou suggestions?

La bonne façon est de regarder l'en - tête HTTP Accept-Language envoyé au serveur. Il contient la liste ordonnée et pondérée des langues que l'utilisateur a configuré pour préférer son navigateur.

Malheureusement, cet en-tête n'est pas disponible pour la lecture à l'intérieur de JavaScript; tout ce que vous obtenez est navigator.language, qui vous indique quelle version localisée du navigateur Web a été installée. Ce n'est pas nécessairement la même chose que la ou les langues préférées de l'utilisateur. Sur IE, vous obtenez à la place systemLanguage(langue installée du système d'exploitation), browserLanguage(identique à language) et userLanguage(région du système d'exploitation configurée par l'utilisateur), qui sont tous également inutiles.

Si je devais choisir entre ces propriétés, je reniflerais d' userLanguageabord, en retombant languageet seulement après cela (si celles-ci ne correspondaient à aucune langue disponible) en regardant browserLanguageet enfin systemLanguage.

Si vous pouvez mettre un script côté serveur ailleurs sur le net qui lit simplement l'en-tête Accept-Language et le recrache sous forme de fichier JavaScript avec la valeur d'en-tête dans la chaîne, par exemple:

var acceptLanguage= 'en-gb,en;q=0.7,de;q=0.3';

vous pouvez alors inclure un <script src> pointant vers ce service externe dans le HTML et utiliser JavaScript pour analyser l'en-tête de la langue. Cependant, je ne connais aucun code de bibliothèque existant, car l'analyse en langage accepté est presque toujours effectuée côté serveur.

Quoi que vous finissiez par faire, vous aurez certainement besoin d'un remplacement par l'utilisateur car il devinera toujours mauvais pour certaines personnes. Il est souvent plus facile de mettre le paramètre de langue dans l'URL (par exemple, http: //www.example.com/en/site vs http: //www.example.com/de/site) et de laisser l'utilisateur cliquer liens entre les deux. Parfois, vous voulez une URL unique pour les deux versions linguistiques, auquel cas vous devez stocker le paramètre dans les cookies, mais cela peut confondre les agents utilisateurs sans prise en charge des cookies et des moteurs de recherche.

Sur Chrome et Firefox 32+, navigator.languages ​​contient un tableau de paramètres régionaux par ordre de préférence de l'utilisateur et est plus précis que navigator.language, mais pour le rendre rétrocompatible (Testé Chrome / IE / Firefox / Safari), puis utilisez ce:

function getLang()
{
 if (navigator.languages != undefined) 
 return navigator.languages[0]; 
 else 
 return navigator.language;
}

Cet article suggère les propriétés suivantes de l' objet navigateur du navigateur :

• navigator.language (Netscape - Localisation du navigateur)
• navigator.browserLanguage (spécifique à IE - Langue localisée du navigateur)
• navigator.systemLanguage (Spécifique à IE - Système d'exploitation Windows - Langue localisée)
• navigator.userLanguage

Roulez-les dans une fonction javascript et vous devriez pouvoir deviner la bonne langue, dans la plupart des cas. Assurez-vous de vous dégrader gracieusement, alors ayez une div contenant vos liens de choix de langue, afin que s'il n'y a pas de javascript ou que la méthode ne fonctionne pas, l'utilisateur puisse toujours décider. Si cela fonctionne, cachez simplement le div.

Le seul problème avec cela du côté client est que soit vous fournissez toutes les langues au client, soit vous devez attendre que le script soit exécuté et détecté la langue avant de demander la bonne version. Peut-être que servir la version linguistique la plus populaire par défaut irriterait le moins de gens.

Edit: je seconderais la suggestion de cookie d'Ivan, mais assurez-vous que l'utilisateur peut toujours changer la langue plus tard; tout le monde ne préfère pas la langue par défaut de son navigateur.

En combinant les multiples façons dont les navigateurs utilisent pour stocker la langue de l'utilisateur, vous obtenez cette fonction:

const getNavigatorLanguage = () => {
  if (navigator.languages && navigator.languages.length) {
    return navigator.languages[0];
  } else {
    return navigator.userLanguage || navigator.language || navigator.browserLanguage || 'en';
  }
}

Nous vérifions d'abord le navigator.languagestableau pour son premier élément.
Ensuite, nous obtenons soit navigator.userLanguageou navigator.language.
Si cela échoue, nous obtenons navigator.browserLanguage.
Enfin, nous l'avons défini 'en'si tout le reste a échoué.

Et voici le one-liner sexy:

const getNavigatorLanguage = () => (navigator.languages && navigator.languages.length) ? navigator.languages[0] : navigator.userLanguage || navigator.language || navigator.browserLanguage || 'en';

Il y a une différence entre les langues préférées de l'utilisateur et les paramètres régionaux du système / navigateur.

Un utilisateur peut configurer les langues préférées dans le navigateur, et celles-ci seront utilisées navigator.language(s)et utilisées lors de la demande de ressources d'un serveur, pour demander du contenu en fonction d'une liste de priorités linguistiques.

Cependant, les paramètres régionaux du navigateur décideront de la façon de rendre le nombre, la date, l'heure et la devise. Ce paramètre est probablement la langue la mieux classée, mais il n'y a aucune garantie. Sur Mac et Linux, les paramètres régionaux sont décidés par le système indépendamment des préférences de langue de l'utilisateur. Sur Windows, il peut être choisi parmi les langues de la liste préférée sur Chrome.

En utilisant Intl ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl ), les développeurs peuvent remplacer / définir les paramètres régionaux à utiliser pour rendre ces choses, mais il y a des éléments qui ne peut pas être remplacé, comme le <input type="date">format.

Pour extraire correctement cette langue, le seul moyen que j'ai trouvé est:

(new Intl.NumberFormat()).resolvedOptions().locale

( Intl.NumberFormat().resolvedOptions().localesemble également fonctionner)

Cela créera une nouvelle instance de NumberFormat pour les paramètres régionaux par défaut, puis relira les paramètres régionaux de ces options résolues.

J'ai fait un peu de recherche à ce sujet et j'ai résumé mes résultats jusqu'à présent dans le tableau ci-dessous

La solution recommandée consiste donc à écrire un script côté serveur pour analyser l'en- Accept-Languagetête et le transmettre au client pour définir la langue du site Web. Il est étrange que la raison pour laquelle le serveur soit nécessaire pour détecter la préférence de langue du client, mais c'est comme ça à partir de maintenant.Il existe d'autres hacks différents pour détecter la langue, mais la lecture de l'en- Accept-Languagetête est la solution recommandée selon ma compréhension.

Vous pouvez également essayer d'obtenir la langue du document qui devrait être votre premier port d'escale, puis revenir à d'autres moyens car les gens voudront souvent que leur langue JS corresponde à la langue du document.

HTML5:

document.querySelector('html').getAttribute('lang')

Héritage:

document.querySelector('meta[http-equiv=content-language]').getAttribute('content')

Aucune véritable source n'est nécessairement fiable à 100%, car les gens peuvent simplement mettre dans la mauvaise langue.

Il existe des bibliothèques de détection de langue qui peuvent vous permettre de déterminer la langue en fonction de son contenu.

J'ai utilisé toutes les réponses et créé une solution sur une seule ligne:

const getLanguage = () => navigator.userLanguage || (navigator.languages && navigator.languages.length && navigator.languages[0]) || navigator.language || navigator.browserLanguage || navigator.systemLanguage || 'en';

console.log(getLanguage());

Vous avez dit que votre site Web avait Flash, puis, comme autre option, vous pouvez obtenir la langue du système d'exploitation avec flash.system.Capabilities.language- voir Comment déterminer la langue du système d'exploitation dans le navigateur pour deviner les paramètres régionaux du système d'exploitation.