htmlhttp-headersexpires-header

HTTP header "expires" does not render the page from cache

I'm not really familiar with all the meta allowing you to manage the cache client-side so i tried to make a simple example with the HTTP header "expires"

With the following code:

<!DOCTYPE html>
<html>
    <head>
            <meta charset="utf-8" />
            <meta http-equiv="expires" content="mon, 18 Jul 2016 1:00:00 GMT" />
            <title>MY TITLE</title>
    </head>

    <body>
MY BODY
    </body>

</html>

When i load the page for the first time (cache cleared before). the page is saved in the cache but when i update my body with "MY BODY2" and reload the page, the page displays "MY BODY 2". The browser was supposed to take the page from cache (with "MY BODY") since the expiration is in july 2016, no ?

Thank you for helping me to put some light on this problem

Solution

  • It depends how you reload the page.

    You've basically three options:

    1. Browse to another page and then back. This should use the cache.
    2. Press F5 or reload but. This is an explicit reload so will check with the server if there's a new version - even if it's cached - and download it if there's a newer version.
    3. Force reload (Ctrl+F5 in some browsers). This says ignore the cache and download from scratch (even if the cached version appears to be the same as what server will send you).

    I suspect you've done option 2 and didn't realise this would check with the server and assumed it would use the cache if still valid. The reason it actually checks with the server is that a reload is often done when the user suspects the content has changed, or wants to re-download it (e.g. If page didn't render properly).

    Also it should be noted that meta headers in HTML are not as good as http response headers set up by the server for various reasons including browser support reasons.

    And finally it's worth opening developer tools (F12 in Chrome for example) and checking network tab to see what's going on but in that case make sure you don't have "Disable cache" ticked when it's open (it's ticked by default in Chrome as most developers don't want to use a cache when developing).