עיבוד HTML5 בדפדפנים ישנים באמצעות Google Chrome Frame

מאלטה אובל
מאלטה אובל

מבוא

HTML5 מוסיף מגוון רחב של כלים חדשים ומגניבים לארגז הכלים של מפתחי האתרים, כולל:

  • ממשקי JavaScript API חדשים וחזקים יותר
  • SVG לגרפיקה וקטורית
  • לוח הציור בדו-ממד עם גרפיקה של 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. אין ספק ש-Chrome Frame שימושי יותר בעת תמיכה בדפדפן ישן כגון IE6-to-IE8, אבל אם לדוגמה אתה דורש את WebGL עבור היישום, דרישה של Chrome Frame עבור משתמשי IE9 עשויה להיות שימושית גם היא.

רכיבי polyfill מסוג HTML5 מספקים דרך נוספת לייעל את המעבר לדפדפנים חדשים יותר. למרבה הצער, הם לא יכולים לחקות כל תכונה והם מאטים את הדף בדפדפנים ישנים, שהם כבר איטיים יותר בהשוואה לדור החדש.

גם אם האתר שלך לא זקוק לתכונות של HTML5, השימוש ב-Chrome Frame יכול לספק חוויית משתמש טובה יותר. למשתמשים שכבר התקינו אותה, הרינדור בדרך כלל מהיר יותר, והם יכולים לקבל גישה לתכונות שלא נתמכות בדפדפנים ישנים יותר. כמובן שעדיין תוכל להחליט לתמוך בדפדפנים ישנים עבור משתמשים שאין להם Chrome Frame במחשב שלהם.

הבעת הסכמה

ניתן לאפשר ל-Chrome Frame לעבד דף על ידי הוספת מטא תג של HTML או שימוש בכותרת HTTP. זה חשוב מאוד. המשמעות היא שאף אתר לא יתקלקל אם למשתמש מותקן Chrome Frame, כי לאתר יש שליטה מלאה על השימוש בפלאגין או על עיבוד ברירת המחדל. קטעי הקוד הבאים מראים כיצד אתר יכול להביע הסכמה לעיבוד על ידי Chrome Frame.

אפשרות 1: HTTP-Header (ניתן להוסיף את הכותרת הזו לתצורת שרת HTTP (למשל, Apache)):

X-UA-Compatible: chrome=1

אפשרות 2: מטא תג (פשוט מדביקים את כתובת ה-URL בקטע <head> של ה-HTML)

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

אחרי שמוסיפים אחד מהפרמטרים האלה לאתר, הדפים מעובדים באמצעות Chrome Frame אם הוא מותקן במחשב של המשתמש.

הצגת בקשה ל-Google Chrome Frame

אתם יכולים להפסיק לגמרי את התמיכה בדפדפנים ישנים מסיבות רבות, וביניהן:

  • האתר שלך דורש תכונות מודרניות כגון וידאו HTML5, בד ציור, WebGL או CSS3
  • זמן הפיתוח שהוקדש בדפדפנים ישנים גבוה מדי
  • האצת זמן הפיתוח לתכונות חדשות

Chrome Frame עשוי לספק אסטרטגיה שמאפשרת למשתמשים של דפדפנים ישנים להמשיך להשתמש באתר שלכם.

Chrome Frame משדר שהוא זמין על ידי הרחבת הכותרת של סוכן המשתמש של המארח עם המחרוזת "chromeframe". מידע נוסף זמין במאמר סוכן המשתמש של 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>

הנחיה עצמית

אולי תחליטו גם לבנות דף נחיתה או שכבה בעצמכם. שליחת משתמשים לכתובת ה-URL הזו

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 מציג גם שיפור משמעותי בזמן הטעינה הראשונית. כדי לבדוק אם Chrome Frame עוזר לעיבוד מהיר יותר של האתר, עוברים אל webpagetest.org ובוחרים ב-Chrome Frame כדפדפן.

מידע נוסף

למידע נוסף, אפשר לעיין במדריך לתחילת העבודה או לצפות בסרטון הבא מתוך Google IO 2011