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

Malte Ubl

מבוא

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

  • ממשקי API חדשים וחזקים יותר של JavaScript
  • SVG לגרפיקה וקטורית
  • קנבס לתמונות דו-ממדיות ועם גרפיקה תלת-ממדית של 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 באפליקציה, יכול להיות שגם תצטרכו לדרוש את 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: מטא-תג (פשוט מדביקים את זה בקטע <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.

משתמשים בזיהוי בצד השרת כדי לחפש את האסימון הזה ולהחליט אם אפשר להשתמש ב-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