כיצד לקבוע מערכת הפעלה בדפדפן

זיהוי מערכת מארח בדפדפן

אם אתה כותב אפליקציית אינטרנט מתקדמת וברצונך לקבוע איזה סוג של מערכת מארחת את הסוכן, 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 ולינוקס משתמשות במקש "Control" עבור הרבה קיצורי דרך.

אתה יכול גם לשנות את הסגנון של ממשק המשתמש שלך כדי להתיישר טוב יותר עם ממשק המשתמש המקורי מהמערכת המארחת, רק לשם דוגמה נוספת.