Рендеринг HTML5 в старых браузерах с помощью Google Chrome Frame

Введение

HTML5 добавляет в набор инструментов веб-разработчика множество новых замечательных инструментов, в том числе следующие:

  • Новые, более мощные API JavaScript.
  • SVG для векторной графики
  • Canvas для 2D и 3D-графики 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 также могут быть полезны.

Полифилы HTML5 предоставляют еще один способ сгладить переход на новые браузеры. К сожалению, они не могут эмулировать каждую функцию и замедляют вашу страницу в старых браузерах, которые уже медленнее, чем новое поколение, даже больше.

Даже если вашему сайту не нужны функции HTML5, использование Chrome Frame все равно может обеспечить лучший пользовательский опыт. Для пользователей, у которых он уже установлен, рендеринг обычно происходит быстрее, и они могут получить доступ к функциям, которые не поддерживаются в старых браузерах. Конечно, вы все равно можете принять решение о поддержке старых браузеров для пользователей, на которых нет Chrome Frame.

Согласие

Вы можете включить Chrome Frame для отображения страницы, добавив метатег HTML или используя заголовок HTTP. Это очень важно. Это означает, что ни один сайт не сломается, если у пользователя установлен Chrome Frame, поскольку сайт полностью контролирует использование плагина или рендеринг по умолчанию. Следующие фрагменты кода показывают, как сайт может включить обработку Chrome Frame.

Вариант 1: HTTP-заголовок (вы можете добавить его в конфигурацию вашего HTTP-сервера (например, Apache) :

X-UA-Compatible: chrome=1

Вариант 2. Мета-тег (просто вставьте его в раздел HTML <head> ).

<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». Дополнительную информацию см. в разделе Пользовательский агент 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 вы также можете направить пользователей непосредственно к лицензионному соглашению, тем самым сэкономив один шаг в процесс установки. 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.