Rendering HTML5 in browser meno recenti con Google Chrome Frame

Introduzione

HTML5 aggiunge una moltitudine di nuovi fantastici strumenti agli strumenti per sviluppatori web, tra cui:

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

L'elenco, ovviamente, non è esaustivo; la piattaforma web ha fatto passi in avanti e il divario tra browser vecchi e moderni si sta ampliando ogni giorno.
Tutti i principali browser desktop ora supportano parti significative di HTML5 nella versione più recente, ma i vecchi browser che rimangono costantemente mettono in difficoltà l'adozione delle migliori e più recenti funzionalità di oggi.

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

Cos'è Google Chrome Frame

Google Chrome Frame è un plug-in per Internet Explorer che consente il rendering dell'intero canvas del browser utilizzando il motore di rendering di Google Chrome. Supporta tutte le funzionalità HTML5 che trovi in Chrome perfettamente integrate nell'esperienza utente di Internet Explorer. Chrome Frame è disponibile per Internet Explorer 6, 7, 8 e 9. Chrome Frame è sicuramente più utile quando sono supportati vecchi browser come IE6 da IE6 a IE8 ma se, ad esempio, richiedi WebGL per l'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. Sfortunatamente, non possono emulare tutte le funzionalità e rallentano la pagina nei vecchi browser, che sono già più lenti rispetto alla nuova generazione, anche di più.

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

Attivazione

Puoi consentire a Chrome Frame di visualizzare 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 pieno controllo dell'utilizzo del plug-in o del rendering predefinito. I seguenti snippet di codice mostrano in che modo un sito può attivare il rendering da parte di Chrome Frame.

Opzione 1: intestazione HTTP (puoi aggiungerla alla configurazione del server HTTP (ad es. Apache)):

X-UA-Compatible: chrome=1

Opzione 2: meta-tag (incollalo nella sezione <head> HTML)

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

Dopo aver aggiunto uno di questi elementi al tuo sito, il rendering delle pagine viene eseguito utilizzando Chrome Frame se è installato sul computer dell'utente.

Richiesta di Google Chrome Frame

Puoi decidere di ritirare completamente il supporto per i browser precedenti per diversi motivi, tra cui:

  • Il sito richiede funzionalità moderne come video HTML5, canvas, WebGL o CSS3
  • Il tempo di sviluppo dedicato ai vecchi browser è troppo elevato
  • Tempi di sviluppo più rapidi per le nuove funzionalità

Chrome Frame potrebbe fornire una strategia per continuare a offrire agli utenti dei vecchi browser un modo per continuare a usare il tuo sito.

Chrome Frame trasmette la sua disponibilità estendendo l'intestazione User-Agent dell'host con la stringa "chromeframe". Per ulteriori informazioni, consulta la pagina dedicata allo user agent Chrome Frame.

Utilizza il rilevamento lato server per cercare questo token e determinare se è possibile utilizzare Chrome Frame per una pagina. Se è presente Chrome Frame, puoi inserire il meta tag richiesto; in caso contrario, puoi reindirizzare gli utenti a una pagina che spiega come installare Chrome Frame. In alternativa allo sniffing lato server, puoi utilizzare lo script CFInstall.js per rilevare Chrome Frame e richiedere agli utenti di installare il plug-in senza riavviare i browser. L'uso dello script è semplice. Basta aggiungere alla pagina i tag di script e gli stili facoltativi, 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>

Chiediti

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

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

che possono essere inseriti in un IFRAME.

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

http://www.google.com/chromeframe/?redirect=http://www.google.com/ Invece di andare alla pagina di destinazione di Chrome Frame, potresti anche indirizzare gli utenti direttamente al Contratto di licenza con l'utente finale (EULA) risparmiando un passaggio nella procedura di installazione. http://www.google.com/chromeframe/eula.html

Non sono necessari diritti amministrativi

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

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

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

Installazione aziendale

Le aziende possono implementare Chrome Frame in tutta l'azienda 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 sulle implementazioni aziendali, visita il sito 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 presenta anche un miglioramento significativo del tempo di caricamento iniziale. Per verificare se Chrome Frame consente al tuo sito di ricevere un rendering più veloce, visita il sito webpagetest.org e seleziona Chrome Frame come browser.

Scopri di più

Per ulteriori informazioni, consulta la Guida introduttiva o guarda questo video di Google IO 2011