Hogyan határozzuk meg az operációs rendszert a böngészőben

Használjon modern API-kat a webalkalmazás gazdarendszerével kapcsolatos információk lekéréséhez

Gazdarendszer észlelése a böngészőben

Ha progresszív webalkalmazást ír, és szeretné meghatározni, hogy milyen rendszer tárolja az ügynököt, egy egyszerű API segíthet.

Kifejezetten csak a modern webalkalmazásokat céloztam meg a cikkben szereplő kóddal. Az operációs rendszer vagy a böngésző verziójának észlelése korábban köztudottan törékeny volt, így a „navigátoron” elérhető új API-k robusztus megoldást nyújtanak az ilyen feladatokra, de csak a modern böngészőkben érhetők el.

A platform ellenőrzése

A következő kód megmutatja, hogyan határozhatja meg megbízhatóan a környezetet Javascript segítségével. Hozzáfér a „navigátorhoz”, az ablakban elérhető objektumhoz, amely API-k egész készletét biztosítja a webalkalmazás fokozatos fejlesztéséhez.

/**
 * 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

Amint láthatja, az alkalmazást futtató rendszer logikája nagyon egyszerű, és csak néhány sornyi kódot igényel.

Példák használati esetekre

A gazdagép operációs rendszerének meghatározására általánosan elterjedt eset az, hogy különböző billentyűkódokat, majd „kbd” címkéket adunk meg a kódban. Például a macOS a „Command” billentyűt használja, míg a Windows és a Linux a „Control” billentyűt használja sok gyorsbillentyűhöz.

Módosíthatja a felhasználói felület stílusát is, hogy jobban igazodjon a gazdagép rendszer natív felhasználói felületéhez, csak hogy egy másik példát említsünk.