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

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

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

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

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

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

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

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

Ответ 1

Частичное хакерское решение состоит в том, чтобы иметь var с текущим временем, установленным на сервере, и установить var с текущим клиентом в верхней части страницы. Если они отличаются более чем на определенный порог (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 с уникальным ключом для текущей версии страницы. Если ни один из них не существует, вы пишете для него файл 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

Ответ 2

Время навигации в большинстве браузеров теперь (т.е. 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
 }

Ответ 3

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

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

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

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

Ответ 4

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

т.е.

<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?

Christian

Ответ 5

хороший ответ: fooobar.com/questions/17936/...

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

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

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

by stewe

Ответ 6

попробуйте выполнить script в вашем js файле.

if(!!window.performance && window.performance.navigation.type == 2)
{
    window.location.reload();
}