We are having MVC web application. Some of the code is in JavaScript. When we deploy any changes to the JavaScript, the changes are not reflected on the client side. We have to ask clients to do CTRL+F5 to get the changes. Is there a standard way of pushing JavaScript changes to the client side?
You can refer to the files with a version, like this:
<script type="text/javascript" src="myScript.js?v=12345"></script>
The number after v represents your build number, so when a new build pushes, they grab the files again. View source on this page to see the same behavior :) This gives you the benefit of allowing the user to cache the files as long as possible (forever), yet still have them automatically grab any update.
you can try this meta tags
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
You're not saying what server-side language your site is in. A nifty trick from the Rails world is to check the "last modified" time of the file, and to add that as a GET parameter to the URL.
In PHP, it would look like this:
<script type="text/javascript"
src="script.js?time=<?php echo filemtime("script.js");">
(of course, the path you need to give in the filemtime call will probably need to be an absolute one.)
Related
I embeded Friconix on my web site (a free icon collection like Font Awesome).
I noticed that when new icons are added in the library, they are not available since the JavaScript file is refreshed in cache.
Is there a way to force the client to refresh JavaScript ?
You can't force browsers to clear their cache. But you can change the path to your script. For example, add a GET parameter with version to the path, like this:
<script src="/js/main.js?ver=2"></script>
location.reload has a parameter of type Boolean that specifies a hard reload. (This isn't too reliable - it depends on the browser and safety/security measures in place):
location.reload(true);
Alternatively, use a no-cache meta tag:
<meta http-equiv="Cache-control" content="no-cache" />
This question already has answers here:
How can I force clients to refresh JavaScript files?
(30 answers)
Closed 4 years ago.
Here we are using Pdf.js extension and Ifram in application,
but we are facing issue with browser cache, its storing in browser but the physical files getting changed by service, and after file content change also its showing previous document details, its not refreshing.
Please provide a solutions to clear cache (Text of webpages you've visited in Google Chrome is removed from your computer. Browsers store elements of webpages to speed up the loading of the webpage during your next visit. — Source) in in Javascript / JQuery or AngularJS
tried with
app.js?123
and
<meta http-equiv="Cache-Control" content="no-cache, no-storeenter code here, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
but not working....???
Versioning the Javascript file is one of the options to force browser to get the updated content of the file. For example:
pdf_v001.js
pdf_v002.js
pdf.js?v=001
pdf.js?v=002
If you have a version control system, you could inject the version number something like this:
<script type="text/javascript" src="pdf_$$REVISION$$.js"></script>
or:
<script type="text/javascript" src="pdf.js?v=$$REVISION$$"></script>
Please refer to this link: How can I force clients to refresh JavaScript files?
Hi and thank you for your time in advance,
My question is I have a folder /folder-name/ on my server and we change the index.html file in here regularly but for some older browsers and clients they never get the updated information because the old information is cached in their old browser. So I have used this tactic:
How to control web page caching, across all browsers?
But it doesn't work all the time. My idea was to change the file to something different (using date so its unique) and whenever anyone goest to that folder it just defaults to show whatever HTML file is in there. This way the browser would refresh the cache thinking it is a new page each time.
So when the user goes to www.domain.com/folder-name/ it just loads whatever HTML file is in there.
Thanks again for your time.
UPATE:
This is the page: http://www.avrs.com/DMVseminars/
And what happens is certain users (older IE browsers) are caching the schedule and people call in saying they are seeing a schedule 6 months ago. I can't recreate the issue but we get about 5-10 calls a month.
Try adding these tags to your page's <head>. I use these on a site i developed a few years ago and haven't had any cacheing issues reported.
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
Reference
Hmmm...
There is a clever fix for this. Have an iframe spanning you whole page, and have it point to your main index.html file.
Like so:
<iframe
href = 'html/index.html'
style = 'width:100%;height:100%;border:none;outline:none;'
></iframe>
Good luck! I hope this works!
I'm trying to find a good way to release a new version of a single page javascript app without asking clients to refresh their page or clear caches when a new version is deployed
I'm currently revving images / css / js files in my javascript app, so it contains references like scripts/671df76d.main.js and that's great.
So in my webapp v0.1 index.html I have something like this:
<script data-main=“scripts/d7ba3e7b.main” src=“bower_components/requirejs/require.js”></script>
while in a new v0.2 version I have this:
<script data-main=“scripts/671df76d.main” src=“bower_components/requirejs/require.js”></script>
I also experimented with meta tags that might influence caching.
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
But I never found a good solution. Sometimes the updates are shown without requiring a manual refresh from the user, sometimes old content is still being shown. The only way to get the user to see the new content is to ask him to refresh the page.
As users are always visiting the webapp through the index.html, I noticed that sometimes the latest version is picked up (v0.2 with 671df76d.main), but other times after deployment the browser still loads up a previous version.
I'm just wondering how I can guarantee a browser won't have cached my index.html with an old scripts/d7ba3e7b.main.js
It makes sense that the browser can have a cached version the index.html , so it would still refer to old/stale revved javascript sources (obviously something you don't want).
In that sense the fact that you rev your resources is useless.
Am I correct in saying that simply revving up resources inside the index.html is not sufficient and that some additional stuff is needed
html meta tags
htaccess files
webserver configs
What would be a proper way to do this ? Again, the goal being to allow users to see your new version without having to ask them to refresh / clear cache.
I have external javascript files that get loaded in my master page.
Sometimes in IE8, my javascript files don't load correctly and the browser throws a bunch of javascript errors saying 'object not recognized.'
If I refresh the page then everything is fine. If I click on a link then the problem sometimes occurs again.
I have meta tags in my header for clearing out the cache on each request. I'm using the head.load library to load my js files in parallel.
The head.load library is located in my header and the external files are at the end of my body.
Please remember that this problem only occurs in IE8. So my question is..drum roll please..is there a hack that I can use to make sure my javascript files are loaded correctly each time the page loads for IE8?
Any help would be greatly appreciated.
Updated as requested
<head runat="server">
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />
<meta http-equiv="EXPIRES" content="-1" />
<script type="text/javascript" src="scripts/js/head.load.min.js"></script>
</head>
<body>
<script type="text/javascript">
head.js("scripts/js/jquery-1.6.2.min.js");
head.js("scripts/js/jquery.cookie.js");
head.js("lib/gritter/jquery.gritter.min.js");
head.js("lib/fancybox/jquery.easing-1.3.pack.js");
head.js("lib/fancybox/jquery.fancybox-1.3.4.pack.js");
head.js("scripts/js/jquery.microaccordion.js");
head.js("scripts/js/jquery.stickyPanel.js");
head.js("scripts/js/guidely.js");
head.js("scripts/js/pto.js");
</script>
</body>
Ok, the problems appears to be how the head.load library loads my externals in IE8. If I load jquery before I load the head.load library, and then load my externals in parallel at the end of the page; then there's no javascript errors. A little lesson for myself about javascript loading and IE8.
Thank-you everyone for the input.
# frederic - I work at a company that has 188,000 employees. If a user has an add on installed in their browser that is causing my page to crash then there's nothing I can do about that. I also don't think this problem is being caused by any add ons. Its just how the head.load library is handled in IE8.
<head runat="server">
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />
<meta http-equiv="EXPIRES" content="-1" />
<script type="text/javascript" src="scripts/js/jquery.min.js"></script>
<script type="text/javascript" src="scripts/js/head.load.min.js"></script>
</head>
<script type="text/javascript">
head.js("scripts/js/jquery.cookie.js");
head.js("lib/gritter/jquery.gritter.min.js");
head.js("lib/fancybox/jquery.easing-1.3.pack.js");
head.js("lib/fancybox/jquery.fancybox-1.3.4.pack.js");
head.js("scripts/js/jquery.microaccordion.js");
head.js("scripts/js/jquery.stickyPanel.js");
head.js("scripts/js/guidely.js");
head.js("scripts/js/pto.js");
</script>
Look at the page http://headjs.com/ in the section Usage you will see exactly what is wrong with your code:
// files are loaded in parallel and executed in order they arrive
head.js("file1.js");
head.js("file2.js");
head.js("file3.js");
Your scripts are been loading in parallel and are executed in arrival time, that's pretty bad for the deps on jquery, if you want them to be executed in order use this:
head.js("scripts/js/jquery-1.6.2.min.js",
"scripts/js/jquery.cookie.js",
"lib/gritter/jquery.gritter.min.js"),
"lib/fancybox/jquery.easing-1.3.pack.js",
"lib/fancybox/jquery.fancybox-1.3.4.pack.js",
"scripts/js/jquery.microaccordion.js",
"scripts/js/jquery.stickyPanel.js",
"scripts/js/guidely.js",
"scripts/js/pto.js");
You need to call js with a list of resources to load, not just call js several times.