PJAX: Các sự cố với nút quay lại

Question

Một số liên kết của chúng tôi được bao bọc bởi PJAX. Khi người dùng nhấp vào liên kết PJAX, máy chủ chỉ trả về phần bắt buộc của HTML.

Nếu tôi làm như sau:

1. Bấm PJAX liên kết
2. Nhấp vào liên kết đơn giản
3. Bấm lại nút

trình duyệt sẽ hiển thị nội dung đã được trả về bởi các yêu cầu PJAX. HTML sẽ bị hỏng vì nó chỉ là một phần của HTML được hiển thị (kiểm tra this question).

Chúng tôi đã cố khắc phục điều này bằng cách không lưu vào bộ nhớ đệm phản hồi PJAX (Cache-Control tiêu đề). Điều này khắc phục được sự cố của chúng tôi nhưng đưa ra một vấn đề khác: Khi người dùng nhấn nút quay lại, WebKit (Chrome 20.0) tải toàn bộ nội dung từ máy chủ, sau đó kích hoạt sự kiện popstate gây ra yêu cầu PJAX không cần thiết.

Có thể tạo lại hành vi nút quay lại chính xác không?

Answer 1

Tất cả điều này phụ thuộc vào cài đặt bộ nhớ cache của máy chủ. Trình duyệt của bạn lưu trữ phản hồi AJAX từ máy chủ và khi bạn nhấp vào nút Quay lại, nó sử dụng phiên bản được lưu trong bộ nhớ cache.

Để ngăn chặn bộ nhớ đệm đặt tiêu đề trên máy chủ sau:

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

Nếu bạn đang sử dụng Rails, sau đó chắc chắn thử Wiselinks https://github.com/igor-alexandrov/wiselinks. Nó là một con dao quân đội Thụy Sĩ để quản lý nhà nước trình duyệt. Dưới đây là một số chi tiết: http://igor-alexandrov.github.io/blog/2013/07/11/the-way-to-wiselinks-1-dot-0/.

Answer 2

Để làm cho Trình duyệt biết các phiên bản khác nhau của tài nguyên HTTP tùy thuộc vào tiêu đề yêu cầu, tôi đã thêm tiêu đề http: // Vary http.

Sử dụng Vary, bạn không cần phải gửi tiêu đề không có bộ nhớ cache nữa và do đó, hãy nhanh chóng đưa trang của bạn trở lại.

Trong PHP này sẽ như thế nào:

header("Vary: X-PJAX"); 

Vì chúng ta đôi khi sử dụng 3 cơ quan đại diện cho mỗi URL (thường xuyên http, pjax và ajax) - bởi vì di chuyển đến một cách tiếp cận PJAX trong một ứng dụng đã đôi khi ajaxified - chúng tôi thực sự sử dụng:

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

Trong trường hợp bạn cần hỗ trợ cũ IE (lớn hơn IE9) phiên bản bạn cần phải chắc chắn rằng tiêu đề Vary được lột bởi webserver của bạn, bởi vì otherweise cũ IE sẽ vô hiệu hóa bộ nhớ đệm cho mọi nguồn lực của bạn mà cung cấp tiêu đề Vary.

này có thể đạt được bởi các thiết lập sau đây trong cấu hình .htaccess/vhost của bạn:

BrowserMatch "MSIE" force-no-vary 

Edit: cơ sở cho Chrome lỗi, https://code.google.com/p/chromium/issues/detail?id=94369