SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    737
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Question Handling the Cache problem

    Hi

    As you know applications like gmail / yahoomail they constantly keep changing their js/css and when you login you dont have to clear your browser cache to see the new changes, they are automatically shown to you.

    How do they do this? I see there are two approaches:

    1) in your code where you specify the path of the js/css you append time with a querystring that will force your browser to load the lastest js/css no matter it has been modified or not.

    2) You use the "Pragma: No-cache" Tag in your page.

    But the problem in these approaches is that your application makes an HTTP request every time its called since it assumes the file is new.

    So whats the solution?


    Any help is appreciated.
    Thanks

  2. #2
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's very simple solution. They are taking version of specific file. You can do it like this:

    Code:
    <link href="www.yourwebsite.com/css/libs.css?version=<?=filemtime('www.yourwebsite.com/css/libs.css')?>" rel="stylesheet" type="text/css"/>
    Browser caches current version (timestamp). When you update this file, file modified date changes, so your version updates to new timestamp

  3. #3
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    737
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    That is a great trick. thanks for sharing.

    Is it also possible to do this from server / apache level?

  4. #4
    SitePoint Guru bronze trophy
    Join Date
    Dec 2003
    Location
    Poland
    Posts
    930
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by belekevicius View Post
    It's very simple solution. They are taking version of specific file. You can do it like this:

    Code:
    <link href="www.yourwebsite.com/css/libs.css?version=<?=filemtime('www.yourwebsite.com/css/libs.css')?>" rel="stylesheet" type="text/css"/>
    Browser caches current version (timestamp). When you update this file, file modified date changes, so your version updates to new timestamp
    This is a good solution but can be resource hungry on busy web sites especially if you have a lot of css/js files since on each page request the server has to access those files even if it doesn't have to serve them as they are cached in the user's browser. I tend to use one global version number for the whole site (in the db or in a file) and append it to the url of all css and js files. This requires me to change the number manually after I make any changes but it can be partially automated with a script as well.

  5. #5
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    737
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by belekevicius View Post
    It's very simple solution. They are taking version of specific file. You can do it like this:

    Code:
    <link href="www.yourwebsite.com/css/libs.css?version=<?=filemtime('www.yourwebsite.com/css/libs.css')?>" rel="stylesheet" type="text/css"/>
    Browser caches current version (timestamp). When you update this file, file modified date changes, so your version updates to new timestamp

    Hi

    I Just found that this works for all browsers but chrome, so any work around to make it work on chrome as well?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •