Home / Questions / 63716
Accepted
Jorius
Asked: 2020-04-19 12:07:55 +0800 CST 2020-04-19 12:07:55 +0800 CST

How to avoid cache of css and js files

  • 772

Lately I've seen a lot of problems in Google Chrome (in other browsers it works fine, except also Safari on Mac) when loading a new version of a style sheet ( .css) or a javascript script ( .js), I thought I could solve it by A simple:

<link rel="stylesheet" href="/private/css/visual.css?v=1" />
<script src="/private/js/visual.js?v=1"></script>

But it doesn't always work for me and I have to be constantly changing the value of v=1so that it loads the new versions of the respective files

Is there any way to prevent the cache properly?

Get a library, native javascript code, something to add to my files .cssor .js, change on my server, change on my machine, browser settings, etc... and avoid this problem.

NOTE: The cache remains both locally and already hosted on a server / domain

UPDATE: Maybe at first I wasn't very clear, although JuankGlezz's answers and derivatives help me in the development environment, I'm looking for an answer that can serve my end users without them having to touch anything...

javascript

8 Answers

  1. Best Answer

    This can be used in production and debugging environments, if you are one of those who constantly modify the SCRIPT and CSS of web pages, but you do not usually keep the browser console open and you want to avoid the cache, you can add the following lines in the HTML.

    <head>
  <meta http-equiv="Expires" content="0">
  <meta http-equiv="Last-Modified" content="0">
  <meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
  <meta http-equiv="Pragma" content="no-cache">
</head>

    In WordPress, to add tags in the </head>we must edit the template or theme , specifically we must edit the file header.phpwhere the <head>and tags are located </head>.

    In an application developed in PHP, you can force it not to save cache in the browser, you can use the following lines:

    <?php
  header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
  header("Expires: Sat, 1 Jul 2000 05:00:00 GMT"); // Fecha en el pasado
?>

    If you are a developer and you don't want to add the previous lines, you can avoid the cache from the browser console (F12).

    It is recommended to keep the browser console open (F12) and enable the disable cache box in the network tab

    enable the disable cache checkbox in the network tab

    For Firefox open the debugger console (F12)

    1. we go to toolbox options
    2. we seek to disable the http cache

    enable the disable cache checkbox in firefox

    Note:

    For this, the console must always be open (F12) otherwise it will continue to save the cache for both Google Chrome and Mozilla Firefox .
    The most recommended in the field of debugging is to open a window in incognito mode.

    • 24

  2. One way is when you reference JavaScript files you put at the end ?1. This means that the ?1is some kind of versioning of the file so that the browser reloads it again and doesn't load the cached files. For example:

    <script type="text/javascript"
    src="http://sitio.com/jsFiles/miArchivoJavaScript.js?123">
</script>

    The recommended thing is to have some kind of function so that after the question mark I generate a random number.

    The advantage of using this functionality is that it requires no user intervention.

    Update

    Since you are using a PHP solution, it would be best to generate a dynamic number to the version of the JavaScript or CSS file to ensure that the file is always loaded from the server and not from the browser's cache using the function rand()to generate a random number.

    For example:

    <link rel="stylesheet" href="/private/css/visual.css?v=<?php echo(rand()); ?>" />
<script src="/private/js/visual.js?v=<?php echo(rand()); ?>"></script>
    • 21

  3. You can test this way if your file has a .php extension :

    <script type="text/javascript"
 src="http://sitio.com/jsFiles/miArchivoJavaScript.js?v=<?php echo time();?>">
 </script>

    And if you want to do it from JS, maybe something like this simple would help:

    var js = document.querySelectorAll('script');

for (var i = 0; i < js.length; i++) {
    js[i].src = js[i].src + '?v=' + Date.now();
}

var css = document.querySelectorAll('link');

for (var i = 0; i < css.length; i++) {
    css[i].href = css[i].href + '?v=' + Date.now();
}

    Just remember that if you use JS code, your JS or CSS files should be loaded first, then immediately update the src or href attribute .

    • 4

  4. If you always want to avoid the cache, you could do:

    <script type="text/javascript">
  var estilos = 'carpeta/css/style.css?' + Math.random();
</script>

<script type="text/javascript">
  document.write('<link href="' + estilos + '" rel="stylesheet">');
</script>

    Or else dynamically make the reference, remember that the variable estiloscould be a collection of strings.

    • 1

  5. What I do is the following:

    I verify that there are no errors in the code.

    I use the combination Control + shift + R

    I open the console and go to the network section, followed by pressing F5 to see if the files are imported correctly.

    • 0

  6. Another way to avoid the cache of, for example, your css or js, would be modifying the .htaccess of your apache, this to prevent it from being cached or limit the time of life, this would help you to download your js every less time and css status code = 200 and not 304, which is what it receives when the resource is already in cache.

    <IfModule mod_expires.c> 
      ExpiresActive On
      ExpiresDefault "access plus 1 seconds"
      ExpiresByType text/html "access plus 1 seconds"
      ExpiresByType image/x-icon "access plus 2592000 seconds"
      ExpiresByType image/gif "access plus 2592000 seconds"
      ExpiresByType image/jpeg "access plus 2592000 seconds"
      ExpiresByType image/png "access plus 2592000 seconds"
      ExpiresByType text/css "access plus 604800 seconds"
      ExpiresByType text/javascript "access plus 86400 seconds"
      ExpiresByType application/x-javascript "access plus 86400 seconds"
</IfModule>

    either

    <FilesMatch "\.(?i:gif|jpe?g|png|ico|css|js|swf)$">

  <IfModule mod_headers.c>
    Header set Cache-Control "max-age=172800, public, must-revalidate"
  </IfModule>

</FilesMatch>
    • 0

  7. If you use an apache server on linux you can do the following:

    activate mod_expire :

        $ sudo a2enmod expires

    modify the /etc/apache2/apache2.conf file and add the following:

        <IfModule mod_expires.c>
     ExpiresActive On
     #ExpiresDefault "access plus 1 year"    # activar para servidor en producción
     ExpiresDefault "access plus 1 seconds" # activar para servidor en desarrollo
    </IfModule>

    Then restart the apache server:

        $ sudo service apache2 restart

    with this you should resolve the cache on the client. however you should be aware that on a production server you should increase the value for the ExpiresDefault variable .

    • 0

  8. Another option you could apply is to automatically version your CSS y JS.

    OPTION 1:

    Add the versión(eg: date of last modification of the file ) as a variable to the file path.

    So:

    1. We create a function that gets the last modified date (eg: filemtime) of the file and concatenates it as a variable to the path.

      <?php
function autoVer($url)
{
  $path = pathinfo($url);
  $ver = '?v='.filemtime($_SERVER['DOCUMENT_ROOT'].$url);
  return $path['dirname'].'/'.$path['basename'].$ver;
}
?>

    2. Then we call this function on the files to version.

      <link rel="stylesheet" href="<?php echo autoVer('/private/css/visual.css'); ?>" />
<script src="<?php echo autoVer('/private/js/visual.js'); ?>"></script>

    The result would be something like this:

    <link rel="stylesheet" href="/private/css/visual.css?v=1492816098" />
<script src="/private/js/visual.js?v=1492816000"></script>

    OPTION 2

    Assuming that option 1 "doesn't always work for you" , and following the same line, we can add the versiónas part of the file name and by .htaccessrewriting the pathof these.

    So:

    1. We create a function that gets the last modified date (eg: filemtime) of the file and includes it as part of the file name.

      <?php
function autoVer($url)
{
  $path = pathinfo($url);
  $ver = '.'.filemtime($_SERVER['DOCUMENT_ROOT'].$url).'.';
  return $path['dirname'].'/'.str_replace('.', $ver, $path['basename']);
}
?>

    2. Then we call this function on the files to version.

      <link rel="stylesheet" href="<?php echo autoVer('/private/css/visual.css'); ?>" />
<script src="<?php echo autoVer('/private/js/visual.js'); ?>"></script>

      The result would be something like this:

      <link rel="stylesheet" href="/private/css/visual.1492816098.css" />
<script src="/private/js/visual.1492816000.js"></script>

    3. We create a file .htaccessa rule to translate these "routes"

      #Regla para archivos versionados
RewriteRule ^(private/(js|css|imgs)/)(.+)\.(.+)\.(js|css|jpg|gif|png)$ $1$3.$5 [L]
    • 0