Edit : I don't know if it actually loads from cache, so I can't create the question named "prevent from loading cache".
Problem : Browsers sometimes save my code and keep loading only the code they saved(Maybe it saves in the cache). When this problem occurs, browser is like caching the old code and won't change anything. This is to say, It won't load any new code I updated.
Information: This occurs in HTML, CSS, Javascript on all browsers. I am using Apache in XAMPP as an appserv.
Deleting cache in all browsers won't fix this.
My first way to stop this is to delete the file, refresh browser and replace it.
The second ways is changing the pathname.
After the fix, the problem will occur again at anytime :(, so I would like to know how to prevent this.
Edited: If possible, please explain for newbie because I am very young beginner.
Try adding a variable like current timestamp to each url in its query string.
Just use querystring e.g. http://www.domain.com/style.css?version=1 for first version.
Now you update the stylesheet and you would like to reflact changes to all users browser who have cached version of old stylesheet. for this just change version querystring value to 1.1
e.g. http://www.domain.com/style.css?version=1.1
This works for javascript, css and all other files called in by your html page.
Also for all files like html, css, js, you can eTag header. More information can be found here.
http://www.w3.org/2005/MWI/BPWG/techs/CachingWithETag.html
Related
Writing an asp.net mvc app and playing with ckeditor (4.7.2) as a newbie. I load ckeditor from the cdn so I have to configure it to be able to load plugins locally, as per the doc:
CKEDITOR.plugins.addExternal('name', '#Url.Content("~/scripts/ckeditor/plugins/name")',
'plugin.js');
But if I do this, the browser tries to load this:
localhost/scripts/ckeditor/plugins/name?t=H7HDplugin.js
Checking in the browser console, I see also that all ckeditor files are loaded that way, with this appended ?t=H7HD query string.
The only workaround I found was to use this form instead:
CKEDITOR.plugins.addExternal('name',
'#Url.Content("~/scripts/ckeditor/plugins/name/plugin.js")', '');
which loads the file correctly:
localhost/scripts/ckeditor/plugins/name/plugin.js?t=H7HD
Is this a bug? Should the first form build the URL in the correct order? Or is there something I missed?
Update: realized that the doc puts a final slash to the path. If I add it, this also fixes the issue, keeping the query string at the end. But this does not explain why this query string exists and why ckeditor does not check for this ending slash.
And this brings me to a secondary question. During development, modifying files in Visual Studio is enough to make Chrome reload them without any action from me. But in the case of plugins loaded by ckeditor, Chrome keeps the old version. I have to clear the cache of the browser, each time I want to be sure I have the latest version. Is there any way to fix this? I think this is a related question because I first thought this ?t=... was a mechanism to reload the files by bypassing the cache, except that here, the value behing 't' does not change.
The second parameter in the addExternal() method as per documentation is:
path : String
The path of the folder containing the resource.
If the path is /scripts/ckeditor/plugins/name?t=H7HD then the last parameter (plugin file, plugin.js) is concatenated with it.
as per the documentation, this is a timestamp property:
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR.html#property-timestamp
I have a problem in my Umbraco backoffice, where alot of the clientside files are cached heavily, which is causing some problems.
All the files loaded, is from /umbraco/Application and contains references like;
"/umbraco/lib/jquery/jquery.min.js?cdv=1",
"/umbraco/lib/angular/1.1.5/angular.min.js?cdv=1",
"/umbraco/lib/underscore/underscore-min.js?cdv=1",
But, how can i change the cdv value? I tried to change it under /config/ClientDependency.config, but nothing happend (it is not the same value in the config file and in the output above).
So maybe the backoffice is using a different config file for ClientDependency? Or any other ideas?
On my Umbraco 7.4.1 installation, changing the version of clientDependency.config worked for me:
From:
<clientDependency version="1" fileDependencyExtensions=".js,.css" loggerType="Umbraco.Web.UI.CdfLogger, umbraco">
To:
<clientDependency version="2" fileDependencyExtensions=".js,.css" loggerType="Umbraco.Web.UI.CdfLogger, umbraco">
After the change, the script files were being called as:
/umbraco/lib/jquery/jquery.min.js?cdv=2
/umbraco/lib/angular/1.1.5/angular.min.js?cdv=2
/umbraco/lib/underscore/underscore-min.js?cdv=2
Etc.
If it's only your browser with this issue (rather than a clients whose you don't have access to), then you can just force your browser to load new version of HTML, CSS and JS rather than using the internal HTTP cache.
How to tell if you're loading cached resources
You will know if your browser has cached the resources by looking at the Network tab in your browsers Dev Tools. If resources are being loaded with a 304 rather than a 200, they have been loaded from the internal cache.
Forcing reload on Chrome
There is a SO post here which tells us the difference between each reload option.
General browser shortcuts
There is also a bit of information here about how you can use a keyboard shortcut to force a hard refresh on your browser.
Plugins
Clear Site Cache has worked quite well as a browser plugin for Firefox for me.
I have this weird problem with one of our file. It's named Setup.php and stored under protected/components/
This file is mainly for emails, header, footer generating functions etc. We found out few days back that when we changed the footer layout in this file, the old footer would still show, despite doing a lot of debugging and edits (even removing the footer function itself), it still shows the old one. This is a shocker. I'm aware of cache issues but does Yii cache the whole PHP file? Is this even possible? We are positive the footer used the same function from the same file.
I'm again having this issue with another function in the same file. Determined it's a problem with the component file and Yii, I would like to seek assistance from the Yii users.
Please let me know your thoughts. Thanks in advance.
It's very important for the website I'm working on to be offline-functional. I'm using a Cache Manifest to store all the files on the application cache, so that takes care of that and all is good and well.
BUT, as I read and noticed myself, the browser first shows the cached version of the site before checking for an update online. Hitting refresh reloads the cache again, with the new cached files this time (or what it had time to update for the swift refreshers).
I'm aware of this fix : http://www.html5rocks.com/en/tutorials/appcache/beginner/, where the user is told an update is available and is asked to refresh the page. Not a bad method, but still sketchy for user experience.
Is there any other way to force the browser to show the most up to date files if online? Would cache busting all files manually AND using a cache manifest fix this problem, or will it conflict with the cache manifest and cause problem to the offline functionality?
I found something that works well for me:
The URL linking to the web page contains a parameter. If there is ever a change to the page or related files, the url is changed to something like this: http:/ /www.mywebsite.com/mypage.html?v=3 where v=3 is changed depending on updates.
This is a longer fix to implement (finding every page affected by a change & changing all their cache busting links), but the pages at least show what they're supposed to on the first load and the cache manifest still load the update for offline viewing.
I'd like to speed up my site's loading time in part by ensuring all CSS/JS is being cached by the browser, as recommend by Google's PageSpeed tool. But I'd like to ensure that visitors have the latest CSS/JS files, if they are updated and the cache now contains old code.
From my research so far, appending something like "?459454" to the end of the CSS/JS url is popular. But wouldn't that force the visitor's browser to re-download the CSS/JS file every time?
Is there a way to set the files to be cached by the browser, but ensure the browser knows about updated versions of the cached files?
If you're using Apache, you can use mod_pagespeed (mentioned earlier by symcbean) to do this automatically.
It would work best if you also use the ModPagespeedLoadFromFile directive since that will create a new URL as soon as it detects that the resource has changed on disk, however it will work fine without that (it will use the cache expiry time returned when it fetches the resource to rewrite it).
If you're using nginx, you could use ngx_pagespeed.
If you're using IIS, you could use IISpeed, which is not a Google product and I don't know it's full feature set.
Version numbers will work, but you can also append a hash of the file to the filename with your web framework or asset build script:
<script src="script-5054a101c8b164cbfa570d97fe23cc0d.js"></script>
That way, once your HTML changes to reflect this new version, browsers will just download and cache the updated version of your script.
As you say, append a query string to the URL of the asset, but only change it if the content is different, or change it when you deploy a new version.
appending something like "?459454" to the end of the CSS/JS url is popular. But wouldn't that force the visitor's browser to re-download the CSS/JS file every time?
No it won't force them to download each time, however there are a lot of intermediate proxies out there which ignore query strings on cacheable content - hence many tools (including mod_pagespeed which does automatic url rewriting based on file conents, and content merging on the fly along with lots of other cool tricks) move the version information into the path / filename.
If you've only got .htaccess type access then you can strip the version information out to map direct to a file, or use a scripted 404 redirector (but this is probably only a good idea if you're behind a caching reverse proxy).