Force reload Javascript-file on publish WITHOUT server code in view - javascript

I have a project that uses a Javascript-File for its logic:
<script src="myMagicCode.js" ></script>
When I publish a new Version, clients have to clear the cache for the new code to work.
I usually can get around this problem by adding a parameter:
<script src="myMagicCode.js?version=1.23" ></script>
But I am too lazy to do this on each release. So I want to automate this behavior.
The page containing the script-reference is pure html and can not contain any server code.
I have however server code that returns the version.
So my idea would be to change the script - code to something like
<script src="api/GetJsUrl"></script>
Where api/GetJsUrl is a GET-Action which contains something like
string url = "myMagicCode.js?Version="+GetCurrentVersion();
HttpContext.Response.AddHeader("Location", url);
return new HttpStatusCodeResult(307);
Will this force the browser to reload the JS-File when a new version is published? Or will just the api/GetJsUrl-Request be cached and I have the same issue like before?
If there are still issues: Are there better solutions?
Remark: I do NOT search for a solution that reloads the JavaScript-File every time. I need a solution that only reloads the file when I deploy a new release (the version number changes).

You can use a task runner like Grunt or Gulp:
http://gruntjs.com/
http://gulpjs.com/
They can lint, minify, build some things AND do what you want, looking to some properties file that contains the project version and editing your html.
They even can join your js file to one and replace it on your index.html:
<script src="compiled.js?_=1234567890"></script>

Related

I cant save my changes to my code in excel web add in (javascript)

I create an excel web add-in project using Visual studio 2019;
now I make some changes in parser.js a js file in the project,then press F5 to debug,when I step into the code in parser.js,I found it actually run the code in the "parser.js[dynamic]" which is the old version.
I've tried several times,restart,even restart my computer,no use.
What I did wrong???
thanks for JPO's answer,but I got something wrong.
today I changed my code, also my html code, html codes I change are as follows:
<script src="Scripts/Parser.js?version=1.3" type="text/javascript"></script>
<script src="Home.js?version=1.3" type="text/javascript"></script>
yes, the old version is ?version=1.2.
Then press F5 to debug and I get this:
the DOM Explorer Home.html and Home.html
as you can see,the Home.html is changed but the DOM Explorer isn't
it seems like the Home.html has been cached.I wonder if I did something wrong and what should I do?
if you need more information please tell me and I'll post
as mentioned in my comment, this looks like a typical caching problem. Browsers tend to cache resources which aren't supposed to change often. E.g. styles or scripts. Therefore for development, it might be necessary to have tools like "Clear Cache" installed in the browser to clear the caches quickly. Or if it is just one file you are working on, then appending a get parameter e.g. ?version=1 (and increasing the value every time you update code inside the parser.js should be enough. Just don't forget to remove the parameter when you publish your code as the page load times will suffer.
Welcome to our community!

Deploy web application

I am new in web deploying. Now I have to manage windows server and every month I need to deploy new version of applications.
I have trouble with javascript. In almost every version of web applications is changed some javascript file (all javascript files are bundled in one minify javascript file).
Most of users use google chrome. Trouble is browser cacheds styles a javascript files. After deploy new version is loaded in browser old version of javascript file.
Does exists any solution how to resolve this problem programmatically in application or some solution after deploy? In best case withou user colaboration (for example refresh cache by CTRL+R)? What is the best practice?
Our application is developed as .NET CORE 2 Razor Pages web application.
Thanks for advice
Use the tag helpers for script and style files, which take an additional attribute append-version, which appends a new query string value each time there are changes in the files.
<link href="/styles/site.css" append-version="true" />
<script src="/scripts/site.js" append-version="true"></script>
If you are using normal html, css, js project then you can add versioning in your js and css libraries and update your index.html with updated version.
Or if you are using node js, react js, angular js then you can use index.ejs instead of index.html and you can add hash code with your js and css libraries like
script1.1ebecec8538d52c8f844.js
script2.2e765bd6680f0c925e8a.js
style1.1ebecec8538d52c8f844.css
style2.2e765bd6680f0c925e8a.css
Or you can also use CI/CD for npm project.
you can make sure that any updates you’ve made to your bundle files will take place immediately for all users with using versioned names like:
<link rel="stylesheet" href="style.css?v=1.1">
The browser will view a file name of style.css as different from a file name of style.css?v=1.1. It also works for script files as well:
<script src="main.bundle.js?version=1.0.1"></script>
But then If you have one giant file, and change one line of code, the user must download that entire file again. Think of a solution, to creating more smaller files, like with splitting out npm packages used in your solution from your own code, to have better release-flow.
If this is about .css and .js changes, one way is to to "cache busting" is by appending something like "_versionNo" to the file name for each release. For example:
script_1.0.css // This is the URL for release 1.0
script_1.1.css // This is the URL for release 1.1
script_1.2.css // etc.
Or alternatively do it after the file name:
script.css?v=1.0 // This is the URL for release 1.0
script.css?v=1.1 // This is the URL for release 1.1
script.css?v=1.2 // etc.
Please check link
Link

Browser not taking updated values of javascript file

Recently i had faced a issue of javascript
my script include code
<script language="javascript" src="/scripts/validation.js"></script>
this is a common js file for all modules, as result this files contains some common funtions also,
every time when a common function is updated for new changes of our application , that changes doesnt reflect in the application
for example
validation.js
function validateDateValues(object)
{
some code//
}
function validateDate(val)
{
some code
}
On every update of our application, we have to change some codes in common function of js file,
if i do some change in code of validateDate(val), it doesnt relect in the application.
i think problem cause due to browser cache, when a client reports this issue , we recommend them to clear the cache and use it.
please give valuable suggestion to solve this issue
Usally a "force refresh" is enough. You can achieve this by pressing the following key combination:
Ctrl + F5
To know more refer this link
http://www.wikihow.com/Clear-the-Cache-in-Chrome
Whenever you do changes to your script file. Just add a ?(version without brackets) after your file source url.
Check the below link for detailed answer
How can I force clients to refresh JavaScript files?
This cases are mostly happens in IE browser,
For solution, you can add version parameter at the time of including JS file in application like as follow
<script src="/js/demo.js?v=1"></script>
Nex time if you make any change in js file then change that version from 1 to 2
<script src="/js/demo.js?v=2"></script>
I hope this will solve your problem for all browsers.

how to load the latest javascript files every time the user visits the website [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How do I force the refresh of javascript files in a browser?
My application in ASP.NET MVC based and javascript files are included in .csHtml file.
I require this so that the user do not have to do a [Ctrl+F5] or manually clear cache and the most recent version of javascript file is loaded everytime in the browser.
I appreciate if some examples can be provided.
Primary technique suggested is to use a dummy paramater while including the file.
Also I do not what to change the parameter manually every time I modify a js file. Need some examples if this can be done automatically.
EDIT 1:
Please provide solution to this with ASP.NET MVC prospective.
Put a version number in the filename for your JS files (like jQuery does). Then, whenever you rev the JS files, you bump the version and change the HTML files that include it.
The jQuery file naming example:
jquery-1.8.3.js
jquery-1.9.0.js
This lets you set very long caching on your server for the JS files themselves which really helps with performance on your site. But, any time you rev the JS files, the viewer gets the new JS files immediately because the newly named files are pulled by the new HTML file because they aren't in the browser cache.
You want to use Bundling and Minification. Depending on your version of MVC, the implementation is slightly different. In the newest version, it is used by default.
Bundling and Minification will combine and minify all your scripts (and styles sheets) into one file (or multiple, depending on how you use it) and serve them up with a unique parameter. Any time a file changes in that particular bundle (and thus the user would require to download the new files) the parameter automatically changes.
For MVC3, you'll need to install Microsoft Web Optimization.
Then in your global.ascx, you'd do something like this and call it from Application_Start:
private static void SetupBundling()
{
var jsBundle = new Bundle("~/Scripts/js", typeof(JsMinify));
jsBundle.AddDirectory("~/Scripts/", "*.js", false);
jsBundle.AddDirectory("~/Scripts/anothr-good-folder/", "*.js", false);
BundleTable.Bundles.Add(jsBundle);
var randomBundle = new Bundle("~/Scripts/random", typeof(JsMinify));
randomBundle.AddFile("~/Scripts/random/main.js");
randomBundle.AddFile("~/Scripts/random/cool.js");
BundleTable.Bundles.Add(randomBundle);
var cssBundle = new Bundle("~/Content/css", typeof(CssMinify));
cssBundle.AddDirectory("~/Content/", "*.css", false);
BundleTable.Bundles.Add(cssBundle);
}
So that first bundle will bundle every .js file in your ~/Scripts folder. In your head file you can reference it like:
<script src="#Microsoft.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")" type="text/javascript"></script>
And it will be rendered like:
<script src="/Scripts/js?v=-2573834892993289" type="text/javascript"></script>
And any time one of your .js files change (or .css), so will the parameter.
Similar implementation for the CSS bundle, and also if you want to reference the randomBundle only on certain pages.
You can do cache-busting by attaching a random hash or number URL parameter after each javascript file URL like so:
http://www.bestsiteonearth.yes/cool_javascript.js?cache_buster=2187sasas1289012890aohkjaiosa0990
Since that number is different each time the page is loaded the URL will not be cached. More info here. Tutorial gives PHP examples, but if you know how to create a hash or random number in any language & can attach it to a URL you are good to go.
Personally I use PHP, but the way I do this is to search the output buffer for static files, such as images, scripts and stylesheets (and audio, video, whatever), then retrieve their modification time from the filesystem and append it as /t=TIMESTAMP. I then use .htaccess to strip the timestamp off and get the original filename. This is preferred over query strings because many clients will not cache files with query strings, and it's also preferred over versioning because it updates automatically simply by modifying the file.

Refresh external loaded javascript files

I have a number of js files that I put in an another folder for ease of updating and for sharing between different pages. These files are called from another page and I use the
<script type="text/javascript" src="/js/file.js"></script>
notation.
This works fine but when I change something in one of these js files, the browser (chrome, firefox, safari) still loads the previous version without the changes, therefore not updating the js file it uses to the updated one. I tried to clean out the cache to force it to load the js file again (with the changes), but to no avail.
The only workaround that I have is to rename the external file to file2.js and include that in the page calling it but it is a tedious process because if I make another change I have to change the name to file3.js, etc.
Is there a way to force the browser to reload the original js and not use a previously stored one>
You can force the refresh by adding something unique in the URL:
In the code below the string "d6aa97d33d459ea3670056e737c99a3d" has to be generated for each request. You can use a timestamp, a hash, a random number, whatever you want.
Because of this, the browser will not reuse what he has in cache and will always download the JS file.
<script type="text/javascript" src="/js/file.js?d6aa97d33d459ea3670056e737c99a3d"></script>
You could try the classic technique of adding a random number to the query string.
<script type="text/javascript" src="/js/file.js?r=123"></script>
This would achieve the same thing as using a different file name (as far as the browser is concerned, this is a different URL) but you wouldn't have to rename your file.
Just use this:
<script type="text/javascript" src="/js/file.js?1"></script>
See the ?1 after the filename.

Categories