HTML Navigator product प्रॉपर्टी: ब्राउज़र इंजन नाम

HTML Navigator product प्रॉपर्टी ब्राउज़र के रेंडरिंग इंजन का नाम लौटाती है। ऐतिहासिक कारणों से, लगभग सभी आधुनिक ब्राउज़र "Gecko" लौटाते हैं (फायरफॉक्स का इंजन), भले ही वे अलग इंजन का उपयोग करते हों (Chrome/Edge: Blink, Safari: WebKit)। यह प्रॉपर्टी विरासत संगतता के लिए है और वास्तविक इंजन पहचान के लिए विश्वसनीय नहीं है।

सिंटैक्स (Syntax)

navigator.product

उदाहरण (Example)

यह उदाहरण product प्रॉपर्टी दिखाता है और वास्तविक इंजन पहचान के तरीके बताता है।

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      color: #000;
      height: 100vh;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
      text-align: center;
      font-family: Arial, sans-serif;
    }
    .btn {
      background: #db133a;
      border: none;
      height: 2.5rem;
      border-radius: 20px;
      width: 330px;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1.5rem auto;
      font-size: 1rem;
      transition: background 0.3s;
    }
    .btn:hover { background: #b01030; }
    .show {
      font-size: 1.2rem;
      color: #fff;
      margin-top: 1rem;
      background: rgba(0,0,0,0.3);
      padding: 1.5rem;
      border-radius: 10px;
      display: inline-block;
      min-width: 300px;
      text-align: left;
    }
    .engine-name {
      font-size: 1.8rem;
      font-weight: bold;
      color: #ffeb3b;
      font-family: monospace;
    }
    .engine-table {
      margin: 2rem auto;
      max-width: 600px;
      text-align: left;
      background: rgba(255,255,255,0.1);
      padding: 1.5rem;
      border-radius: 10px;
      color: #fff;
    }
    .engine-table table { width: 100%; border-collapse: collapse; }
    .engine-table th, .engine-table td { padding: 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.2); }
    .engine-table th { color: #ffeb3b; }
  </style>
</head>
<body>
  <h1>HTML Navigator product प्रॉपर्टी डेमो</h1>
  <button class="btn" onclick="showEngine()">ब्राउज़र इंजन नाम दिखाएं</button>
  <div class="show" id="engineDisplay"></div>

  <div class="engine-table">
    <h3>🔍 वास्तविक ब्राउज़र इंजन पहचान</h3>
    <table>
      <thead>
        <tr><th>ब्राउज़र</th><th>वास्तविक इंजन</th><th>navigator.product</th><th>पहचान विधि</th></tr>
      </thead>
      <tbody>
        <tr><td>Chrome / Edge (79+)</td><td>Blink</td><td>Gecko</td><td>userAgent में "Chrome/" या "Edg/"</td></tr>
        <tr><td>Firefox</td><td>Gecko</td><td>Gecko</td><td>userAgent में "Firefox/"</td></tr>
        <tr><td>Safari</td><td>WebKit</td><td>Gecko</td><td>userAgent में "Safari/" (बिना Chrome)</td></tr>
        <tr><td>Opera (नया)</td><td>Blink</td><td>Gecko</td><td>userAgent में "OPR/"</td></tr>
        <tr><td>IE / Edge (Legacy)</td><td>Trident / EdgeHTML</td><td>Gecko</td><td>userAgent में "Trident/" या "Edge/"</td></tr>
      </tbody>
    </table>
    <p><strong>निष्कर्ष:</strong> navigator.product विश्वसनीय नहीं है। userAgent या फीचर डिटेक्शन का उपयोग करें।</p>
  </div>

  <script>
    function showEngine() {
      const product = navigator.product;
      const userAgent = navigator.userAgent;
      
      // वास्तविक इंजन का पता लगाएं
      let realEngine = 'अज्ञात';
      if (userAgent.includes('AppleWebKit/') && userAgent.includes('Chrome/') && !userAgent.includes('Edg/')) {
        realEngine = 'Blink (Chrome/Chromium)';
      } else if (userAgent.includes('Edg/')) {
        realEngine = 'Blink (Edge)';
      } else if (userAgent.includes('Firefox/')) {
        realEngine = 'Gecko (Firefox)';
      } else if (userAgent.includes('AppleWebKit/') && !userAgent.includes('Chrome/')) {
        realEngine = 'WebKit (Safari)';
      } else if (userAgent.includes('Trident/')) {
        realEngine = 'Trident (IE)';
      } else if (userAgent.includes('Edge/')) {
        realEngine = 'EdgeHTML (Legacy Edge)';
      }
      
      document.getElementById('engineDisplay').innerHTML = `
        <p>navigator.product: <span class="engine-name">${product}</span></p>
        <p>पता चला वास्तविक इंजन: <span class="engine-name">${realEngine}</span></p>
        <p><small>userAgent: ${userAgent.substring(0, 80)}...</small></p>
      `;
    }
  </script>
</body>
</html>

आउटपुट (Output)

"ब्राउज़र इंजन नाम दिखाएं" बटन पर क्लिक:

परिणाम (लगभग हमेशा "Gecko"):

तकनीकी विवरण

क्यों "Gecko"?

नेटस्केप/मोज़िला के Gecko इंजन ने 2000 के दशक की शुरुआत में वेब मानकों का नेतृत्व किया। अन्य ब्राउज़र्स ने संगतता के लिए "Gecko" घोषित किया ताकि वेबसाइट्स उन्हें "मानक-अनुपालक" मानें और उन्नत फीचर्स सक्षम करें। यह User-Agent स्ट्रिंग में "Mozilla/5.0" और "like Gecko" टोकन के समान पैटर्न है।

मानक विनिर्देश

HTML Living Standard के अनुसार, navigator.product को संगतता के लिए "Gecko" लौटाना चाहिए।

वास्तविक इंजन पहचान के विश्वसनीय तरीके

1. User-Agent पार्सिंग (क्लाइंट-साइड)

function getEngine() {
  const ua = navigator.userAgent;
  if (ua.includes('Edg/')) return 'Blink (Edge)';
  if (ua.includes('Chrome/') || ua.includes('CriOS/')) return 'Blink (Chrome)';
  if (ua.includes('Firefox/') || ua.includes('FxiOS/')) return 'Gecko (Firefox)';
  if (ua.includes('Safari/') && !ua.includes('Chrome/')) return 'WebKit (Safari)';
  if (ua.includes('Trident/') || ua.includes('MSIE')) return 'Trident (IE)';
  return 'अज्ञात';
}

2. User-Agent Client Hints (आधुनिक, संरचित)

if ('userAgentData' in navigator) {
  const brands = navigator.userAgentData.brands;
  // brands में ब्रांड और संस्करण की सरणी होती है
  // उदा: [{brand: "Chromium", version: "120"}, {brand: "Google Chrome", version: "120"}]
  // इंजन निष्कर्ष: Chromium → Blink, WebKit → WebKit, Gecko → Gecko
}

3. फीचर डिटेक्शन (सर्वोत्तम - इंजन के बजाय क्षमता जांचें)

// इंजन जांचने के बजाय, आवश्यक फीचर जांचें
const supportsWebP = document.createElement('canvas').toDataURL('image/webp').startsWith('data:image/webp');
const supportsAVIF = document.createElement('canvas').toDataURL('image/avif').startsWith('data:image/avif');
const supportsWebGL2 = !!document.createElement('canvas').getContext('webgl2');

संबंधित प्रॉपर्टीज

ब्राउज़र समर्थन

सभी ब्राउज़र (Chrome 1+, Firefox 1+, Safari 1+, Edge 12+, IE 4+, Opera 3+)।