Обнаружить хост-систему в браузере
Если вы пишете прогрессивное веб-приложение и хотите определить, в какой системе размещается агент, вам может помочь простой API.
Я явно нацелен только на современные веб-приложения с кодом в этой статье. Определение версии ОС или браузера в прошлом было общеизвестно ненадежным, поэтому новые API, доступные в «навигаторе», обеспечивают надежное решение таких задач, но доступны только в современных браузерах.
Проверка платформы
В следующем коде показано, как надежно определить среду с помощью Javascript. Он обращается к «навигатору», объекту, доступному в окне, который предоставляет полный набор API для постепенного улучшения вашего веб-приложения.
/**
* 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
Как видите, логика определения типа системы, на которой размещено ваше приложение, очень проста и требует всего несколько строк кода.
Примеры вариантов использования
Распространенным вариантом использования для определения ОС хоста является предоставление в коде различных сокращений клавиатуры, а затем тегов «kbd». Например, macOS использует клавишу «Command», тогда как Windows и Linux используют клавишу «Control» для многих ярлыков.
Вы также можете изменить стиль своего пользовательского интерфейса, чтобы он лучше соответствовал собственному пользовательскому интерфейсу хост-системы, просто чтобы назвать еще один пример.