PJAX: Problemas con el botón Atrás

Question

Algunos de nuestros enlaces están envueltos por PJAX. Cuando un usuario hace clic en un enlace PJAX, el servidor devuelve solo la parte requerida del HTML.

Si hago lo siguiente:

1. Haga clic PJAX enlace
2. simple clic enlace
3. Presione el botón atrás

el navegador mostrará el contenido que fue devuelto por la solicitud PJAX. El HTML se romperá porque solo se muestra una parte del HTML (marque this question).

Hemos intentado solucionar esto al no almacenar en caché las respuestas PJAX (Cache-Control encabezado). Esto solucionó nuestro problema pero planteó otro: Cuando el usuario presiona el botón Atrás, WebKit (Chrome 20.0) carga el contenido completo del servidor, luego se dispara el evento popstate que causa una solicitud PJAX innecesaria.

¿Es posible recrear el comportamiento correcto del botón de retroceso?

Answer 1

Todo esto depende de la configuración de almacenamiento en caché del servidor. Su navegador almacena en caché la respuesta AJAX del servidor y cuando hace clic en el botón Atrás usa la versión en caché.

Para prevenir la producción de almacenamiento en caché siguientes encabezados en el servidor:

'Cache-Control' => 'no-cache, no-store, max-age=0, must-revalidate' 
'Pragma' => 'no-cache' 

Si está utilizando rieles, entonces definitivamente tratar Wiselinks https://github.com/igor-alexandrov/wiselinks. Es una navaja suiza para la gestión del estado del navegador. Aquí hay algunos detalles: http://igor-alexandrov.github.io/blog/2013/07/11/the-way-to-wiselinks-1-dot-0/.

Answer 2

Para que el navegador tenga en cuenta las diferentes versiones de los recursos HTTP según los encabezados de solicitud, agregué un Vary encabezado http.

Al usar Vary, ya no necesita enviar encabezados sin caché y, por lo tanto, volver a tener la página rápida.

En PHP este sería el resultado:

header("Vary: X-PJAX"); 

Dado que a veces utilizamos 3 representaciones por URL (regular http, pjax y Ajax) - debido a migrar a un enfoque PJAX en una aplicación ya veces Ajaxified - en realidad utilizar:

header("Vary: X-PJAX,X-Requested-With"); 

En caso de tener que soportar edad IE (mayores de IE9) versiones que necesita para asegurarse de que la cabecera Vary es despojado de su servidor web, ya que de algún otro modo edad IE desactivar el almacenamiento en caché para todos sus recursos, que proporcionar un encabezado Vary.

Esto podría lograrse mediante la configuración siguiente en su fichero de configuración .htaccess/host virtual:

BrowserMatch "MSIE" force-no-vary 

Editar: fallo subyacente cromo, https://code.google.com/p/chromium/issues/detail?id=94369