كيفية تحديد نظام التشغيل في المتصفح

كشف النظام المضيف في المتصفح

إذا كنت تكتب تطبيق ويب تقدميًا وتريد تحديد نوع النظام الذي يستضيف الوكيل ، فيمكن أن تساعدك واجهة برمجة تطبيقات بسيطة.

أنا أستهدف بشكل صريح فقط تطبيقات الويب الحديثة التي تحتوي على الشفرة الواردة في هذه المقالة. كان اكتشاف نظام التشغيل أو إصدار المتصفح هشًا بشكل ملحوظ في الماضي ، لذا فإن واجهات برمجة التطبيقات الجديدة المتوفرة في "الملاح" توفر حلاً قويًا لمثل هذه المهام ، ومع ذلك فهي متوفرة فقط في المتصفحات الحديثة.

فحص المنصة

يوضح لك الكود التالي كيفية تحديد البيئة بشكل موثوق عبر جافا سكريبت. يصل إلى "الملاح" ، وهو كائن متاح في النافذة يوفر مجموعة كاملة من واجهات برمجة التطبيقات لتحسين تطبيق الويب الخاص بك بشكل تدريجي.

/**
 * 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 مفتاح "الأوامر" ، بينما يستخدم نظاما التشغيل Windows و Linux مفتاح "التحكم" للعديد من الاختصارات.

يمكنك أيضًا تغيير تصميم واجهة المستخدم الخاصة بك لتتماشى بشكل أفضل مع واجهة المستخدم الأصلية من النظام المضيف ، فقط لتسمية مثال آخر.