Кнопка «Назад» HTML5 History API с частичной загрузкой страницы

Чтобы улучшить производительность/отзывчивость моего веб-сайта, я реализовал частичную загрузку страницы, используя AJAX, replaceState, pushState и слушатель popstate.

По сути, я сохраняю центральную часть моей страницы (HTML) как объект состояния в истории. При нажатии на ссылку я запрашиваю с сервера только центральную часть страницы (идентифицируя эти запросы с другим заголовком Accept) и заменяю его javascript. В popstate я хватаю предыдущую центральную часть и вталкиваю ее обратно в дом.

В основном это работает нормально, однако я обнаружил конкретную проблему, на которой застрял. Это немного сложно объяснить, поэтому прошу прощения, если это не очень понятно.

На большинстве наших страниц есть форма поиска. Частичная загрузка страницы через ajax осуществляется только по запросам GET, а форма выполняет POST, что приводит к полной загрузке страницы.

Если я перемещаюсь по следующему набору страниц, я оказываюсь на искаженной частичной странице, состоящей из ТОЛЬКОцентрального контента, без какого-либо окружающего dom:

Начало на домашней странице (через полная загрузка страницы) - выполнить поиск (post-redirect-get)
Переходит к результатам поиска (через полную загрузку страницы) — затем нажмите «Главная»
. Возвращает вас на домашнюю страницу (через динамическое получение) — щелкните браузер назад
Результаты поиска (из слушателя popstate) — щелкните браузер назад
Неверная главная страница.

Когда появляется искаженная домашняя страница, мой прослушиватель popstate вообще отсутствует.

Я думаю, что вторая загрузка (динамическая, частичная) домашней страницы кэшируется браузером, а затем, когда происходит полный возврат страницы, браузер просто показывает кэшированный частичный ответ, а не полная страница.

Чтобы попытаться исправить это, я добавил заголовок Vary: Accept к ответу, чтобы сообщить браузерам, что содержимое может измениться на основе заголовка accept. Я также добавил Cache-Control max-age=0, pragma no-cache и прошлую дату истечения срока действия для частично загруженного контента, чтобы попытаться заставить браузер не кэшировать это, но ничто из этого не решает эту проблему.

К сожалению, моя компания не разрешает внешний трафик на наши серверы разработки, поэтому я не могу показать вам проблему. Я просмотрел здесь различные похожие вопросы, но ни один из них не кажется совершенно одинаковым, и предложенные решения не работают.

Если я добавлю бессмысленный параметр (blah=blah) к моим динамическим запросам GET, это решит проблему. Однако это уродливый взлом, который я бы предпочел не делать.Похоже, это должно быть решено с помощью заголовков, так как я думаю, что это проблема кэширования. Кто-нибудь может объяснить, что происходит?

10
задан Rob Trickey 28 June 2012 в 09:01
поделиться