История pushState и кеш страницы

Question

Как кэшировать страницу, загруженную через ajax, с помощью pushState URL, чтобы избежать перезагрузки страницы с сервера? Например,

страница 1: /foo.html. нажмите кнопку, отправьте запрос ajax, получите ответ и обновите страницу. История pushState как новая страница /bar.html.

   history.pushState({}, '','/bar.html');

На данный момент нам нравится, когда браузер кэширует текущую страницу как /bar.html.

window.onpopstate = function(event) {
  // browser is not loading page automatically for back/forward
  if (event.state)
    location.reload();
};

При нажатии кнопки назад / вперед файл /bar.html должен быть загружен из кэша браузера. Но он снова загружается с сервера. Как этого добиться? то есть пусть обновленная страница ajax обрабатывается как обычный GET /bar.html и кэшируется браузером. как?

Спасибо за любую подсказку. Дейв

Answer 1

Если вы включите http-кэширование, добавив соответствующие заголовки в свои ответы (Cache-Control, Expires, Last-Modified и т. Д.), Тогда эти ответы будут храниться в кэше. Там не один кеш. Есть кеш сервера и нисходящие кеши (ISP, прокси, браузер). Одним из них является кеш браузера.

Предположим, что вы кешируете ответы. Имейте в виду, что ответ http будет кэшироваться независимо от его типа содержимого (html, json и т. Д.). Итак, вы загружаете страницу A, а затем нажимаете на ссылку, которая обновляет страницу с помощью ajax, а URL-адрес - с историей api. Это страница B. Затем вы переходите на страницу C. Ответы A, B и C хранятся в кэше браузера. Но если вы вернетесь на страницу B, браузер не загрузит ее автоматически, так как вы использовали API истории для этого URL. Он просто обновляет URL и запускает событие popstate.

1. Один из подходов состоит в том, чтобы прослушать popstate и вручную выполнить один и тот же вызов ajax. Поскольку ответ B уже хранится в кэше браузера, он будет извлечен оттуда (если он не был изменен на сервере).

2. Другой подход заключается в том, чтобы хранить данные, полученные из ajax, в объекте с именем state и связывать его с выдвинутым URL:

   state = { your_key: your_value }
   history.pushState(state, title, url)
   

   Затем нажмите кнопку "Назад", чтобы отловить событие popstate, получить связанный с ним объект состояния, получить доступ к вашим данным и изменить страницу.

   $(window).on('popstate', function(event) { 
      var state = event.originalEvent.state; 
      if (state) { 
         // use it to modify the page 
      }else{ 
         // ajax call to get the data 
      }
   });
   

   В этом случае, если состояние существует, вы фактически не используете кеш браузера для получения ответа.

Имейте в виду, что объект состояния хранится на диске клиента и имеет ограниченный размер. Таким образом, лучше сохранить в объекте состояния ссылку на данные (например, идентификатор) и сохранить сами данные в памяти. Тем не менее, предполагается, что у вас есть приложение Signle Page, все страницы которого загружены с помощью ajax. (Обычная загрузка страницы очистит память вашего клиента)