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

माल्टे यूबीएल
माल्टे यूबीएल

शुरुआती जानकारी

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

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

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

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

Google Chrome Frame क्या है

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

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

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

ऑप्ट इन करना

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

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

X-UA-Compatible: chrome=1

विकल्प 2: मेटा-टैग (बस इसे अपने एचटीएमएल <head> सेक्शन में चिपकाएं)

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

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

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

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

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

Chrome Frame आपके पुराने ब्राउज़र के उपयोगकर्ताओं को अब भी आपकी साइट इस्तेमाल करने का तरीका उपलब्ध कराने की रणनीति दे सकता है.

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

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

<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 फ़्रेम लैंडिंग पेज पर जाने के बजाय, आप उपयोगकर्ताओं को सीधे EULA पर भी भेज सकते हैं. इससे इंस्टॉलेशन प्रक्रिया का एक चरण बचाया जा सकेगा. http://www.google.com/chromeframe/eula.html

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

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

Chrome Frame का उपयोगकर्ता लेवल इंस्टॉल करने के लिए, user=true पैरामीटर जोड़ें. ऐसा करने के लिए, यहां बताए गए तरीके का इस्तेमाल करें:

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

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

एंटरप्राइज़, Prime बारे में कंपनी के हिसाब से Chrome Frame इस्तेमाल करने की सुविधा उपलब्ध करा सकते हैं. इसके लिए, इंस्टॉल करने वाले टूल का इस्तेमाल करें: http://www.google.com/chromeframe/eula.html?msi=true.

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

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

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

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

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