معرفی
HTML5 ابزارهای بسیار جذاب جدیدی را به جعبه ابزار توسعه دهندگان وب اضافه می کند، از جمله موارد زیر:
- APIهای جدید و قدرتمندتر جاوا اسکریپت
- SVG برای گرافیک برداری
- بوم برای 2 بعدی و با گرافیک WebGL 3D
- CSS3 برای گوشه های گرد، گرادیان و غیره.
- نشانه گذاری رسا تر
البته این فهرست جامع نیست. پلت فرم وب به طور گسترده به جلو حرکت کرده است و شکاف بین مرورگرهای قدیمی و مدرن هر روز بیشتر می شود.
اکنون هر مرورگر اصلی دسکتاپ از بخش‌های قابل‌توجهی از HTML5 در آخرین نسخه پشتیبانی می‌کند، اما مرورگرهای قدیمی که در اطراف هستند، چالشی را برای استفاده از جدیدترین و بهترین ویژگی‌های امروزی ایجاد می‌کنند.
Google Chrome Frame می‌تواند به شما در ساخت صفحات پیشرفته HTML5 کمک کند، در حالی که همچنان به افرادی که از مرورگرهای قدیمی استفاده می‌کنند قادر می‌سازد محتوای شما را ببینند.
Google Chrome Frame چیست؟
Google Chrome Frame یک افزونه برای اینترنت اکسپلورر است که رندر کامل بوم مرورگر را با استفاده از موتور رندر Google Chrome امکان پذیر می کند. از تمام ویژگی‌های HTML5 که در کروم می‌یابید، به‌طور یکپارچه در تجربه کاربری اینترنت اکسپلورر ادغام شده است. Chrome Frame برای اینترنت اکسپلورر 6، 7، 8 و 9 در دسترس است. Chrome Frame مطمئناً هنگام پشتیبانی از مرورگر قدیمی مانند IE6-to-IE8 مفیدتر است، اما اگر به عنوان مثال برای برنامه خود به WebGL نیاز دارید، به Chrome Frame برای برنامه خود نیاز دارید. کاربران IE9 نیز ممکن است مفید باشند.
HTML5 polyfills راه دیگری برای هموار کردن انتقال به مرورگرهای جدیدتر فراهم می کند. متأسفانه، آنها نمی توانند هر ویژگی را شبیه سازی کنند، و سرعت صفحه شما را در مرورگرهای قدیمی، که در حال حاضر کندتر از نسل جدید هستند، کاهش می دهند.
حتی اگر سایت شما به ویژگی های HTML5 نیاز نداشته باشد، استفاده از Chrome Frame همچنان می تواند تجربه کاربری بهتری را ارائه دهد. برای کاربرانی که قبلاً آن را نصب کرده‌اند، رندر معمولاً سریع‌تر است و می‌توانند به ویژگی‌هایی دسترسی داشته باشند که در مرورگرهای قدیمی‌تر پشتیبانی نمی‌شوند. البته هنوز هم می‌توانید تصمیم بگیرید که از مرورگرهای قدیمی برای کاربرانی که Chrome Frame را روی دستگاه خود ندارند، پشتیبانی کنید.
انتخاب کردن
می‌توانید Chrome Frame را فعال کنید تا یک صفحه را با افزودن یک متاتگ HTML یا استفاده از هدر HTTP ارائه کند. این بسیار مهم است. این بدان معنی است که اگر کاربر Chrome Frame را نصب کرده باشد، هیچ سایتی خراب نمی شود، زیرا سایت کنترل کامل استفاده از افزونه یا رندر پیش فرض را دارد. تکه‌های کد زیر نشان می‌دهند که چگونه یک سایت می‌تواند توسط Chrome Frame رندر شود.
گزینه 1: HTTP-Header (شما می توانید این را به پیکربندی سرور HTTP خود (به عنوان مثال آپاچی) اضافه کنید) :
X-UA-Compatible: chrome=1
گزینه 2: متا تگ (فقط این را در بخش <head> HTML خود قرار دهید)
<meta http-equiv="X-UA-Compatible" content="chrome=1">
هنگامی که یکی از این موارد را به سایت خود اضافه کردید، صفحات با استفاده از Chrome Frame در صورتی که روی دستگاه کاربر نصب شده باشد، ارائه می شوند.
درخواست Google Chrome Frame
ممکن است به دلایل زیادی از جمله موارد زیر تصمیم بگیرید که پشتیبانی از مرورگرهای قدیمی را کاملاً منسوخ کنید:
- سایت شما به ویژگی های مدرنی مانند ویدئو HTML5، بوم، WebGL یا CSS3 نیاز دارد
- زمان توسعه صرف شده در مرورگرهای قدیمی بسیار زیاد است
- افزایش زمان توسعه برای ویژگی های جدید
Chrome Frame ممکن است راهبردی برای ادامه دادن راهی به کاربران مرورگرهای قدیمی ارائه دهد تا همچنان از سایت شما استفاده کنند.
Chrome Frame با گسترش سرصفحه User-Agent میزبان با رشته "chromeframe" در دسترس است. برای اطلاعات بیشتر به Chrome Frame User Agent مراجعه کنید.
از تشخیص سمت سرور برای جستجوی این نشانه استفاده کنید و تعیین کنید که آیا Chrome Frame می‌تواند برای یک صفحه استفاده شود یا خیر. اگر Chrome Frame وجود دارد، می‌توانید متا تگ مورد نیاز را وارد کنید. اگر نه، می توانید کاربران را به صفحه ای هدایت کنید که نحوه نصب Chrome Frame را توضیح می دهد. به عنوان جایگزینی برای sniffing سمت سرور، می‌توانید از اسکریپت 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، می‌توانید کاربران را مستقیماً به EULA نیز بفرستید و در نتیجه یک مرحله صرفه‌جویی کنید. فرآیند نصب http://www.google.com/chromeframe/eula.html
بدون نیاز به حقوق مدیریت
کاربران می‌توانند Chrome Frame را بدون داشتن امتیازات مدیریتی روی دستگاه خود نصب کنند.
پارامتر user=true را برای فعال کردن نصب Chrome Frame در سطح کاربر، مانند زیر اضافه کنید:
http://www.google.com/chromeframe/?user=true
نصب سازمانی
شرکت‌ها می‌توانند شرکت Chrome Frame را با استفاده از نصب‌کننده MSI که می‌توانید از اینجا دانلود کنید، به کار گیرند: 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 تماشا کنید