Introdução
O HTML5 adiciona uma infinidade de novas ferramentas incríveis à caixa de ferramentas do desenvolvedor da Web, incluindo as seguintes:
- APIs JavaScript novas e mais poderosas
- SVG para gráficos vetoriais
- Tela para gráficos 2D e 3D do WebGL
- CSS3 para cantos arredondados, gradientes etc.
- Marcação mais expressiva
Essa lista não é abrangente. A plataforma da Web
progrediu muito, e a lacuna entre os navegadores antigos e os modernos está aumentando a cada dia.
Todos os principais navegadores para computador agora oferecem suporte a partes significativas do HTML5 na versão mais recente, mas os navegadores antigos que ainda estão em uso dificultam a adoção dos recursos mais recentes.
O Google Chrome Frame pode ajudar você a criar páginas HTML5 de última geração hoje, permitindo que as pessoas que usam navegadores mais antigos acessem seu conteúdo.
O que é o Google Chrome Frame
O Google Chrome Frame é um plug-in para o Internet Explorer que permite renderizar a tela completa do navegador usando o mecanismo de renderização do Google Chrome. Ele oferece suporte a todos os recursos de HTML5 disponíveis no Chrome, integrados perfeitamente à experiência do usuário no Internet Explorer. O Chrome Frame está disponível para Internet Explorer 6, 7, 8 e 9. O Chrome Frame é mais útil quando oferece suporte a navegadores antigos, como o IE6 e o IE8. No entanto, se você exigir o WebGL para seu aplicativo, exigir o Chrome Frame para usuários do IE9 também pode ser útil.
Os polyfills do HTML5 oferecem outra maneira de facilitar a transição para navegadores mais recentes. Infelizmente, eles não podem emular todos os recursos e ainda diminuem a velocidade da sua página em navegadores antigos, que já são mais lentos que a nova geração.
Mesmo que seu site não precise de recursos HTML5, o uso do Chrome Frame ainda pode proporcionar uma melhor experiência do usuário. Para os usuários que já têm o recurso instalado, a renderização geralmente é mais rápida e eles podem acessar recursos que não são compatíveis com navegadores mais antigos. Você ainda pode oferecer suporte a navegadores antigos para usuários que não têm o Chrome Frame na máquina.
Ativação
Para ativar o Chrome Frame e renderizar uma página, adicione uma metatag HTML ou use um cabeçalho HTTP. Isso é muito importante. Isso significa que nenhum site será quebrado se um usuário tiver o Chrome Frame instalado, porque o site tem controle total sobre o uso do plug-in ou da renderização padrão. Os snippets de código a seguir mostram como um site pode ser renderizado pelo Chrome Frame.
Opção 1: cabeçalho HTTP (você pode adicionar isso à configuração do servidor HTTP, por exemplo, Apache):
X-UA-Compatible: chrome=1
Opção 2: metatag (basta colar isso na seção <head> HTML)
<meta http-equiv="X-UA-Compatible" content="chrome=1">
Depois de adicionar um desses recursos ao seu site, as páginas serão renderizadas usando o Chrome Frame, se ele estiver instalado na máquina do usuário.
Solicitação do Google Chrome Frame
Você pode decidir descontinuar totalmente o suporte a navegadores antigos por vários motivos, incluindo:
- Seu site exige recursos modernos, como vídeo HTML5, canvas, WebGL ou CSS3
- O tempo de desenvolvimento gasto em navegadores antigos é muito alto
- Acelerar o tempo de desenvolvimento de novos recursos
O Chrome Frame pode ser uma estratégia para continuar oferecendo aos usuários de navegadores antigos uma maneira de usar seu site.
O Chrome Frame transmite que está disponível estendendo o cabeçalho User-Agent do host com a string "chromeframe". Para mais informações, consulte User Agent do Chrome Frame.
Use a detecção do lado do servidor para procurar esse token e determinar se o Chrome Frame pode ser usado para uma página. Se o Chrome Frame estiver presente, insira a metatag necessária. Caso contrário, redirecione os usuários para uma página que explique como instalar o Chrome Frame. Como alternativa ao sniffing do lado do servidor, você pode usar o script CFInstall.js para detectar o Chrome Frame e solicitar que os usuários instalem o plug-in sem reiniciar os navegadores. O uso do script é simples. Basta adicionar as tags de script e os estilos opcionais à sua página, como no exemplo abaixo:
<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>
Faça perguntas a si mesmo
Você também pode criar uma página de destino ou uma camada. Enviar os usuários para este URL
http://www.google.com/chromeframe/
que pode ser colocado em um IFRAME.
Anexe um parâmetro de redirecionamento para enviar os usuários de volta ao seu site após a instalação:
http://www.google.com/chromeframe/?redirect=http://www.google.com/ Em vez de acessar a página de destino do Chrome Frame, você também pode enviar os usuários diretamente para a EULA, economizando uma etapa no processo de instalação. http://www.google.com/chromeframe/eula.html
Não é necessário ter direitos de administrador
Os usuários podem instalar o Chrome Frame sem ter privilégios administrativos nas máquinas.
Anexe o parâmetro user=true para ativar a instalação do Chrome Frame no nível do usuário, como no exemplo a seguir:
http://www.google.com/chromeframe/?user=true
Instalação empresarial
As empresas podem implantar o Chrome Frame em toda a empresa usando o instalador MSI, que pode ser baixado aqui: http://www.google.com/chromeframe/eula.html?msi=true.
Para mais informações sobre o Chrome e as implantações empresariais, acesse http://www.chromium.org/administrators.
Adoção
Muitos sites importantes, como yahoo.com, wordpress.com e várias propriedades do Google, adotaram o Google Chrome Frame. Além de oferecer aos usuários acesso a uma experiência da Web mais moderna em muitos sites, o Chrome Frame também apresenta uma melhoria significativa no tempo de carregamento inicial. Para verificar se o Chrome Frame ajuda a renderizar o site mais rapidamente, acesse webpagetest.org e selecione o Chrome Frame como navegador.
Mais informações
Para mais informações, consulte o Guia de início rápido ou assista este vídeo do Google IO 2011