Transizioni di pagina belle e fluide con l'API Web cronologia

In questo tutorial costruiremo un sito Web con pagine di transizione meravigliosamente fluide, senza il solito aggiornamento aggressivo della pagina. Naviga tra le pagine nella demo per vedere cosa intendo.

Per ottenere questo effetto useremo l'API Web di cronologia. In poche parole, questa API viene utilizzata per modificare la cronologia del browser. Ci consente di caricare un nuovo URL, modificare il titolo della pagina, quindi registrarlo come una nuova visita nel browser senza dover effettivamente caricare la pagina.

Questo suona confuso, ma apre una serie di possibilità, come essere in grado di servire transizioni di pagina più fluide e dare un senso di rapidità che migliori l'esperienza dell'utente. Probabilmente hai già assistito all'API della cronologia Web in azione su numerosi siti Web e applicazioni Web, come Trello, Quartz e Privacy..

Il sito web del Quartz piuttosto astratto (e piuttosto bello)

Prima di andare oltre, esaminiamo innanzitutto una particolare API che verrà distribuita sul sito Web.

The History Web API, in breve

Per accedere all'API della cronologia Web, prima scriviamo window.history quindi segui questo con una delle API; un metodo o una proprietà. In questo tutorial ci concentreremo sul pushState () metodo, quindi:

window.history.pushState (stato, titolo, url);

Come puoi vedere dallo snippet sopra, il pushState () il metodo richiede tre parametri. 

1. Il primo parametro, stato, dovrebbe essere un oggetto contenente dati arbitrari. Questi dati saranno quindi accessibili attraverso window.history.state. In un'applicazione del mondo reale, dovremmo trasmettere dati come un ID di pagina, un URL o input serializzati derivati ​​da un modulo. 
2. Gli ultimi due parametri sono titolo e
3. url. Questi due cambiano l'URL e il titolo del documento nel browser, oltre a registrarli come una nuova voce nella cronologia del browser. 

Analizziamo il seguente esempio per capire meglio come pushState () Il metodo funziona.

(function ($) $ ("a") .on ("click", function (event) event.preventDefault (); window.history.pushState (ID: 9, "About - Acme", "about / "););) (jQuery);

Nel codice precedente, un collegamento collegato con clic evento quindi distribuisce il pushState () metodo. Quando clicchiamo sul link, ci aspettiamo che il codice cambi il titolo del documento e l'URL:

Da cima a fondo: Chrome, Firefox, Opera.

E lo fa; lo screenshot mostra che l'URL è cambiato in "circa /" come definito nella pushState () metodo. E dal momento che pushState () metodo crea un nuovo record nella cronologia del browser, siamo in grado di tornare alla pagina precedente attraverso il browser Indietro pulsante.

Tuttavia, tutti i browser in questo esempio stanno attualmente ignorando il titolo parametro. Puoi vedere dallo screenshot che il documento non cambia A proposito - Acme come specificato. Inoltre, chiamando il pushState () il metodo non attiverà anche il popstate evento; un evento che viene inviato ogni volta che la storia cambia, qualcosa di cui abbiamo bisogno! Ci sono alcune discrepanze su come i browser gestiscono questo evento, come dichiarato in MDN:

"I browser tendono a gestire il popstate evento in modo diverso al caricamento della pagina. Chrome (precedente alla v34) e Safari emettono sempre a popstate evento al caricamento della pagina, ma Firefox no. "

Avremo bisogno di una libreria come fallback per far sì che le API Web di History funzionino in modo coerente attraverso il browser senza ostacoli.

Incontra History.js

Dal momento che il pushState () il metodo non funziona al massimo del suo potenziale, in questo tutorial utilizzeremo History.js. Come suggerisce il nome, questa libreria JavaScript è a polyfill, replicare le API native della cronologia che funzionano su browser diversi. Espone anche un insieme di metodi simili alle API native, anche se con poche differenze.

Come accennato in precedenza, l'API nativa del browser viene chiamata attraverso storia oggetto della finestra con la "h" minuscola, mentre si accede all'API History.js Storia con la "H" maiuscola. Dato l'esempio precedente e supponendo di avere caricato il file history.js, possiamo revisionare il codice, come di seguito (di nuovo, si noti la "H" maiuscola).

window.History.pushState (, titolo, url); 

Spero che questa breve spiegazione sia facile da capire. Altrimenti, ecco alcuni ulteriori riferimenti se vuoi saperne di più sull'API della Cronologia web.

• API di cronologia
• Manipolazione della cronologia del browser
• Un'introduzione alla storia HTML5

Costruire il nostro sito statico

In questa sezione non discuteremo ogni passo necessario per costruire un sito web statico in dettaglio. Il nostro sito Web è semplice, come mostrato nello screenshot seguente:

La homepage del sito

Non è necessario creare un sito Web che abbia esattamente lo stesso aspetto; sei libero di aggiungere qualsiasi contenuto e creare tutte le pagine di cui hai bisogno. Tuttavia, ci sono alcuni punti particolari che devi considerare riguardo la struttura HTML e l'uso di id e classe attributi per alcuni elementi.

1. Carica jQuery e History.js all'interno del documento capo. Puoi caricarlo come dipendenza del progetto tramite Bower o tramite un CDN come CDNJS o JSDelivr.
2. Avvolgi l'intestazione, il contenuto e il piè di pagina in a div con l'ID avvolgere; 
3. Sono presenti alcuni elementi di navigazione nell'intestazione del sito Web e nel piè di pagina. Ogni menu dovrebbe puntare a una pagina. Assicurati che le pagine esistano e abbiano contenuto.
4. Ogni link del menu è dato Pagina-link classe che useremo per selezionare questi menu.
5. Infine, diamo ogni link a titolo attributo a cui passeremo pushState () per determinare il titolo del documento.

Tenendo conto di tutto ciò, il nostro markup HTML avrà approssimativamente il seguente aspetto:

Quando hai finito di costruire il tuo sito web statico, possiamo spostarci nella sezione principale di questo tutorial.

Applicazione dell'API Web cronologia

Prima di iniziare a scrivere qualsiasi codice, dobbiamo creare un nuovo file per contenere il nostro JavaScript; lo chiameremo script.js e caricare il file nel documento prima del corpo tag di chiusura. 

Aggiungiamo il nostro primo pezzo di codice per modificare il titolo del documento e l'URL facendo clic sul menu di navigazione:

// 1. var $ wrap = $ ("#wrap"); // 2. $ wrap.on ("click", ".page-link", function (event) // 3. event.preventDefault (); // 4. if (window.location === this.href ) return; // 5. var pageTitle = (this.title)? this.title: this.textContent; pageTitle = (this.getAttribute ("rel") === "home")? pageTitle: pageTitle + " â € "Acme"; // 6. History.pushState (null, pageTitle, this.href););

Ho diviso il codice in diverse sezioni numerate. Ciò ti renderà più facile individuare il codice con il seguente riferimento:

1. Sulla prima riga, selezioniamo l'elemento, 
   , che avvolge tutto il contenuto del nostro sito.
2. Alleghiamo l'evento click. Ma, come puoi vedere sopra, lo colleghiamo al #wrap elemento invece di allegare l'evento direttamente su ogni menu di navigazione. Questa pratica è conosciuta come delegazione di eventi. In altre parole, il nostro #wrap l'elemento è responsabile dell'ascolto degli eventi click per conto di .Pagina-link.
3. Abbiamo anche aggiunto event.preventDefault () in modo che gli utenti non vengano indirizzati alla pagina in questione.
4. Se l'URL del menu cliccato è lo stesso della finestra corrente, non è necessario procedere all'operazione successiva, semplicemente perché non è necessario.
5. Il titolo della pagina variabile contiene il formato del titolo, derivato dall'attributo titolo del collegamento o dal testo del collegamento. Segue il titolo di ogni pagina Pagina Titolo - Acme convenzione, ad eccezione della pagina iniziale. "Acme" è il nostro nome fittizio.
6. Infine, passiamo al titolo della pagina e l'URL della pagina su History.js pushState () metodo.

A questo punto, quando clicchiamo sulla navigazione del menu, il titolo e l'URL dovrebbero cambiare di conseguenza come mostrato di seguito:

Il titolo della pagina e l'URL sono cambiati

Eppure il contenuto della pagina rimane lo stesso! Non è aggiornato per abbinare il nuovo titolo e il nuovo URL. 

Soddisfare

Dobbiamo aggiungere le seguenti righe di codice per sostituire il contenuto effettivo della pagina.

// 1. History.Adapter.bind (window, "statechange", function () // 2. var state = History.getState (); // 3. $ .get (state.url, function (res)  // 4. $ .each ($ (res), function (index, elem) if ($ wrap.selector! == "#" + elem.id) return; $ wrap.html ($ (elem) .html ());););); 

Di nuovo, il codice qui è diviso in diverse sezioni numerate.

1. La prima riga del codice ascolta la modifica della cronologia eseguita tramite History.js pushState () metodo e esegue la funzione allegata.
2. Recuperiamo le modifiche di stato, contenenti vari dati come URL, titolo e id.
3. Attraverso il jQuery .ottenere() metodo recuperiamo il contenuto dall'URL indicato.
4. Infine, risolviamo l'elemento con un id di nome avvolgere dal contenuto recuperato e infine sostituire il contenuto della pagina corrente con esso.

Una volta aggiunto, il contenuto dovrebbe essere aggiornato quando si fa clic sul menu di navigazione. Come accennato, siamo anche in grado di accedere alle pagine visitate avanti e indietro attraverso il browser Indietro e Inoltrare pulsanti.

Il nostro sito Web è presentabile a questo punto. Tuttavia, vorremmo fare un ulteriore passo avanti aggiungendo un po 'di animazione per dare vita alla pagina e, infine, il nostro sito web sembra più avvincente.

Aggiungere animazione e transizioni

L'animazione in questa situazione deve essere semplice, quindi scriveremo tutto da zero, invece di caricare le animazioni attraverso una libreria come Animate.css, Motion UI di ZURB o Effeckt.css. Chiameremo l'animazione slideInUp, come segue:

@keyframes slideInUp from transform: translate3d (0, 10px, 0); opacità: 0;  a transform: translate3d (0, 0, 0); opacità: 1; 

Come suggerisce il nome, l'animazione farà scorrere il contenuto della pagina dal basso verso l'alto insieme all'opacità dell'elemento. Applicare l'animazione all'elemento che avvolge il contenuto principale della pagina, come segue.

.sezione durata dell'animazione: .38s; animation-fill-mode: entrambi; nome-animazione: slideInUp;  

La transizione da una pagina all'altra dovrebbe ora risultare più fluida una volta applicata l'animazione. Qui, puoi fermarti e chiamarlo un giorno! Il nostro sito Web è completo e siamo pronti a distribuirlo affinché il mondo possa vederlo.

Tuttavia, c'è ancora una cosa che potrebbe essere necessario aggiungere, specialmente per coloro che vogliono monitorare il numero di visite e il comportamento dei visitatori sul tuo sito web.

Dobbiamo aggiungere Google Analytics per tenerne traccia visualizzazione della pagina.

statistiche di Google

Poiché le nostre pagine verranno caricate in modo asincrono (tranne per il iniziale pagina caricata) il tracciamento del numero di visualizzazione della pagina dovrebbe essere eseguito in modo asincrono.

Per iniziare, assicurati di aver aggiunto Google Analytics standard nel documento capo. Il codice di solito appare come segue:

Quindi dobbiamo modificare il nostro codice JavaScript per includere il codice di monitoraggio di Google Analytics in modo che ogni pagina caricata in modo asincrono venga misurata anche come visualizzazione della pagina.

Abbiamo diverse opzioni. Innanzitutto, possiamo iniziare a contare quando l'utente fa clic su un link di navigazione, o quando si modifica il titolo della pagina e l'URL, o quando il contenuto della pagina è stato completamente caricato.

Opteremo per quest'ultimo, che è probabilmente il più autentico, e così facendo sfruttiamo il jQuery promettere() metodo dopo aver modificato il contenuto della pagina, come segue:

$ wrap.html ($ (elem) .html ()) .promise () .done (function (res) // Assicurati che il nuovo contenuto sia aggiunto, e che sia disponibile il metodo 'ga ()' if (typeof ga === "funzione" && res.length! == 0) ga ('set', pagina: window.location.pathname, titolo: state.title); ga ('invia', 'visualizzazione di pagina') ;);

Questo è tutto, ora avremo il visualizzazione della pagina registrato in Google Analytics.

Avvolgendo

In questo tutorial abbiamo migliorato un semplice sito Web statico con l'API della cronologia Web per rendere la transizione della pagina più fluida, il caricamento più veloce e, nel complesso, offrire un'esperienza migliore ai nostri utenti. Alla fine di questo tutorial, abbiamo anche implementato Google Analytics per registrare l'utente visualizzazione della pagina in modo asincrono. Inoltre, il nostro sito Web è perfettamente strisciare-able dai robot dei motori di ricerca poiché è, come detto, solo un semplice sito Web HTML.

Questo è stato un corposo tutorial, che spiega molte cose come CSS Animation, jQuery Ajax e jQuery Promise. Ecco una serie di riferimenti per te da esaminare, per rafforzare ciò che hai imparato.

• Introduzione di un principiante all'animazione CSS
• Suggerimento rapido: Delega eventi JavaScript in 4 minuti
• AJAX per progettisti front-end
• disputa Async Compiti con jQuery Promises
• Demistificare Google Analytics

Infine, non dimenticare di visitare il sito demo di questo tutorial e il codice sorgente nel repository.