Google Chrome फ़्रेम के साथ पुराने ब्राउज़र में HTML5 को रेंडर करना

परिचय

HTML5, वेब डेवलपर टूलबॉक्स में कई नए टूल जोड़ता है. इनमें ये टूल शामिल हैं:

  • नए और ज़्यादा बेहतर JavaScript API
  • वेक्टर ग्राफ़िक के लिए SVG
  • 2D और WebGL 3D ग्राफ़िक के लिए कैनवस
  • गोल कोने, ग्रेडिएंट वगैरह के लिए सीएसएस3.
  • ज़्यादा जानकारी देने वाला मार्कअप

यह सूची पूरी नहीं है. वेब प्लैटफ़ॉर्म का काफ़ी विकास हुआ है और पुराने ब्राउज़र और आधुनिक ब्राउज़र के बीच का अंतर हर दिन बढ़ रहा है.
अब हर मुख्य डेस्कटॉप ब्राउज़र के नए वर्शन में, HTML5 के अहम हिस्सों का इस्तेमाल किया जा सकता है. हालांकि, पुराने ब्राउज़र का इस्तेमाल करने से, आज की नई और बेहतर सुविधाओं को अपनाने में समस्या आती है.

Google Chrome Frame की मदद से, आज ही बेहतरीन HTML5 पेज बनाए जा सकते हैं. साथ ही, पुराने ब्राउज़र का इस्तेमाल करने वाले लोग भी आपका कॉन्टेंट देख पाएंगे.

Google Chrome Frame क्या है

Google Chrome Frame, Internet Explorer के लिए एक प्लग-इन है. यह Google Chrome के रेंडरिंग इंजन का इस्तेमाल करके, पूरे ब्राउज़र कैनवस को रेंडर करने की सुविधा देता है. यह Chrome में मिलने वाली सभी HTML5 सुविधाओं के साथ काम करता है. साथ ही, यह Internet Explorer के उपयोगकर्ता अनुभव में आसानी से इंटिग्रेट हो जाता है. Chrome Frame, Internet Explorer 6, 7, 8, और 9 के लिए उपलब्ध है. Chrome Frame, IE6 से IE8 जैसे पुराने ब्राउज़र के साथ काम करने पर ज़्यादा मददगार होता है. हालांकि, अगर आपको अपने ऐप्लिकेशन के लिए WebGL की ज़रूरत है, तो IE9 के उपयोगकर्ताओं के लिए Chrome Frame की ज़रूरत पड़ सकती है.

HTML5 पॉलीफ़िल की मदद से, नए ब्राउज़र पर आसानी से ट्रांज़िशन किया जा सकता है. माफ़ करें, ये एजेंट हर सुविधा को एमुलेट नहीं कर सकते. साथ ही, ये पुराने ब्राउज़र में आपके पेज को धीमा कर देते हैं. ये ब्राउज़र, नई जनरेशन के ब्राउज़र से पहले से ही धीमे होते हैं.

भले ही आपकी साइट को HTML5 की सुविधाओं की ज़रूरत न हो, फिर भी Chrome Frame का इस्तेमाल करके बेहतर उपयोगकर्ता अनुभव दिया जा सकता है. जिन उपयोगकर्ताओं के डिवाइस पर यह पहले से इंस्टॉल है उनके लिए, आम तौर पर रेंडरिंग तेज़ी से होती है. साथ ही, वे उन सुविधाओं का ऐक्सेस पा सकते हैं जो पुराने ब्राउज़र पर काम नहीं करती हैं. हालांकि, अब भी उन उपयोगकर्ताओं के लिए पुराने ब्राउज़र का इस्तेमाल किया जा सकता है जिनकी मशीन पर Chrome Frame नहीं है.

ऑप्ट इन करना

एचटीएमएल मेटाटैग जोड़कर या एचटीटीपी हेडर का इस्तेमाल करके, Chrome Frame को पेज रेंडर करने के लिए चालू किया जा सकता है. यह बहुत ज़रूरी है. इसका मतलब है कि अगर किसी उपयोगकर्ता के पास Chrome Frame इंस्टॉल है, तो कोई भी साइट काम करना बंद नहीं करेगी. इसकी वजह यह है कि प्लग इन या डिफ़ॉल्ट रेंडरिंग का इस्तेमाल करने का पूरा कंट्रोल साइट के पास होता है. नीचे दिए गए कोड स्निपेट से पता चलता है कि कोई साइट, Chrome Frame से रेंडर होने के लिए कैसे ऑप्ट-इन कर सकती है.

पहला विकल्प: एचटीटीपी-हेडर (इसे अपने एचटीटीपी सर्वर (उदाहरण के लिए, Apache) कॉन्फ़िगरेशन) में जोड़ा जा सकता है:

X-UA-Compatible: chrome=1

दूसरा तरीका: मेटा-टैग (इसे अपने एचटीएमएल <head> सेक्शन में चिपकाएं)

<meta http-equiv="X-UA-Compatible" content="chrome=1">

अपनी साइट में इनमें से किसी एक को जोड़ने के बाद, पेजों को Chrome Frame का इस्तेमाल करके रेंडर किया जाता है. हालांकि, इसके लिए ज़रूरी है कि उपयोगकर्ता की मशीन पर Chrome Frame इंस्टॉल हो.

Google Chrome फ़्रेम के लिए प्रॉम्प्ट करना

पुराने ब्राउज़र के लिए सहायता पूरी तरह से बंद करने का फ़ैसला कई वजहों से लिया जा सकता है. इनमें ये वजहें शामिल हैं:

  • आपकी साइट में HTML5 वीडियो, कैनवस, WebGL या CSS3 जैसी आधुनिक सुविधाएं होनी चाहिए
  • पुराने ब्राउज़र पर डेवलपमेंट में ज़्यादा समय लगता है
  • नई सुविधाओं को डेवलप करने में लगने वाले समय को कम करना

Chrome Frame की मदद से, पुराने ब्राउज़र का इस्तेमाल करने वाले लोगों को आपकी साइट का इस्तेमाल करने का विकल्प मिल सकता है.

Chrome Frame, होस्ट के User-Agent हेडर को "chromeframe" स्ट्रिंग के साथ जोड़कर, यह बताता है कि वह उपलब्ध है. ज़्यादा जानकारी के लिए, Chrome Frame उपयोगकर्ता एजेंट देखें.

इस टोकन को ढूंढने के लिए, सर्वर-साइड डिटेक्शन का इस्तेमाल करें. साथ ही, यह तय करें कि किसी पेज के लिए Chrome Frame का इस्तेमाल किया जा सकता है या नहीं. अगर Chrome फ़्रेम मौजूद है, तो ज़रूरी मेटा टैग डाला जा सकता है. अगर नहीं, तो उपयोगकर्ताओं को उस पेज पर रीडायरेक्ट किया जा सकता है जिस पर Chrome फ़्रेम इंस्टॉल करने का तरीका बताया गया हो. सर्वर-साइड स्निफ़िंग के विकल्प के तौर पर, CFInstall.js स्क्रिप्ट का इस्तेमाल करके Chrome Frame का पता लगाया जा सकता है. साथ ही, उपयोगकर्ताओं को ब्राउज़र को रीस्टार्ट किए बिना प्लग-इन इंस्टॉल करने के लिए कहा जा सकता है. स्क्रिप्ट का इस्तेमाल करना आसान है. अपने पेज में स्क्रिप्ट टैग और वैकल्पिक स्टाइल जोड़ें, जैसा कि नीचे दिए गए उदाहरण में बताया गया है:

<html>
<body>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>

<style>
/*
CSS rules to use for styling the overlay:
    .chromeFrameOverlayContent
    .chromeFrameOverlayContent iframe
    .chromeFrameOverlayCloseBar
    .chromeFrameOverlayUnderlay
*/
</style>

<script>
// You may want to place these lines inside an onload handler
CFInstall.check({
mode: "overlay",
destination: "http://www.waikiki.com"
});
</script>
</body>
</html>

खुद से सवाल पूछना

आपके पास खुद लैंडिंग पेज या लेयर बनाने का विकल्प भी होता है. उपयोगकर्ताओं को इस यूआरएल पर भेजें

http://www.google.com/chromeframe/

को IFRAME में डाला जा सकता है.

इंस्टॉलेशन पूरा होने के बाद, उपयोगकर्ताओं को आपकी साइट पर वापस भेजने के लिए, रीडायरेक्ट पैरामीटर जोड़ें:

http://www.google.com/chromeframe/?redirect=http://www.google.com/ Chrome Frame के लैंडिंग पेज पर जाने के बजाय, उपयोगकर्ताओं को सीधे ईयूएलए पर भेजा जा सकता है. इससे, इंस्टॉलेशन की प्रोसेस में एक चरण बच जाता है. http://www.google.com/chromeframe/eula.html

एडमिन के अधिकारों की ज़रूरत नहीं है

उपयोगकर्ता, अपनी मशीनों पर एडमिन के विशेषाधिकार के बिना Chrome Frame इंस्टॉल कर सकते हैं.

Chrome Frame को उपयोगकर्ता के लेवल पर इंस्टॉल करने की सुविधा चालू करने के लिए, user=true पैरामीटर जोड़ें. इसके लिए, नीचे दिया गया तरीका अपनाएं:

http://www.google.com/chromeframe/?user=true

एंटरप्राइज़ इंस्टॉलेशन

एमएसआई इंस्टॉलर का इस्तेमाल करके, कारोबार अपनी पूरी कंपनी में Chrome Frame को डिप्लॉय कर सकते हैं. एमएसआई इंस्टॉलर को यहां से डाउनलोड किया जा सकता है: http://www.google.com/chromeframe/eula.html?msi=true.

Chrome और एंटरप्राइज़ डिप्लॉयमेंट के बारे में ज़्यादा जानने के लिए, http://www.chromium.org/administrators पर जाएं.

बच्चा गोद लेना

yahoo.com, wordpress.com जैसी कई बड़ी वेबसाइटों और Google की कई प्रॉपर्टी ने Google Chrome फ़्रेम का इस्तेमाल शुरू कर दिया है. Chrome Frame की मदद से, उपयोगकर्ताओं को कई साइटों पर मॉडर्न वेब अनुभव मिलता है. साथ ही, साइट लोड होने में लगने वाले समय में भी काफ़ी कमी आती है. webpagetest.org पर जाकर और ब्राउज़र के तौर पर Chrome Frame को चुनकर, यह देखा जा सकता है कि Chrome Frame आपकी साइट को तेज़ी से रेंडर करने में मदद करता है या नहीं.

ज़्यादा जानकारी

ज़्यादा जानकारी के लिए, शुरू करने से जुड़ी गाइड देखें या Google IO 2011 का यह वीडियो देखें