开发者

How to prevent content being displayed from Back-Forward cache in Firefox?

Browser: Firefox 6.0

I've Page A with the following setup to make sure the content is NOT stored in the bfcache of the browser:

1) $(window).unload(function(){});

2) Following HTTP headers:

<meta http-equiv="pragma" content="no-cache" /> 
<meta http-equiv="expires开发者_运维百科" content="-1" />
<meta http-equiv="cache-control" content="no-cache"/>

I've also hooked up the events pagehide and pageshow. When I am navigating away from the page, pagehide is invoked with CORRECT value for the event property persisted = false (that is what needed: no persistence in cache!)

After navigating a couple of pages, I've a window.history.go(-2); to go back to Page A. At this point, I want Firefox to poll the server for the updated version instead of displaying from the cache. The pageshow of Page A is invoked with CORRECT value for the event propertypersisted = false (meaning the page is NOT loaded from cache). BUT the page content is not the server data; it is the stale content (same as when navigating away from the page initially)! Fiddler also does not show a new request to server.

Google Chrome also exhibits the same behaviour. IE works as expected (reloads fresh data)!

Any idea what am i missing?

Thanks in advance!


There are multiple caches involved. There's the browser's document cache (bfache), the browser's HTTP cache, and possibly intermediate HTTP caches.

The <meta> tags you show above have absolutely no effect in current Chrome or Firefox. They may have an effect in IE.

So chances are, your page is just being read from the browser's HTTP cache.

If you really want to send no-cache HTTP headers, you should do that. But they need to be actual HTTP headers: as I said above, the <meta> tag "equivalents" do nothing.

And, importantly, any other intermediate caches are not going to be parsing your HTML so might cache things if you don't actually send the right HTTP headers.


If you set Cache-Control: "no-cache, no-store, must-revalidate" to http headers the page won't be cached in back-forward cache.

Firefox also considers event handlers on beforeunload event as a signal to not store page in BFC, but Safari ignores such handlers, so it's better to set correct http headers to indicate the nature of the page content (cacheable or variable)


There are two caches to bear in mind:

The bfcache (back-forwards cache)

The bfcache (in Firefox, Safari and Chrome) stores the page in memory, including any dynamic modifications to the DOM. It is used by Firefox, Safari and Chrome when pressing back. To attempt to ensure that the page is not stored in this cache, you need to run these lines:

window.addEventListener('unload', function(){});
window.addEventListener('beforeunload', function(){});

Note that this seems to work in desktop Firefox and Chrome, but doesn't always work in desktop Safari, or Android Chrome or Android Firefox or iOS Safari.

Note that Webkit documentation calls the bfcache the "Page Cache".

The normal browser cache

Pages are cached in the normal browser cache, unless you set the proper no-store value in the Cache-Control heading. To be extra sure, send this full header:

Cache-Control: max-age=0, no-cache, no-store, must-revalidate, private

Firefox, Safari and Chrome will first check the bfcache when pressing the back button. They will then fall back to the normal cache. So you need to both add an event listener to unload, and set this Cache-Control HTTP header. Note that using <meta> instead of the HTTP header may not work.

References:

  • Article on back/forward cache by Chrome Developer Relations


The answer below does not work any more:

From answer on SO, adding an unload event to window causes the back/forward cache to be cleared.

UPDATE. POSSIBLE SOLUTION:

BFCache can bring surprises to developers, because at least in Firefox when moving back/forward the page does not refresh even if it was told by HTTP headers. So it's better to assume that the page will not refresh.

On the other hand, what is the difference between getting page with outdated data because of BFCache, and finding a tab in your browser that you did not reload for ages?

If you care about those kind of things, write some javascript that checks server for updates and reloads sensitive information. This is a chance to turn your problem into win ).

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜