Моя страница загружается из кэша браузера?

Question

У меня есть значок «новые элементы» на странице, который я хочу обновить сразу же после загрузки страницы из кэша (т. Е. При нажатии «Назад» или «Вперед» для возврата на эту страницу).Каков наилучший способ сделать это?

Настройка довольно проста.Макет приложения ищет новые элементы каждые 8 ​​секунд и соответственно обновляет значок + список элементов.

$(function() {
    setInterval( App.pollForNewItems, 8000 );
});

Когда кто-то уходит с этой страницы, чтобы посмотреть детали элемента, очень многоможет случиться.Вещи являются «новыми» до тех пор, пока любой пользователь не просмотрит их, и приложение, вероятно, будет иметь несколько пользователей, использующих его одновременно (тип рабочего процесса, используемого для колл-центра или билетов поддержки).

Чтобы убедиться, что значки всегда актуальны, у меня есть:

$(window).bind('focus load', function ( event ) {
    App.pollForNewItems();
});

.. И хотя это работает, опрос для новых элементов при «нагрузке» полезен только тогда, когда страница загружается из кэша,Есть ли надежный кросс-браузерный способ узнать, загружается ли страница из кэша?

Answer 1

Время навигации в большинстве браузеров сейчас (т.е. 9+) http://www.w3.org/TR/navigation-timing/#sec-navigation-info-interface

 if (!!window.performance && window.performance.navigation.type === 2) {
   // page has been hit using back or forward buttons
 } else {
   // regular page hit
 }

Answer 2

Вы можете попросить веб-браузер не кэшировать страницу.Попробуйте эти HTTP-заголовки:

Cache-control: no-cache
Cache-control: no-store
Pragma: no-cache
Expires: 0

В частности, Cache-control: no-store интересно, потому что он говорит браузеру вообще не сохранять страницу в памяти, что предотвращает загрузку устаревшей страницы при нажатии кнопки «назад / вперед».

Если вы сделаете это вместо этого, вам не нужно запрашивать данные о загрузке страницы.

Answer 3

Частичное хакерское решение состоит в том, чтобы иметь переменную с текущим временем, установленным на сервере, и установить переменную с текущим клиентским временем в верхней части страницы. Если они отличаются более чем на определенное пороговое значение (1 минута?), То можно предположить, что это загрузка страницы из кэша.

Пример JS (с использованием синтаксиса ASP.Net для серверной части):

var serverTime = new Date('<%= DateTime.Now.ToUniversalTime().ToString() %>');
var pageStartTime = Date.UTC(new Date());
var isCached = serverTime < pageStartTime &&
               pageStartTime.getTime() - serverTime.getTime() > 60000;

В качестве альтернативы, используя куки на стороне клиента (при условии, что куки включены), вы можете проверить наличие куки с уникальным ключом для текущей версии страницы. Если ничего не существует, вы пишете cookie для него, и на любой другой странице доступа наличие cookie показывает, что он загружается из кэша.

например. (предполагается, что доступны некоторые вспомогательные функции cookie)

var uniqueKey = '<%= SomeUniqueValueGenerator() %>';
var currentCookie = getCookie(uniqueKey);
var isCached = currentCookie !== null;
setCookie(uniqueKey); //cookies should be set to expire 
                      //in some reasonable timeframe

Answer 4

хороший ответ: https://stackoverflow.com/a/9870920/466363

Вы также можете использовать навигационную синхронизацию, чтобы детально измерить задержку в сети.

Вот хорошая статья: http://www.html5rocks.com/en/tutorials/webperformance/basics/

Если разница во времени между fetchStart и responseStart очень мала, страница была загружена, например, из кэша.

от stewe

Answer 5

Лично я бы установил атрибут данных, содержащий идентификатор элемента для каждого элемента.

Т.е.

<ul>
  <li data-item-id="123">Some item.</li>
  <li data-item-id="122">Some other item.</li>
  <li data-item-id="121">Another one..</li>
</ul>

Ваша App.pollForNewItems функция получит атрибут data-item-id первого элемента(если сначала появятся самые новые) и отправит его на сервер с вашим исходным запросом.

Затем сервер вернет только элементы WHERE id > ..., которые затем можно добавить в список.

Я все еще не понимаю, почему вы хотите узнать, есть ли в браузере кэшированная версия страницы.

Кроме того, есть ли причина для привязки к load вместо ready?

• Кристиан