I'm sure this question has been asked before but I can't find one quite the same.
I have an azure cloud service that uses a lot of javascript files. I am still developing the site and so the javascript files change often. When the javascript files have changed I clear my browsing history, selecting 'Temporary Internet files and website files' before re-running the code. However, the website seems to resolutely hold on to my javascript files and keeps running the old code. This is a problem in Chrome, IE and Firefox. If I clear my browsing history a few times it eventually finds the new code.
I know that there are ways to force the browser to reload files by changing the path to the js files for new versions. However I am just testing and don't want to have to update file names each time I change a few lines of code. So I want a way to clear caches within the browser.
I am also using an html5 offline cache for my files so this may be an added complication.
How can I easily clear my old javascript files? Can I do this programmatically?
I have been down this path a few times and no matter what, with no exception, the method that works is adding a query string variable. This is why so many frameworks (e.g., jquery, angular) will add a cache busting date based value to the query string for ajax). Every other method has resulted in one headache or another, browser inconsistencies, random errors because one file updated but the other didn't.
Here's one example I am currently using that is using Angular within ASP.NET:
#{
var v = Request.IsLocal ? DateTime.Now.Ticks : ViewBag.Version;
}
<script>var version = "#v";
<script src="/javascript_file.js?v=#v"></script>
I user a local variable (#v) to set a query string value on the file and I also use it to set up a global JavaScript variable that can be used within js for templates and other files.
If I am working locally, then I always get the latest version of each file. Once I deploy, the version number is set at application start up (using the build version for auto incrementing purposes - so that each deployed version build will have a different version number).
This has the downside that some files that DID NOT change will need to be reloaded, but that's better than trying to tell hundreds of users (hit f5 to reload the page)...
!I am not sure how this will impact offline cache, but I think the same might apply.
Related
I recently configured Webpack (version 4) to split the bundle in three chunks (bundle, runtime and vendor) and also to append a hash to the beginning of each of their filenames so that the browser can sense the changes in them. I'm also updating the HTML references with the HtmlWebpackPlugin.
This seems to be working, but not fully, let me explain. Before I did this, a hard reload was needed after each deployment in order to see the new changes, this is no longer needed.
Now the problem is, when you load the web app after a deployment for the first time, it still shows you the old version, it's only when you soft reload the webpage that it shows the new changes.
What I am wondering is, is there any way that I can get rid of this behavior so that whenever a deployment is done and you load the web app the changes instantly show up without the need of refreshing once?
Thanks in advance!
You could append a random querystring to the import of your bundles, like src="bundle.js?nocache=12345" that's generated everytime.
This prevents the browser from caching your code, and doesn't require you to change the bundle names (which is convenient).
If you don't want it to be loaded fresh each time even when you're not releasing anything, you should keep something like a version number somewhere and append that in a querystring to the bundle import instead.
Though, your current implementation basically does the same. It should be a fresh non-cached bundle when you open the web app.. I don't think there is a way to make the browser detect changes in javascript and refresh the imported scripts, unless you are working with something like webpack-dev-server (hot reload) that does that for you, but that's development convenience only.
I am working on ASP.NET MVC4 Project. When i am updating JavaScript file and run my project in browsers. New changes do not reflected on page Same thing happen when I am trying on IIS Server. For that every time I have to remove browser history then it reflects but this is not correct way after deployment
Is there any other way for that?
Please guide me Thanks in advance
Your problem would be:
Browser Caching JavaScript
Check whether the browser is caching the javascript. To do it, check the header of the javascript on the browser for the attribute Cache-Control in the browser. Case yes, configure Cache-Control to no-cache on the project. Disable cache only in your development environment.
Visual Studio or IIS not reloading the javascripts
Check whether the Visual Studio or IIS are reloading your entire project after the deploy.
Suggestions to solve your problem:
Solutions to solve this problem is version the javascript.
Using different names
One way to ensure that the user will receive a fresh version of javascript is versioning the filename.
Instead of use only the name, you can concatenate a version number to the javascript.
Example:
www.example.com/script.8238823.js
www.example.com/script.3434342.js
This urls represent different paths and the browser will update.
Using query string
Another way is use a query string such v= + version.
The version can be a MD5 hash, or the timestamps or the size in bytes of the file.
Example:
www.example.com/script.js?v=999990
www.example.com/script.js?v=129
This force the browser to cache the file, and reload when the version of v, change.
I don't use ASP.NET, but I think that exists solutions for this.
I saw similar answers here which I think would help you. Specifically, the suggestion of adding a query parameter to the end of the URL which references your JavaScript file, so you can "version" them.
Not sure if this is the same problem. For my ASP.NET MVC4 project I had an Azure database and web app. The reason the javascript file was not updating was because the connection to the database had lapsed. Refreshing in Server Explorer solved the issue / reestablishing the connection with a new login fixed the issue.
Also make sure the way you are publishing has the correct database admin login and connection.
Are you using the MVC Bundle? By using bundle and js inclusion as #Scripts.Render("file name used in the bundle config file") should not sustain cache.
I use Google Chrome Dev Tools to troubleshoot or debug JavaScript. I add break points and use watches, but a lot of the times it's convenient to just insert console.log(value) here and there in the script.
The problem is that when the page has to be refreshed in order to see the JS changes (and the console.log() calls), then the console.log() calls have been removed when the page reloads. Obviously this is because I didn't edit the actual source file itself.
Is it possible to maintain edits to JS files and still reload the page?
There are a lot of cases where I'm looking at other people's JS, learning and understanding it, so editing the source code is not even a possibility. Other times, when working on my own code, I might be debugging JS code on a live server, to editing my source to put in random console.log()'s is not desirable.
I know that Dev Tools has an auto save feature where the changes you make can save the actual source files (as long as the files are on a filesystem that is available to your computer). But that doesn't help in my case.
There is 'workspace' feature in DevTools.
It allows you to map the source files on your disk to the scripts of your page.
So when you apply your changes to the page's javascript they also will be saved to the disk.
If your web server serves these files from this folder then you will get the changed files after reload.
Lets say I have an application that updates it javascript/css files (and keeps the same file names)
How can you force a client to not serve files from cache and use the new javascript/css. I have a feeling a bug is being caused by this. I still want the files to cache, so appending a random string to the css/js include will NOT be good.
Append the date the file was changed to the CSS/JS file request. Many frameworks can do this for you, depending on your technology stack.
Even better is to put a version number in the filename and each time you revise the file, you modify the version number in the filename and modify the source page that loads it to point to the new filename. Then you get maximum caching possible when the file hasn't changed, but when you do change the file you immediately get the new version. This technique is used by many sites on the web for exactly this reason.
I have a QWebView in my app which renders a html page stored in the app as a Qresource. This page, however requires meaty external Javascript libraries such as MathJax, which I would want to include as a resource due to its size.
My problem is that it seems that QtWebkit does not cache these files as a regular browser would do, and every time I refresh the widget it downloads MathJax afresh.
So my question is: is there any way to cache these libraries after first time they are downloaded, without having resorting to shipping it with the app as resource?
You should try if a simple QtNetwork-based download honor the cache setting or not. Also, see if the settings (QWebSettings) are set properly.
In all case, you should be able to inject a custom QNetworkAccessManager that handles the caching of your custom JS library. See http://ariya.blogspot.com/2010/05/qnetworkaccessmanager-tracenet-speed.html and http://ariya.blogspot.com/2010/06/proxy-server-with-filtering-feature.html as examples and follow it up from there.
Could you post some source code? Once downloaded that data will stay in the /tmp/ folder for some time. You could likely use the data in the temp folder, my guess is you are not enforcing that policy.