ब्राउज़र में OS कैसे निर्धारित करें

ब्राउज़र में होस्ट सिस्टम का पता लगाएं

यदि आप एक प्रगतिशील वेब ऐप लिख रहे हैं और यह निर्धारित करना चाहते हैं कि किस प्रकार का सिस्टम एजेंट को होस्ट कर रहा है, तो एक साधारण एपीआई आपकी मदद कर सकता है।

मैं स्पष्ट रूप से इस लेख में कोड के साथ केवल आधुनिक वेब ऐप्स को लक्षित कर रहा हूं। ओएस या ब्राउज़र संस्करण का पता लगाना अतीत में बेहद नाजुक था, इसलिए "नेविगेटर" पर उपलब्ध नए एपीआई ऐसे कार्यों के लिए एक मजबूत समाधान प्रदान करते हैं, फिर भी केवल आधुनिक ब्राउज़रों में ही उपलब्ध हैं।

मंच की जाँच

निम्नलिखित कोड आपको दिखाता है कि जावास्क्रिप्ट के माध्यम से पर्यावरण को विश्वसनीय रूप से कैसे निर्धारित किया जाए। यह "नेविगेटर" तक पहुंचता है, जो विंडो पर उपलब्ध ऑब्जेक्ट है जो आपके वेब ऐप को उत्तरोत्तर बढ़ाने के लिए एपीआई का एक पूरा सेट प्रदान करता है।

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

जैसा कि आप देख सकते हैं, यह निर्धारित करने का तर्क कि आपके एप्लिकेशन को किस प्रकार का सिस्टम होस्ट कर रहा है, बहुत सीधा है और केवल कोड की कुछ पंक्तियों की आवश्यकता है।

उपयोग के मामलों के उदाहरण

होस्ट के OS को निर्धारित करने के लिए एक सामान्य उपयोग का मामला आपके कोड में अलग-अलग कीबोर्ड शॉर्ट्स और बाद में "kbd" -टैग प्रदान करना है। उदाहरण के लिए, macOS "कमांड" -की का उपयोग करता है, जबकि विंडोज और लिनक्स बहुत सारे शॉर्टकट के लिए "कंट्रोल" -की का उपयोग करते हैं।

आप अपने UI की स्टाइलिंग को होस्ट सिस्टम से मूल UI के साथ बेहतर ढंग से संरेखित करने के लिए बदल सकते हैं, बस एक और उदाहरण का नाम देने के लिए।