เกริ่นนำ
HTML5 เพิ่มเครื่องมือที่ยอดเยี่ยมใหม่ๆ มากมายในกล่องเครื่องมือของนักพัฒนาเว็บ ซึ่งรวมถึงเครื่องมือต่อไปนี้
- JavaScript API ใหม่ที่มีประสิทธิภาพมากขึ้น
- SVG สำหรับภาพกราฟิกเวกเตอร์
- Canvas สำหรับแบบ 2 มิติและมีกราฟิก 3 มิติของ WebGL
- CSS3 สำหรับมุมโค้ง การไล่ระดับสี ฯลฯ
- มาร์กอัปที่ชัดเจนมากขึ้น
แน่นอนว่ารายการนี้ไม่ครอบคลุม แพลตฟอร์มเว็บได้พัฒนาไปอย่างมาก และช่องว่างระหว่างเบราว์เซอร์รุ่นเก่ากับเบราว์เซอร์สมัยใหม่ก็ขยายใหญ่ขึ้นทุกวัน
ขณะนี้เบราว์เซอร์ส่วนใหญ่ในเดสก์ท็อปรองรับ HTML5 หลายส่วนในเวอร์ชันล่าสุด แต่เบราว์เซอร์เก่าๆ ที่ยังใช้งานอยู่จึงสร้างความท้าทายในการนำฟีเจอร์ล่าสุดและดีที่สุดมาใช้ในปัจจุบัน
Google Chrome Frame สามารถช่วยคุณสร้างหน้า HTML5 ที่ทันสมัยได้ในปัจจุบัน ในขณะที่ยังคงช่วยให้ผู้ใช้ที่ใช้เบราว์เซอร์รุ่นเก่าดูเนื้อหาของคุณได้
Google Chrome Frame คืออะไร
Google Chrome Frame เป็นปลั๊กอินสำหรับ Internet Explorer ที่ช่วยให้สามารถแสดง Canvas ทั้งหมดของเบราว์เซอร์โดยใช้เครื่องมือแสดงผลของ Google Chrome โดยจะรองรับฟีเจอร์ HTML5 ทั้งหมดที่คุณพบใน Chrome ที่ผสานรวมเข้ากับประสบการณ์ของผู้ใช้ Internet Explorer ได้อย่างราบรื่น Chrome Frame สามารถใช้ได้กับ Internet Explorer 6, 7, 8 และ 9 Chrome Frame จะมีประโยชน์กว่าเมื่อรองรับเบราว์เซอร์รุ่นเก่าอย่าง IE6-to-IE8 แต่ในกรณีที่คุณจำเป็นต้องใช้ WebGL ในแอปพลิเคชัน การกำหนดให้ Chrome Frame สำหรับผู้ใช้ IE9 ก็อาจเป็นประโยชน์เช่นกัน
โพลีฟิลล์ HTML5 เป็นอีกวิธีหนึ่งที่ทำให้การเปลี่ยนไปใช้เบราว์เซอร์รุ่นใหม่ๆ เป็นไปอย่างราบรื่น แต่น่าเสียดายที่ไม่สามารถจำลองฟีเจอร์ได้ทั้งหมด และทำให้หน้าเว็บทำงานในเบราว์เซอร์เก่าๆ ซึ่งทำงานช้าลงอยู่แล้วสำหรับคนรุ่นใหม่
ถึงแม้ว่าเว็บไซต์ของคุณจะไม่ต้องใช้ฟีเจอร์ HTML5 แต่การใช้ Chrome Frame ยังสามารถให้ประสบการณ์ ที่ดีกว่าแก่ผู้ใช้ได้ สำหรับผู้ใช้ที่ติดตั้งแอปไว้แล้ว การแสดงผลมักจะเร็วขึ้นและเข้าถึงฟีเจอร์ที่เบราว์เซอร์รุ่นเก่าไม่รองรับได้ แน่นอนว่าคุณจะยังคงเลือกที่จะสนับสนุนเบราว์เซอร์รุ่นเก่าสำหรับผู้ใช้ที่ไม่ได้ใช้ Chrome Frame ในเครื่องได้
การเลือกใช้
คุณเปิดใช้ Chrome Frame เพื่อแสดงหน้าเว็บได้โดยการเพิ่มเมตาแท็ก HTML หรือใช้ส่วนหัว HTTP ข้อนี้สำคัญมาก หมายความว่าไม่มีเว็บไซต์ใดหยุดทำงานหากผู้ใช้ติดตั้ง Chrome Frame ไว้ เนื่องจากเว็บไซต์ควบคุมการใช้ปลั๊กอินหรือการแสดงผลเริ่มต้นได้อย่างเต็มที่ ข้อมูลโค้ดต่อไปนี้แสดงวิธีที่เว็บไซต์สามารถเลือกแสดงผลโดย Chrome Frame
ตัวเลือกที่ 1: ส่วนหัว HTTP (คุณสามารถเพิ่มส่วนหัวนี้ลงในการกำหนดค่าเซิร์ฟเวอร์ HTTP (เช่น Apache)):
X-UA-Compatible: chrome=1
ตัวเลือกที่ 2: เมตาแท็ก (เพียงวางสิ่งนี้ลงในส่วน <head> ของ HTML)
<meta http-equiv="X-UA-Compatible" content="chrome=1">
เมื่อคุณเพิ่มอย่างใดอย่างหนึ่งเหล่านี้ลงในเว็บไซต์แล้ว หน้าเว็บจะแสดงผลโดยใช้ Chrome Frame หากมีการติดตั้งไว้ในเครื่องของผู้ใช้
การแจ้งเกี่ยวกับ Google Chrome Frame
คุณอาจตัดสินใจที่จะเลิกใช้งานการสนับสนุนเบราว์เซอร์รุ่นเก่าโดยสมบูรณ์ด้วยเหตุผลหลายประการดังต่อไปนี้
- เว็บไซต์ต้องใช้ฟีเจอร์ที่ทันสมัย เช่น วิดีโอ HTML5, Canvas, WebGL หรือ CSS3
- เวลาในการพัฒนาที่ใช้ในเบราว์เซอร์รุ่นเก่าสูงเกินไป
- เร่งเวลาในการพัฒนาฟีเจอร์ใหม่ๆ
Chrome Frame อาจมีกลยุทธ์ที่ช่วยให้ผู้ใช้เบราว์เซอร์รุ่นเก่าๆ ยังคงใช้เว็บไซต์ของคุณต่อไปได้
Chrome Frame จะแจ้งให้ทราบว่าพร้อมใช้งานโดยขยายส่วนหัว User-Agent ของโฮสต์ด้วยสตริง "chromeframe" โปรดดูข้อมูลเพิ่มเติมที่ User Agent ของ Chrome Frame
ใช้การตรวจหาฝั่งเซิร์ฟเวอร์เพื่อค้นหาโทเค็นนี้และระบุว่าใช้ Chrome Frame กับหน้าเว็บได้หรือไม่ หากมี Chrome Frame อยู่แล้ว คุณสามารถแทรกเมตาแท็กที่จำเป็นได้ หากไม่มี คุณสามารถเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าที่อธิบายวิธีการติดตั้ง Chrome Frame อีกวิธีหนึ่งในการดักจับข้อมูลฝั่งเซิร์ฟเวอร์ คุณสามารถใช้สคริปต์ 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>
พรอมต์ของคุณเอง
และคุณอาจตัดสินใจสร้างหน้า Landing Page หรือเลเยอร์ด้วยตัวเองก็ได้ ส่งผู้ใช้ไปยัง URL นี้
http://www.google.com/chromeframe/
ซึ่งสามารถใส่ลงใน iframe ได้
เพิ่มพารามิเตอร์การเปลี่ยนเส้นทางต่อท้ายเพื่อส่งผู้ใช้กลับมาที่เว็บไซต์หลังจากการติดตั้งเสร็จสิ้น ดังนี้
http://www.google.com/chromeframe/?redirect=http://www.google.com/ แทนที่จะไปที่หน้า Landing Page ของ 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 ยังช่วยปรับปรุงเวลาในการโหลดครั้งแรกได้เป็นอย่างมาก คุณตรวจสอบได้ว่า Chrome Frame ช่วยให้เว็บไซต์แสดงผลเร็วขึ้นได้หรือไม่โดยไปที่ webpagetest.org แล้วเลือก Chrome Frame เป็นเบราว์เซอร์
ข้อมูลเพิ่มเติม
สำหรับข้อมูลเพิ่มเติม โปรดดูคู่มือเริ่มต้นใช้งาน หรือดูวิดีโอนี้จาก Google IO 2011