Rendering HTML5 in browser meno recenti con Google Chrome Frame

Introduzione

HTML5 aggiunge una serie di nuovi strumenti fantastici alla cassetta degli attrezzi degli sviluppatori web, tra cui:

  • Nuove API JavaScript più potenti
  • SVG per la grafica vettoriale
  • Canvas per la grafica 2D e 3D WebGL
  • CSS3 per angoli arrotondati, sfumature e così via.
  • Markup più espressivo

Questo elenco non è ovviamente esaustivo; la piattaforma web ha fatto enormi passi avanti e il divario tra i browser vecchi e quelli moderni si allarga ogni giorno.
Tutti i principali browser desktop ora supportano parti significative di HTML5 nella versione più recente, ma la presenza di browser meno recenti rappresenta una sfida per l'adozione delle funzionalità più recenti e avanzate.

Google Chrome Frame può aiutarti a creare oggi pagine HTML5 all'avanguardia, consentendo al contempo alle persone che utilizzano browser meno recenti di vedere i tuoi contenuti.

Che cos'è Google Chrome Frame

Google Chrome Frame è un plug-in per Internet Explorer che consente di eseguire il rendering della tela completa del browser utilizzando il motore di rendering di Google Chrome. Supporta tutte le funzionalità HTML5 disponibili in Chrome, integrate perfettamente nell'esperienza utente di Internet Explorer. Chrome Frame è disponibile per Internet Explorer 6, 7, 8 e 9. Chrome Frame è sicuramente più utile per il supporto di browser meno recenti come IE6-IE8, ma se, ad esempio, hai bisogno di WebGL per la tua applicazione, potrebbe essere utile anche richiedere Chrome Frame per gli utenti di IE9.

I polyfill HTML5 offrono un altro modo per semplificare la transizione ai browser più recenti. Purtroppo, non possono emulare tutte le funzionalità e rallentano ulteriormente la pagina nei vecchi browser, che sono già più lenti rispetto alla nuova generazione.

Anche se il tuo sito non ha bisogno di funzionalità HTML5, l'utilizzo di Chrome Frame potrebbe comunque offrire un'esperienza utente migliore. Per gli utenti che lo hanno già installato, il rendering è in genere più veloce e possono accedere a funzionalità non supportate nei browser meno recenti. Puoi, ovviamente, decidere di supportare i vecchi browser per gli utenti che non hanno Chrome Frame sul proprio computer.

Attivazione

Puoi consentire a Chrome Frame di eseguire il rendering di una pagina aggiungendo un meta tag HTML o utilizzando un'intestazione HTTP. Questo è molto importante. Ciò significa che nessun sito verrà interrotto se un utente ha installato Chrome Frame, perché il sito ha il controllo completo dell'utilizzo del plug-in o del rendering predefinito. I seguenti snippet di codice mostrano come un sito può attivare il rendering da parte di Chrome Frame.

Opzione 1: HTTP-Header (puoi aggiungerlo alla configurazione del server HTTP (ad es. Apache)):

X-UA-Compatible: chrome=1

Opzione 2: meta tag (basta incollarlo nella sezione <head> dell'HTML)

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

Dopo aver aggiunto uno di questi elementi al tuo sito, le pagine vengono visualizzate utilizzando Chrome Frame se è installato sul computer dell'utente.

Richiesta di Google Chrome Frame

Potresti decidere di ritirare completamente il supporto per i browser meno recenti per diversi motivi, tra cui:

  • Il tuo sito richiede funzionalità moderne come video HTML5, canvas, WebGL o CSS3
  • Il tempo di sviluppo speso per i browser meno recenti è troppo elevato
  • Accelerare i tempi di sviluppo delle nuove funzionalità

Chrome Frame potrebbe offrire una strategia per continuare a offrire agli utenti di browser meno recenti un modo per utilizzare il tuo sito.

Chrome Frame comunica la sua disponibilità estendendo l'intestazione User-Agent dell'host con la stringa "chromeframe". Per ulteriori informazioni, vedi User agent di Chrome Frame.

Utilizza il rilevamento lato server per cercare questo token e determinare se Chrome Frame può essere utilizzato per una pagina. Se Chrome Frame è presente, puoi inserire il metatag richiesto; in caso contrario, puoi reindirizzare gli utenti a una pagina che spiega come installare Chrome Frame. Come alternativa allo sniffing lato server, puoi utilizzare lo script CFInstall.js per rilevare Chrome Frame e chiedere agli utenti di installare il plug-in senza riavviare i browser. L'utilizzo dello script è semplice. Basta aggiungere i tag script e gli stili facoltativi alla pagina come nell'esempio seguente:

<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>

Fornisci un prompt

Puoi anche decidere di creare una pagina di destinazione o un livello autonomamente. Invia gli utenti a questo URL

http://www.google.com/chromeframe/

che può essere inserito in un IFRAME.

Aggiungi un parametro di reindirizzamento per reindirizzare gli utenti al tuo sito al termine dell'installazione:

http://www.google.com/chromeframe/?redirect=http://www.google.com/ Anche se non vai alla pagina di destinazione di Chrome Frame, puoi inviare gli utenti direttamente al contratto EULA, risparmiando così un passaggio nella procedura di installazione. http://www.google.com/chromeframe/eula.html

Non sono necessari diritti di amministratore

Gli utenti possono installare Chrome Frame senza disporre dei privilegi amministrativi sui propri computer.

Aggiungi il parametro user=true per attivare l'installazione di Chrome Frame a livello di utente, come indicato di seguito:

http://www.google.com/chromeframe/?user=true

Installazione Enterprise

Le aziende possono eseguire il deployment di Chrome Frame a livello aziendale utilizzando il programma di installazione MSI che può essere scaricato qui: http://www.google.com/chromeframe/eula.html?msi=true.

Per ulteriori informazioni su Chrome e sui deployment aziendali, visita la pagina http://www.chromium.org/administrators.

Adozione

Molti siti web importanti come yahoo.com, wordpress.com e diverse proprietà di Google hanno adottato Google Chrome Frame. Oltre a offrire agli utenti l'accesso a un'esperienza web più moderna per molti siti, Chrome Frame offre anche un miglioramento significativo del tempo di caricamento iniziale. Per verificare se Chrome Frame contribuisce a velocizzare il rendering del tuo sito, vai alla pagina webpagetest.org e seleziona Chrome Frame come browser.

Scopri di più

Per saperne di più, consulta la Guida introduttiva o guarda questo video del Google IO 2011