15

ページがキャッシュから読み込まれるとすぐに更新したいページに「新しいアイテム」バッジがあります（つまり、「戻る」または「進む」を押してこのページに戻るとき）。これを達成するための最良の方法は何ですか？

セットアップはとても簡単です。アプリのレイアウトは8秒ごとに新しいアイテムを探し、それに応じてバッジとアイテムのリストを更新します。

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

誰かがこのページから離れてアイテムの詳細を見ると、多くのことが起こる可能性があります。ユーザーが表示するまでは「新しい」ものであり、アプリでは複数のユーザーが同時に使用する可能性があります（コールセンターやサポートチケットに使用されるワークフローの種類）。

バッジが常に最新であることを確認するために、私は次のことを行います。

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

..これは機能しますが、「load」での新しいアイテムのポーリングは、ページがキャッシュからロードされる場合にのみ役立ちます。ページがキャッシュからロードされているかどうかを確認するための信頼できるクロスブラウザの方法はありますか？

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

ページをキャッシュしないようにWebブラウザに要求できます。次の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

部分的なハッキーな解決策は、サーバーに現在の時刻が設定された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がキャッシュからロードされていることを示します。

例（いくつかの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を含むデータ属性を設定します。

つまり

<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

ナビゲーションタイミングを使用して、ネットワーク遅延を詳細に測定することもできます。

ここに良い記事があります：http ：//www.html5rocks.com/en/tutorials/webperformance/basics/

fetchStartとresponseStartの時間差が非常に小さい場合、たとえば、ページはキャッシュからロードされました。

steweによって

于 2015-10-28T15:13:49.737 に答える