Introduzione alle HISTORY API di HTML5

Alla base della navigazione web all’interno di un sito, ci sono i collegamenti ipertestuali (link) che consentono di spostarci da una pagina all’altra. Ad ogni click il nostro browser ricarica l’intera pagina spostandosi alla nuova.

Riflettiamo un attimo su questa azione: cliccando su un link, solo alcune informazioni cambiano tra una pagina di un sito ed un altra. Come fare quindi per far si che il nostro browser carichi solo le nuove informazioni, senza effettuare un refresh totale della pagina web?
Ecco che in nostro aiuto arrivano le HISTORY API di HTML5.

Cosa cambia da una semplice richiesta AJAX

Molti di voi si domanderanno ora, cosa cambia rispetto ad una semplice richiesta AJAX? La risposta alla seguente domanda la troviamo nei seguenti punti:

  • l’URL della pagina non viene modificato, ma rimane identico tranne che per un eventuale aggiunta di una location.hash
  • l’informazione caricata tramite richiesta AJAX non sarà mai indicizzata in termini di SEO
  • insieme al download del nuovo contenuto, abbiamo uno spreco di banda per effettuare la chiamata AJAX

La risposta a questi problemi è quindi l’uso delle HISTORY API.

Con il suo uso, potremo caricare solo le informazioni necessarie, cambiando l’URL della pagina. Ecco quindi risolti entrambi i punti sopra citati.

 

Come funzionano le HISTORY API

Per ogni tab del nostro browser abbiamo un HISTORY OBJECT che può essere manipolato attraverso degli speciali metodi. Ogni oggetto può essere visto come una lista separata da virgole di URL e/o stati.

I metodi introdotti dalle api sono:

  • window.history.length: ritorna il numero di entries presenti nell’oggetto history;
  • window.history.state: ritorna lo stato corrente;
  • window.history.go(n): torna indietro o avanti in relazione al numero positivo passato come parametro, all’interno della lista di URL. Se zero viene ricaricata la pagina corrente;
  • window.history.back(): torna indietro di un indirizzo nella session history;
  • window.history.forward(): va avanti nella session history;
  • window.history.pushState(data, title [, url]): inserisce un nuovo oggetto/url nella session history;
  • window.history.replaceState(data, title [, url]): aggiorna l’entry corrente nella session history.

 

Nel prossimo articolo verrà illustrato un esempio d’uso delle HISTORY API HTML5.

Michele Pierri

Sviluppatore android/web/desktop, blogger, nonchè sostenitore incallito dell'universo Cloud Computing, nel tempo libero amo fare sport e praticare arti marziali.