Buona esercitazione per l'utilizzo dell'API History HTML5 (Pushstate?) [Chiuso]

Sto cercando di utilizzare l'API History HTML5 per risolvere problemi di deep linking con il contenuto caricato AJAX, ma sto lottando per decollare. Qualcuno sa di buone risorse?

Voglio usare questo in quanto sembra un ottimo modo per consentire alla possibilità di coloro che vengono inviati che i collegamenti potrebbero non avere JS attivato. Molte soluzioni falliscono quando qualcuno con JS invia un collegamento a qualcuno senza.

La mia ricerca iniziale sembra indicare un'API History all'interno di JS e il metodo pushState.

http://html5demos.com/history

Per un grande tutorial, la pagina Rete di sviluppatori Mozilla su questa funzionalità è tutto ciò di cui hai bisogno: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Sfortunatamente, l'API History HTML5 è implementata in modo diverso in tutti i browser HTML5 (rendendola incoerente e buggy) e non ha fallback per i browser HTML4. Fortunatamente, History.js fornisce compatibilità incrociata per i browser HTML5 (garantendo che tutti i browser HTML5 funzionino come previsto) e facoltativamente fornisce un hash-fallback per i browser HTML4 (incluso il supporto mantenuto per dati, titoli, funzionalità pushState e ReplaceState).

Puoi leggere di più su History.js qui: https://github.com/browserstate/history.js

Per un articolo sull'API Hashbangs VS Hash VS HTML5 History, consultare qui: https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling

Ho tratto molto beneficio da "Immergiti in HTML 5". La spiegazione e la demo sono più semplici e pertinenti. Capitolo di storia - http://diveintohtml5.info/history.html e demo di storia - http://diveintohtml5.info/examples/history/fer.html

Tieni a mente mentre usi HTML5 pushstate se un utente copia o aggiunge un segnalibro a un link diretto e lo visita di nuovo, quindi sarà un hit diretto del server che sarà 404 quindi devi essere pronto per questo e anche una libreria js pushstate non aiuterà tu. La soluzione più semplice è aggiungere una regola di riscrittura al tuo server Nginx o Apache in questo modo:

Apache (nel tuo vhost se ne usi uno):

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>

nginx

rewrite ^(.+)$ /index.html last;

Le specifiche della cronologia HTML5 sono bizzarre.

history.pushState()non invia un popstateevento o carica una nuova pagina da solo. Doveva solo spingere lo stato nella storia. Questa è una funzione "annulla" per le applicazioni a pagina singola. Devi inviare manualmente un popstateevento o utilizzare history.go()per passare al nuovo stato. L'idea è che un router può ascoltarepopstate eventi e fare la navigazione per te.

Alcune cose da notare:

• history.pushState()e history.replaceState()non spedirepopstate eventi.
• history.back(), history.forward()e i pulsanti avanti e indietro del browser invianopopstate eventi.
• history.go()e history.go(0)ricaricare l'intera pagina e non spedirepopstate eventi.
• history.go(-1)(indietro di 1 pagina) e history.go(1)(avanti di 1 pagina) eseguono popstateeventi di invio .

È possibile utilizzare l'API di cronologia in questo modo per inviare un nuovo stato E inviare un evento popstate.

history.pushState({message:'New State!'}, 'New Title', '/link'); window.dispatchEvent(new PopStateEvent('popstate', { bubbles: false, cancelable: false, state: history.state }));

Quindi ascolta gli popstateeventi con un router.

Puoi provare Davis.js , ti dà il routing nel tuo JavaScript usando pushState quando disponibile e senza JavaScript consente al tuo codice lato server di gestire le richieste.

Ecco un grande cast dello schermo sull'argomento di Ryan Bates di railscast. Alla fine disabilita semplicemente la funzionalità ajax se il metodo history.pushState non è disponibile:

http://railscasts.com/episodes/246-ajax-history-state

Potresti dare un'occhiata a questo plugin jQuery. Hanno molti esempi sul loro sito. http://www.asual.com/jquery/address/

Ho scritto un'astrazione del router molto semplice su History.js , chiamata StateRouter.js . È nelle prime fasi di sviluppo, ma lo sto usando come soluzione di routing in un'applicazione a pagina singola che sto scrivendo. Come te, ho trovato History.js molto difficile da comprendere, soprattutto perché sono abbastanza nuovo in JavaScript, fino a quando ho capito che hai davvero bisogno (o dovresti avere) un'astrazione di routing su di esso, poiché risolve un livello basso problema.

Questo semplice codice di esempio dovrebbe dimostrare come viene utilizzato:

var router = new staterouter.Router();
// Configure routes
router
  .route('/', getHome)
  .route('/persons', getPersons)
  .route('/persons/:id', getPerson);
// Perform routing of the current state
router.perform();

Ecco un piccolo violino che ho inventato per dimostrarne l'utilizzo.

se jQuery è disponibile, è possibile utilizzare jQuery BBQ