Buen tutorial para usar la API de historial HTML5 (¿Pushstate?) [Cerrado]

Estoy buscando usar la API de historial HTML5 para resolver problemas de enlaces profundos con contenido cargado AJAX, pero estoy luchando por despegar. ¿Alguien sabe de algún buen recurso?

Quiero usar esto, ya que parece una excelente manera de permitir la posibilidad de que los que se envían los enlaces no tengan JS activado. Muchas soluciones fallan cuando alguien con JS envía un enlace a alguien sin él.

Mi investigación inicial parece apuntar a una API de Historia dentro de JS y al método pushState.

http://html5demos.com/history

Para un gran tutorial, la página de Mozilla Developer Network sobre esta funcionalidad es todo lo que necesitará: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Desafortunadamente, la API de historial HTML5 se implementa de manera diferente en todos los navegadores HTML5 (lo que lo hace inconsistente y con errores) y no tiene respaldo para los navegadores HTML4. Afortunadamente, History.js proporciona compatibilidad cruzada para los navegadores HTML5 (lo que garantiza que todos los navegadores HTML5 funcionen como se esperaba) y opcionalmente proporciona un hash-fallback para los navegadores HTML4 (incluido el soporte mantenido para la funcionalidad de datos, títulos, pushState y replaceState).

Puede leer más sobre History.js aquí: https://github.com/browserstate/history.js

Para ver un artículo sobre Hashbangs VS Hashes VS HTML5 History API, consulte aquí: https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling

Me beneficié mucho de 'Sumérgete en HTML 5'. La explicación y la demostración son más fáciles y precisas. Capítulo de historia - http://diveintohtml5.info/history.html y demo de historia - http://diveintohtml5.info/examples/history/fer.html

Tenga en cuenta al usar HTML5 pushstate si un usuario copia o marca un enlace profundo y lo vuelve a visitar, entonces será un éxito directo del servidor que será 404, por lo que debe estar listo para ello e incluso una biblioteca pushstate js no ayudará tú. La solución más fácil es agregar una regla de reescritura a su servidor Nginx o Apache de la siguiente manera:

Apache (en su servidor virtual si está usando 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;

La especificación del historial HTML5 es peculiar.

history.pushState()no despacha un popstateevento ni carga una nueva página por sí mismo. Solo estaba destinado a empujar al estado a la historia. Esta es una función de "deshacer" para aplicaciones de una sola página. Debe despachar manualmente un popstateevento o utilizarlo history.go()para navegar al nuevo estado. La idea es que un enrutador pueda escucharpopstate eventos y hacer la navegación por usted.

Algunas cosas a tener en cuenta:

• history.pushState()y history.replaceState()no despacharpopstate eventos.
• history.back(), history.forward()y los botones de avance y retroceso del navegador se despachanpopstate de eventos.
• history.go()y history.go(0)hacer una recarga de página completa y no enviarpopstate eventos.
• history.go(-1)(atrás 1 página) y history.go(1)(adelante 1 página) hacen popstateeventos de despacho .

Puede usar la API de historial de esta manera para impulsar un nuevo estado Y enviar un evento popstate.

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

Luego escuche los popstateeventos con un enrutador.

Puede probar Davis.js , le brinda enrutamiento en su JavaScript utilizando pushState cuando está disponible y sin JavaScript permite que el código del lado del servidor maneje las solicitudes.

Aquí hay un gran reparto de pantalla sobre el tema por Ryan Bates de railscasts. Al final, simplemente deshabilita la funcionalidad ajax si el método history.pushState no está disponible:

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

Es posible que desee echar un vistazo a este complemento jQuery. Tienen muchos ejemplos en su sitio. http://www.asual.com/jquery/address/

He escrito una abstracción de enrutador muy simple sobre History.js, llamada StateRouter.js . Está en las primeras etapas de desarrollo, pero lo estoy usando como la solución de enrutamiento en una aplicación de una sola página que estoy escribiendo. Al igual que usted, encontré que History.js es muy difícil de entender, especialmente porque soy bastante nuevo en JavaScript, hasta que entendí que realmente necesita (o debería tener) una abstracción de enrutamiento, ya que resuelve un nivel bajo problema.

Este código de ejemplo simple debería demostrar cómo se usa:

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();

Aquí hay un pequeño violín que he inventado para demostrar su uso.

Si jQuery está disponible, puede usar jQuery BBQ