I just want to clear the browser cache using angularjs, every time i login to my application and browser should load new files.
You don't really do this using Angular, per se. There are a few ways you can cause your browser cache to invalidate/force your browser to request a fresh resource. A common way of doing this is cache busting your application assets. For example, whenever your JS changes, you have a task running (Grunt/Gulp/Webpack are good examples of this) that will rename your file to something new (usually by appending a hash or date to the end of the filename) so that when your browser requests your page, it will see a brand new filename and request a copy of it.
An example of something that can do this is gulp-rev: https://github.com/sindresorhus/gulp-rev and here is a tutorial: https://stefanimhoff.de/2014/gulp-tutorial-13-revisioning/
Hopefully this helps!
I recommand you to use grunt-cache-breaker is a simple cache-breaker, appends a timestamp or md5 hash to any url.
This plugin requires Grunt.
Related
I'm tying to clear the browser cache programmatically. I am doing this because i have deployed a new version of the application, but the browser gets old version and contents from cache. but i want to clear cache when browser gets new version and load the latest app from server.
I have also use location.reload(true); but it is not clearing cache just reload the current page.
You can clear browser cache by using version trick
For example,
<script src="custom.js?version=1.1.1"></script>
just add dummy version at the end of the file type.It will reload the code
You can't really clear the cache using Angular or JQuery. One way is to force your browser to request fresh resources.
One way to do this is using gulp-rev.
https://github.com/sindresorhus/gulp-rev
You can't do it from JavaScript. What you can do is following:
Append some variable string to the end of your content url. Example:
//example.com/script.js?version=1.0
or
var timestamp = new Date().getTime()
var url = "//example.com/script.js?ts=" + timestamp
This essentially fools the browser that the url you are trying to load is a new one and it skips looking for it in the cache.
Timestamp method does have a disadvantage that it doesn't make use of browser caching ever.
Also, make sure that your HTML file has proper content header set so that the html itself is not cached. Checkout How to control web page caching, across all browsers? for details on cache control headers.
I have added a pretty substantial change to a javascript file. However, in order for the new changes to register, I need to refresh my browser. I imagine this is how it will be for all the other people using this site as well.
Is there a way to invalidate the client's browser cache and force it to download the new js file?
You can rename the file, or just add a random parameter when loading the file:
<script src="/javascripts/application.js?version=4" type="text/javascript"></script>
You can add an argument to the file name, like
<script src="script.js?rnd=2131231"></script>
There is a very comprehensive discussion here, with several ways to do this.
The recommended solution (mod_pagespeed) might not be the best solution for you in case your project is not big enough or you don't use apache, in which case I would recommend a format such as:
<script src="/{sha_1_here}/script.js"></script>
instead of a GET parameter, because apparently some browsers do not cache scripts with parameters.
This should work everywhere, and you just need to rewrite the URL server side.
For development purposes, I disable the cache on the browser side so that it fetches always.
But for production, to reset so that all client user's browsers should download the new version you can look at apache's settings to expire cached files.
If this has been asked before, I apologize but this is kinda of a hard question to search for. This is the first time I have come across this in all my years of web development, so I'm pretty curious.
I am editing some HTML files for a website, and I have noticed that in the src attribute of the script tags that the previous author appended a question mark followed by data.
Ex: <script src="./js/somefile.js?version=3.2"></script>
I know that this is used in some languages for value passing in GET request, such as PHP, but as I far as I ever knew, this wasn't done in javascript - at least in calling a javascript file. Does anyone know what this does, if anything?
EDIT: Wow, a lot of responses. Thanks one and all. And since a lot of people are saying similar things, I will post an global update instead of commenting everyone.
In this case the javascript files are static, hence my curiosity. I have also opened them up and did not see anything attempt to access variables on file load. I've never thought about caching or plain version control, both which seam more likely in this circumstance.
I believe what the author was doing was ensuring that if he creates version 3.3 of his script he can change the version= in the url of the script to ensure that users download the new file instead of running off of the old script cached in their browser.
So in this case it is part of the caching strategy.
My guess is it's so if he publishes a new version of the JavaScript file, he can bump the version in the HTML documents. This will not do anything server-side when requested, but it causes the browser to treat it as a different file, effectively forcing the browser to re-fetch the script and bypass the local cache of the file.
This way, you can set a really high cache time (like a week or a month!) but not sacrifice the ability to update scripts frequently if necessary.
What you have to remember is that this ./js/somefile.js?version=3.2 doesn't have to be a physical file. It can be a page which creates the file on the fly. So you could have it where the request says, "Hey give me version 3 of this js file," and the server side code creates it and writes it to the output stream.
The other option is to force the browser to not cache the file and pull down the new one when it makes the request. Since the URI changed, it will think the file is completely new.
A (well-configured) web server will send static files like JavaScript source code once and tell the web browser to cache that file locally for a certain period of time (could be a day, a week, a month, or longer). When the browser sees another request for that same file, it will just use that version instead of getting new code from the server.
If the URL changes -- for example by adding a query string -- then the browser suspects that its cached version is no good and gets a new one. As such, the ? helps developers say "Oops, I changed this file, make sure the browser gets a new copy."
In this case it's probably being used to ensure the source file isn't cached between versions.
Of course, it could also be used server side to generate the javascript file, without knowing what you have on the other end of the request, it's difficult to be definitive.
BTW, the ?... portion of the url is called the query string.
this is used to guarantee that the browser downloads a new version of the script when available. The version number in the url is incremented each time a new version is deployed so that the browser see it as a different file.
Just because the file extension is .js doesn't mean that the target is an actual .js file. They could set up their web server to pass the requested URL to a script (or literally have a script named somefile.js) and have that interpret the filename and version.
The query string has nothing to do with the javascript. Some server side code is hosting up a different version depending on that querystring it appears.
You should never assume anything about paths in a URL. The extension on a path in a URL doesn't really tell you anything. URLs can be completely dynamic and served by some server side code or can rewritten in web servers dynamically.
Now it is common to add a querystring to urls when loading javascript files to prevent client side caching. If the page updates and references a new version of the script then the page can bust through and cause the client to refresh it's script.
As seen in the code from http://html5boilerplate.com/ (ctrl+f "?v=1")
What does ?v=1 do exactly? It's tacked on to the external css and js urls.
It's just a cache-breaking method, for example:
myScript.js?v=1
I can (via cache headers) tell you to cache it forever, then when I push a new version, it's:
myScript.js?v=2
And your browser sees it as a new file it much fetch, and it can be cached forever as well, so basically you get the max cache benefit, and still force the client to re-fetch when a new version's out there. If possible, this version would be the result of a build process, automatically updated when the file changes (or at least a new build's, pushed, whatever the case may be).
As a real work example, look at the page you're viewing now:
http://sstatic.net/js/master.js?v=66ffcb6dcc55
It's a hash of the file...whenever it changes so does the hash on the end of the URL, and your browser will grab a new copy.
This is done to circumvent browser caching. The idea is that when these files change, you would increment the version number, thus forcing the file to be fetched by the browser again.
It doesn't do anything, per se.
It is just part of a URL. It follows the usual pattern for a query string, so a server side process might pay some attention to it and modify the script.
Most likely, it is just a change in the URL which will still serve up a static file from exactly the same location … but as the URL is different to v=0, it will break any caching to ensure that the browser fetches a version that was at least as new as the newest when the page was updated to use that URL for the script.
I'm doing a project in Django and using djangos-css (http://github.com/dziegler/django-css) and Sass (http://sass-lang.com/). The Sass files are served in development using django-css. I want to write a JavaScript routine that will every one second retrieve the CSS assets. The purpose of this is so that the designer can edit the Sass files, hit save, and see the result in the browser immediately without switching applications and hitting refresh.
Basically I need a way for JavaScript to force the browser to re-download certain files without doing a page refresh. Is this possible?
The simplest way is usually to add a unique parameter onto the url, I often just use a timestamp
var timestamp = (new Date()).getTime();
url += '?time=' + timestamp;
Just be careful if your requests already have parameters then you need to add &time=' + timstamp instead.
The browser can't cache the request because each request looks unique.
Not all caches will cache content with a query string.
Steve Souders recommends, “…avoiding a querystring for cacheable resources”. He found that in this case 5-20% of requests will not be cached. Query strings in particular do not work at all with some CDNs for cache invalidation.
The better way is to generate a MD5 with the javascript file name for each release e.g.
{path to script file}/filename-{md5 hash}.js