Force browser to refresh css javascript etc

Question

I m developing a website based on Wordpress source code through XAMPP  Sometimes I change the CSS code  scrips or something else and I notice my browser takes time to apply the modifications  This leads me to use multiple browsers to refresh one and if doesn t apply the new styles I try the second one and it s always this   There is some way of avoiding this problem   Sometimes I m changing code without notice the previous modifications

User · Answer

I have a case  where I need to be able to create and change my stylesheets remotely affecting thousands of clients  but due to risk of heavy network load  I m not turning off cache   Since I can change the HTML contents remotely  I then link the stylesheet with a hashcode matching the contents of the stylesheet   https   example com contents stylesheetctrl id 12345 amp hash -1456405808  That said  I also use a client-side javascript function to carefully replace nodes and attributes when HTML contents change  meaning the stylesheet link tag will not be replaced  only the href attribute will change   This scenario works fine in Chrome  Firefox and Edge on Windows  also Chrome on Android  but doesn t always work in webclients on Android to my surprise  So I m more or less looking for something to force trigger the update using javascript - optimally without needing to reload the page

User · Answer

You can use the Firefox Chrome developer toolbar   Open Dev Toolbar Ctrl   Shift   I Go to network tab Press the  quot disable cache quot  checkbox  Firefox  top right of toolbar  Chrome  top centre of toolbar

User · Answer

Developer point of view If you are in development mode  like in the original question   the best approach is to disable caching in the browser via HTML meta tags  To make this approach universal you must insert at least three meta tags as shown below    lt meta http-equiv  Cache-Control  content  no-cache  no-store  must-revalidate    gt   lt meta http-equiv  Pragma  content  no-cache    gt   lt meta http-equiv  Expires  content  0    gt    In this way  you as a developer  only need to refresh the page to see the changes  But do not forget to comment that code when in production  after all caching is a good thing for your clients   Production Mode Because in production you will allow caching and your clients do not need to know how to force a full reload or any other trick  you must warranty the browser will load the new file  And yes  in this case  the best approach I know is to change the name of the file

User · Answer

Try this   link href  styles style css  time    rel  stylesheet  type  text css    If you need something after the     that is different every time the page is accessed then the time   will do it  Leaving this in your code permanently is not really a good idea since it will only slow down page loading and probably isn t necessary   I ve found that forcing a style sheet refresh is helpful if you ve made extensive changes to a page s layout and accessing the new style sheet is vital to having something sensible appear on the screen

User · Answer

Check this  How Do I Force the Browser to Use the Newest Version of my Stylesheet   Assumming your css file is foo css  you can force the client to use the latest version by appending a query string as shown below    lt link rel  stylesheet  href  foo css v 1 1  gt

User · Answer

lt script src  foo js  lt  php echo date  YmdHis  filemtime  foo js      gt   gt  lt  script gt    It will refresh if modify

User · Answer

This Firefox extension was the only solution I could get to work  https   addons mozilla org en-us firefox addon css-reloader

User · Answer

General solution  Pressing Ctrl   F5  or Ctrl   Shift   R  to force a cache reload  I believe Macs use Cmd   Shift   R   PHP  In PHP  you can disable the cache by setting the expiration date to a time in the past with headers   header  Expires  Tue  01 Jan 2000 00 00 00 GMT    header  Last-Modified      gmdate  D  d M Y H i s       GMT    header  Cache-Control  no-store  no-cache  must-revalidate  max-age 0    header  Cache-Control  post-check 0  pre-check 0   false   header  Pragma  no-cache      Chrome  Chrome s cache can be disabled by opening the developer tools with F12  clicking on the gear icon in the lower right corner and selecting Disable cache in the settings dialog  like this    Image taken from this answer   Firefox  Type about config into the URL bar then find the entry titled network http use-cache  Set this to false

User · Answer

Make sure this isn t happening from your DNS  For example Cloudflare has it where you can turn on development mode where it forces a purge on your stylesheets and images as Cloudflare offers accelerated cache  This will disable it and force it to update everytime someone visits your site

User · Answer

You can turn off caching with Firefox s web developer toolbar

User · Answer

The accepted answer above is correct  If  however  you only want to reload the cache periodically  and you are using Firefox  the Web Developer tools  under the Tools menu item as of November 2015  provides a Network option  This includes a Reload button   Select the Reload for a once off cache reset

User · Answer

If you can write php  you can write    lt script src  foo js lt  php echo     mt rand      gt    gt  lt  script gt   lt link rel  stylesheet  type  text css  href  foo css lt  php echo     mt rand      gt     gt   lt img src  foo png lt  php echo     mt rand      gt     gt    It will always refresh   EDIT  Of course  it s not really practical for a whole website  since you would not add this manually for everything

User · Answer

Try clearing your browsers cache

User · Answer

If you want to be sure that these files are properly refreshed by Chrome for all users  then you need to have must-revalidate in the Cache-Control header   This will make Chrome re-check files to see if they need to be re-fetched     Recommend the following response header   Cache-Control  must-validate   This tells Chrome to check with the server  and see if there is a newer file   If there is a newer file  it will receive it in the response   If not  it will receive a 304 response  and the assurance that the one in the cache is up to date   If you do NOT set this header  then in the absence of any other setting that invalidates the file  Chrome will never check with the server to see if there is a newer version   Here is a blog post that discusses the issue further

User · Answer

I have decided that since browsers do not check for new versions of css and js files  I rename my css and js directories whenever I make a change  I use css1 to css9 and js1 to js9 as the directory names  When I get to 9  I next start over at 1  It is a pain  but it works perfectly every time  It is ridiculous to have to tell users to type

User · Answer

In stead of link-tag in html-head to external css file  use php-include    lt style gt   lt  php include  style css      gt         lt  style gt    Kind of hack  but works for me

User · Answer

If you want to avoid that on client side you can add something like  v 1 x to css file link  when the file content is changed  for example if there was  lt link rel  stylesheet  type  text css  href  css-file-name css  gt  you can change it to  lt link rel  stylesheet  type  text css  href  css-file-name css v 1 1  gt  this will bypass caching

[javascript] Force browser to refresh css, javascript, etc

Examples related to javascript

Examples related to css

Examples related to browser

Examples related to xampp