Search code examples
phpjavascriptcross-platformcaching

Deleting all cached page of the site

Scenario

Mobile and desktop version.
I'm developing a website with a desktop and a mobile version: users can choose to switch version if they want to: javascript will save a cookie telling the desired version and will reload the page appending to its url the value "?nocache=1".
Pages caching.
Pages are cached using the following PHP code:

<?php
$lastModified=filemtime(__FILE__);
$etagFile = md5_file(__FILE__);
if(empty($_GET['nocache'])){
    $ifModifiedSince=(isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) ? $_SERVER['HTTP_IF_MODIFIED_SINCE'] : false);
    $etagHeader=(isset($_SERVER['HTTP_IF_NONE_MATCH']) ? trim($_SERVER['HTTP_IF_NONE_MATCH']) : false);
    header("Last-Modified: ".gmdate("D, d M Y H:i:s", $lastModified)." GMT");
    header("Etag: $etagFile");
    header('Cache-Control: public');
    if (strtotime($ifModifiedSince)==$lastModified || $etagHeader == $etagFile){
        header("HTTP/1.1 304 Not Modified");
        exit;
    }
}
?>

The problem

The initial condition in the PHP code for the cache will cause the browser load again the page from the server if the user changes version of the site, but all the other pages will remain cached.

My question

Is there any way I can load again all the pages if the desired version of the site is changed?

Solution

  • Answer

    In PHP write a JavaScript variable containing the version (desktop or mobile) of the page generated. Something like: echo "var pageVersion = $desktopOrMobile;";

    Then add a JavaScript on page load which compares this variable and the cookie. If they match, everything is fine. If they don't you have to reload the page. (Something like: window.location.href = window.location.href + '?nocache=1';)

    You could even do this check periodically (every second or so) in case you wanted to change the version in all tabs and windows of the same browser.

    Disclaimer

    I have to admit that I haven't tried this myself but I'm quite sure that this concept will work.

    Another approach would be to store which version is in cache in some way that PHP can read it: Either you would have to append a GET variable like ?version=mobile to every URL or insert that information into the URL itself like example.net/mobile/foo/bar or mobile.example.net/foo/bar. This way, PHP could compare the version in cache with the desired version in the cookie and redirect the request to the desired URL.

    This solution doesn't need the "nocache-hack" and could be done without JavaScript, but I believe it would be more work since you had to rewrite all the links to contain the version or use some URL-rewriting which could break links to other resources. Therefore I'd recommend the above answer.

    If needed, I will happily give further instructions and/or improve my answer.

    Side note

    In my opinion you do some very aggressive caching here. You might do this for good reason but it could make you a lot of trouble if you begin loading data from a database or include other PHP files via require because your caching algorithm will not notice if these additional resources have been changed.