Buon tutorial per l’utilizzo dell’API di cronologia HTML5 (Pushstate?)

Sto cercando di utilizzare l’API della cronologia HTML5 per risolvere i problemi di deep linking con i contenuti caricati con AJAX, ma sto facendo fatica a decollare. Qualcuno sa di buone risorse?

Voglio usare questo come sembra un ottimo modo per consentire la possibilità che quelli che vengono inviati i collegamenti potrebbero non avere JS acceso. Molte soluzioni falliscono quando qualcuno con JS invia un collegamento a qualcuno senza.

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

http://html5demos.com/history

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

    Sfortunatamente, l’API della cronologia HTML5 è implementata in modo diverso in tutti i browser HTML5 (rendendola inconsistente e buggata) e non ha alcun fallback per i browser HTML4. Fortunatamente, History.js fornisce cross-compatibilità per i browser HTML5 (garantendo che tutti i browser HTML5 funzionino come previsto) e opzionalmente fornisce un hash-fallback per i browser HTML4 (incluso il supporto mantenuto per funzionalità di dati, titoli, pushState e replaceState).

    Puoi leggere ulteriori informazioni su History.js qui: https://github.com/browserstate/history.js

    Per un articolo su Hashbangs VS Hashes VS HTML5 History API, vedi qui: https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling

    Ho tratto molto beneficio da “Dive into HTML 5”. La spiegazione e la demo sono più facili e al punto. Capitolo storia – http://diveintohtml5.info/history.html e cronologia demo – http://diveintohtml5.info/examples/history/fer.html

    Tieni presente che durante l’utilizzo di HTML5 pushstate se un utente copia o contrassegna un link diretto e lo visita di nuovo, allora sarà un hit diretto del server che avrà 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 stai usando uno):

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

    nginx

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

    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 schermo sul tema di Ryan Bates dei railscast. Alla fine disabilita semplicemente la funzionalità Ajax se il metodo history.pushState non è disponibile:

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

    Le specifiche della cronologia HTML5 sono stravaganti.

    history.pushState() non invia un evento popstate o carica una nuova pagina da solo. Doveva solo spingere lo stato nella storia. Questa è una funzionalità di “annullamento” per le applicazioni a pagina singola. Devi inviare manualmente un evento popstate o utilizzare history.go() per navigare verso il nuovo stato. L’idea è che un router possa ascoltare eventi popstate e fare la navigazione per te.

    Alcune cose da notare:

    • history.pushState() e history.replaceState() non inviano eventi popstate .
    • history.back() , history.forward() e i pulsanti back e forward del browser popstate eventi popstate .
    • history.go() e history.go(0) eseguono il ricaricamento di una pagina intera e non inviano eventi popstate .
    • history.go(-1) (retro 1 pagina) e history.go(1) (avanti 1 pagina) inviano eventi popstate .

    Puoi utilizzare l’API di cronologia come questa 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 popstate eventi popstate con un router.

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

    Ho scritto un’astrazione del router molto semplice in cima a History.js , denominata StateRouter.js . È nelle prime fasi di sviluppo, ma lo sto utilizzando come soluzione di routing in un’applicazione a pagina singola che sto scrivendo. Come te, ho trovato molto difficile capire History.js, soprattutto perché sono abbastanza nuovo in JavaScript, fino a quando ho capito che hai davvero bisogno (o dovresti avere) di un’astrazione di routing su di esso, poiché risolve un basso livello 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 dimostrare il suo utilizzo.

    se jQuery è disponibile, è ansible utilizzare jQuery BBQ