15

I have a "new items" badge on a page that I want to update immediately the page is loaded from the cache (i.e. when hitting "Back" or "Forward" to return to this page). What is the best way to accomplish this?

The setup is pretty simple. The layout for the app looks for new items every 8 seconds, and updates the badge + list of items accordingly.

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

When someone navigates away from this page to look at the details of an item, a lot can happen. Things are "new" until any user has viewed them, and the app will likely have several user using it simultaneously (the kind of workflow used for a call center or support tickets).

To make sure that the badges are always up to date, I have:

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

..And though this works, polling for new items on 'load' is only useful when the page is loaded from the cache. Is there a reliable cross-browser way to tell if a page is being loaded from the cache?

4

5 回答 5

14

导航计时现在在大多数浏览器中（ie9+） 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
 }
于 2015-01-07T19:36:48.370 回答
8

您可以要求网络浏览器不缓存该页面。试试这些 HTTP 标头：

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

特别Cache-control: no-store有趣的是，它告诉浏览器根本不要将页面存储在内存中，这样可以防止在您点击后退/前进按钮时加载过时的页面。

如果您改为这样做，则不必在页面加载时轮询数据。

于 2010-12-14T02:36:41.463 回答
7

部分hacky解决方案是在服务器上设置一个带有当前时间的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
于 2010-12-13T21:48:27.727 回答
0

就个人而言，我会为每个元素设置包含项目 ID 的数据属性。

IE

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

  • 基督教
于 2010-12-14T02:29:47.747 回答
0

好答案：https ://stackoverflow.com/a/9870920/466363

您还可以使用 Navigation Timing 来详细测量网络延迟。

这是一篇好文章：http ://www.html5rocks.com/en/tutorials/webperformance/basics/

如果 fetchStart 和 responseStart 之间的时间差非常小，例如，页面是从缓存中加载的。

通过炖

于 2015-10-28T15:13:49.737 回答