Cómo hacer frente a la página de actualización con JS History API pushState

Question

Un pequeño sitio web que estaba creando (más parecido a tocar el violín) utiliza AJAX para cargar cada página. Anteriormente estaba cambiando el hash de la url, funcionaba de maravilla pero era feo, y el usuario podía actualizar la página y permanecería en la misma página.

Ahora he cambiado al uso de pushState en la API de historial de JS, que se ve mucho mejor, y el trabajo de ida y vuelta, pero refrescante no lo hace. Por ejemplo:

Pasando a: http://example.com/page2 va a un 404 ya que no hay una página real llamada página 2. Pero si hago clic en el botón que usa el método pushState para cambiar la url, funciona como debería.

¿Cómo puedo permitir actualizaciones y enlaces permanentes con la nueva API de historial?

(¿Y cómo los motores de búsqueda tratan esto, teniendo en cuenta que Google tuvo que crear una forma de indexación de hash urls, haciendo que el desarrollador cambie a #!, es posible que hagan algo similar para la API de historial en el futuro?)

Answer 1

No debe usar pushState para insertar URL inválidas. Está destinado a ser utilizado en casos donde el sitio funciona con y sin AJAX, es decir, usted empuja la URL que daría como resultado la misma salida sin AJAX al crear esta salida con AJAX.

Si solo desea URL virtuales (como en la era anterior a PushState), siga usando la etiqueta hash.

Answer 2

Tuve que redirigir errores 404 a la página principal de sitios (la que carga las solicitudes AJAX), y luego obtener el último componente de la URL y ejecutar la función javascript que carga la página utilizando una solicitud AJAX. No es una gran solución, pero parece funcionar bien.

Answer 3

Esta es una pregunta algo antigua, pero fue uno de los mejores resultados de google. En la búsqueda de ser útil, esta es mi solución.

Puede utilizar Mod_Rewrite de Apache para volver a escribir la url en una ubicación central. Por ejemplo: example.com/p2 obtiene el contenido de su página de example.com/index.php?page=p2 Puede mantener su implementación actual de History API y AJAX para obtener el contenido e incluir lo siguiente en su. htaccess

<ifModule mod_rewrite.c> 
    RewriteEngine On 
    RewriteRule ^([^/\.]+)/?$ index.php?page=$1&full=1 [L] 
</ifModule> 

en su index.php:

<?php 
    if(isset($_GET['full']) { 
    //Generate the full page here 
    }else{ 
    //Generate just the content for AJAX 
    } 
?> 

This Page es un buen manual sobre el uso de mod_rewrite para redirigir un sitio web completo. (Los comentarios 11 & 13 tienen adiciones útiles también)