Comment déterminer le système d'exploitation dans le navigateur

Utilisez des API modernes pour récupérer des informations sur le système hôte de votre application Web

Détecter le système hôte dans le navigateur

Si vous écrivez une application Web progressive et souhaitez déterminer quel type de système héberge l'agent, une simple API peut vous aider.

Je ne cible explicitement que les applications Web modernes avec le code de cet article. La détection de la version du système d'exploitation ou du navigateur était notoirement fragile dans le passé, de sorte que les nouvelles API disponibles sur le "navigateur" fournissent une solution robuste pour de telles tâches, mais ne sont disponibles que dans les navigateurs modernes.

Vérification de la plateforme

Le code suivant vous montre comment déterminer de manière fiable l'environnement via Javascript. Il accède au « navigateur », un objet disponible sur la fenêtre qui propose tout un ensemble d'API pour enrichir progressivement votre application web.

/**
 * Retrieve the host platform in a 
 * best-effort way w/ normalized output.
 */
export function getAgentSystem(){
  if(!("navigator" in window)){
    return "unknown";
  }
  
  // Use the modern 'web hints' provied by
  // 'userAgentData' if available, else use
  // the deprecated 'platform' as fallback.
  const platform = (navigator.userAgentData?.platform || navigator.platform)?.toLowerCase();
 
 if(platform.startsWith("win")) return "windows";
 if(platform.startsWith("mac")) return "macos";
 if(platform.startsWith("linux")) return "linux";
 return "unknown";
}

// Just to give you an idea, the following properites
// are options for the legacy 'navigator.platform':
//
// HP-UX
// Linux i686
// Linux armv7l
// Mac68K
// MacPPC
// MacIntel
// SunOS
// Win16
// Win32
// WebTV OS

Comme vous pouvez le voir, la logique pour déterminer quel type de système héberge votre application est très simple et ne nécessite que quelques lignes de code.

Exemples de cas d'utilisation

Un cas d'utilisation courant pour déterminer le système d'exploitation de l'hôte consiste à fournir différents raccourcis clavier et par la suite des balises "kbd" dans votre code. Par exemple, macOS utilise la touche "Commande", tandis que Windows et Linux utilisent la touche "Contrôle" pour de nombreux raccourcis.

Vous pouvez également modifier le style de votre interface utilisateur pour mieux l'aligner sur l'interface utilisateur native du système hôte, pour ne citer qu'un autre exemple.