บทนำ
HTML5 เพิ่มเครื่องมือใหม่ๆ ที่น่าสนใจมากมายลงในกล่องเครื่องมือของนักพัฒนาเว็บ ซึ่งรวมถึงเครื่องมือต่อไปนี้
- JavaScript API ใหม่ที่มีประสิทธิภาพมากขึ้น
- SVG สำหรับภาพกราฟิกเวกเตอร์
- แคนวาสสำหรับ 2 มิติและกราฟิก 3 มิติของ WebGL
- 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 Chrome Frame มีประโยชน์มากกว่าเมื่อรองรับเบราว์เซอร์รุ่นเก่า เช่น IE6-IE8 แต่หากต้องใช้ WebGL สําหรับแอปพลิเคชัน การกําหนดให้ผู้ใช้ IE9 ใช้ Chrome Frame ก็อาจมีประโยชน์เช่นกัน
โพลีฟิลล์ 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
คุณอาจตัดสินใจเลิกใช้งานการรองรับเบราว์เซอร์เก่าอย่างสมบูรณ์ด้วยเหตุผลหลายประการ ซึ่งรวมถึงเหตุผลต่อไปนี้
- เว็บไซต์ของคุณต้องใช้ฟีเจอร์สมัยใหม่ เช่น วิดีโอ 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/ นอกจากนี้ คุณยังส่งผู้ใช้ไปยัง EULA ได้โดยตรงเพื่อประหยัดขั้นตอนในการติดตั้ง แทนที่จะไปที่หน้า Landing Page ของ Chrome Frame 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