PJAX: Problemi con il pulsante Indietro

Question

Alcuni dei nostri collegamenti sono incapsulati da PJAX. Quando un utente fa clic su un collegamento PJAX, il server restituisce solo la parte richiesta dell'HTML.

Se faccio la seguente:

1. Clicca PJAX collegamento
2. Clicca semplice link
3. premere il tasto BACK

il browser visualizzerà il contenuto che è stato restituito dalla richiesta PJAX. L'HTML verrà interrotto perché è solo una parte dell'HTML da visualizzare (controllare this question).

Abbiamo cercato di risolvere il problema non memorizzando nella cache le risposte PJAX (intestazione Cache-Control). Questo ha risolto il nostro problema, ma ne ha generato un altro: Quando l'utente preme il pulsante Indietro, WebKit (Chrome 20.0) carica il contenuto completo dal server, quindi genera l'evento popstate che causa una richiesta PJAX non necessaria.

È possibile ricreare il comportamento corretto del pulsante di ritorno?

Answer 1

Tutto dipende dalle impostazioni di memorizzazione nella cache del server. Il browser memorizza nella cache la risposta AJAX dal server e quando si fa clic sul pulsante Indietro viene utilizzata la versione memorizzata nella cache.

Per evitare la memorizzazione nella cache set seguente intestazioni server:

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

Se si utilizza Rails, quindi provare Wiselinks https://github.com/igor-alexandrov/wiselinks. È un coltellino svizzero per la gestione dello stato del browser. Ecco alcuni dettagli: http://igor-alexandrov.github.io/blog/2013/07/11/the-way-to-wiselinks-1-dot-0/.

Answer 2

Per rendere il browser consapevole delle diverse versioni delle risorse HTTP a seconda delle intestazioni di richiesta, ho aggiunto un'intestazione http Vary http.

Utilizzando Vary, non è più necessario inviare le intestazioni no-cache e quindi riavviare rapidamente la pagina.

In PHP questo sarebbe simile:

header("Vary: X-PJAX"); 

Dato a volte usiamo 3 rappresentazioni per ogni URL (regolare http, pjax e ajax) - perché migrare verso un approccio PJAX in un'applicazione già a volte ajaxified - abbiamo effettivamente utilizzare:

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

In caso di necessità di supportare vecchio IE (più vecchio di IE9) versioni è necessario fare in modo che l'intestazione Vary è spogliato dal vostro server web, perché Otherweise vecchio IE disabilitare la cache per tutte le risorse che fornire un header Vary.

Ciò potrebbe essere realizzato dalla seguente impostazione nella configurazione .htaccess/vhost:

BrowserMatch "MSIE" force-no-vary 

Edit: sottostante bug cromo, https://code.google.com/p/chromium/issues/detail?id=94369