I have an Angular JS app that Im running a production environment and make deployments that include new features on a fairly regular basis.
My app has a sizable number of returning users and since the app is essentially just a JS file, the JS running on their device is often a cached version. Sometimes this is a problem because the new features may not be backwards compatible.
One method I'm aware of to force browsers to download a fresh version of a resource is to place random URL parameters in the src.
<link rel="stylesheet" type="text/css" href="theme.css"> <!-- cached -->
<link rel="stylesheet" type="text/css" href="theme.css?8f834giywe"> <!-- uncached -->
But for some reason, this doesnt work in my angular app.
<script src="./app/js/app.min.js"></script> <!-- cached -->
<script src="./app/js/app.min.js?43gt4gf342"></script> <!-- broken -->
The app loads (not a server-level issue) but immediately breaks.
Can anyone think of any reason why this would not work?
Any there any other options to force a client to download a fresh copy or a resource rather than using a cached version?
Try adding to the Header section of the HTML the following line:
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
This worked for me without the need to play with URLs.
Related
I have included the Bootstrap cdn links for using in HTML web-Resource code for CRM development. I have designed a HTML page using those Bootstrap functionalities. As a html page outside CRM it was working fine but when I added it to CRM Page as HTML web resource what it was displaying is a basic html page without css and javascript features.
How can I solve this?
I never used CDN source in my CRM web resource developments. Always have a local copy uploaded in CRM as web resource to refer in HTML pages and checked into Azure DevOps as well. I never faced any issues in this approach. I remember CDN url broke like you said when I tried last time.
Just sharing the url paths from <head> section that I'm using in one of my HTML web resource.
<script src="mts_jquery/2.1.4/jquery.min.js"></script>
<script src="mts_typeahead.bundle.js"></script>
<script src="mts_bootstrap/3.3.5/bootstrap.min.js"></script>
<link href="mts_bootstrap/3.3.5/bootstrap.min.css" rel="stylesheet" />
<link href="mts_bootstrap/3.3.5/bootstrap-theme.min.css" rel="stylesheet" />
<script src="mts_bootstrap-tagsinput.js"></script>
<link href="mts_bootstrap-tagsinput.css" rel="stylesheet" />
I've a ASP.Net MVC + angular web application. And about 500 + users are using the application.
The problem is whenever we do a new publish/ release we have to say the users to clear their browser cache. This is annoying for the users.
How other websites such as facebook etc.. manage the browser cache when they update their application/site since we don't clear our browser cache too often.
Is there any way to automatically clear borwser cache when there is a new release.
With ASP.Net Core MVC you can use the asp-append-version TagHelper for your script files. It calculates a hash of the file and appends it to the filename:
<link rel="stylesheet" type="text/css" href="myfile.css" asp-append-version="true" />
<script src="myfile.js" asp-append-version="true"></script>
so the files would become something like this:
<link rel=stylesheet href="myfile.css?v=qWYa_XOt9FCnEt2z8CjC7apiyjA5l9UA9UCqT028LI">
<script src="myfile.js?v=eN9kwxdWtX5aP8H3TFVOQrwu08Qndyktg5kvpSLa1A">
You can add a version number to your file like this
<script type="text/javascript" src="pathTofile.some.js?v1"></script>
The text after ? can be anything.The query string will help in avoiding cache & browser will load a different file and invalidate the one in cache
You can set up cache busting via a task runner: grunt, gulp, etc.
By using file calculated hashes you also can make your cache breaking smarter. That way a file will be cached only if it changes (thereby improving performance).
Please check this for an example: https://github.com/shakyShane/grunt-cache-breaker (similar modules are available for other task runners)
I can't link my CSS or other files to my HTML. I always get the error:
Failed to load resource: net::ERR_FILE_NOT_FOUND
And the strange thing is it works on the computer of my project partner. How is that possible? We have the same code.
This is the part of my code:
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/custom.css" rel="stylesheet">
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/register.js"></script>
<script src="/js/login.js"></script>
It's very difficult to know without seeing your directory structure. But it seems likely that removing the leading / from your file path will solve the issue. I'm willing to bet that you're unintentionally referencing an absolute path instead of a relative one.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/register.js"></script>
<script src="js/login.js"></script>
The leading slash tells that you want to link the files from a root. If you were viewing this page on e.g. http://www.example.com the files will be linked from http://www.example.com/css/bootstrap.min.css, even if your current page is http://www.example.com/folder/folder/page.html.
Since you're only using Windows without webserver, the root is C://. A solution would be to use relative paths instead of absolute paths.
For example:
<link href="css/bootstrap.min.css" rel="stylesheet">
In the previous example the file you link (with relative paths) will be in http://www.example.com/folder/folder/css/bootstrap.min.css if your current page is http://www.example.com/folder/folder/page.html.
Your URLs use absolute paths (i.e. they start with /) which makes them relative to the root of the website.
This is excellent when you want to write links that:
Work anywhere on the website, even if the HTML is shared between pages with different numbers of / in the path segments as your main navigation is likely to be
Work in both a development environment and a production environment
In this case it is failing because your development environment doesn't involve a web server.
You are loading the files into the browser directly from your local hard disk without going through an HTTP server. This makes the root of your website be the root of your hard disk (instead of the folder you are keeping the files in).
The solution: Install an HTTP server and tell your browser to fetch the files from http://localhost.
This will provide other benefits, such as being able to test Ajax code in your development environment.
Here is a screenshot
Here is the code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/united/bootstrap.min.css">
<link rel="stylesheet" href="../../style.css?v=3">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Open+Sans+Condensed:300|Russo+One">
<script src="https://code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.0/jquery.nicescroll.min.js"></script>
I am not including these files anywhere else. I am using cloudflare. JavaScript files load only once. The issue is only with stylesheets.
There are a few things I would check:
This may be an issue with the tool you are using to view network
traffic, not the actual webpage. Try an alternative tool such as
FireBug. To view the naked HTTP requests use Fiddler2.
Does your webpage use Frame/IFrame? If so, each frame is will make
an independent set of HTTP requests.
To remove all doubt, I would personally restart your computer. The number of times I see 'weird' tool behaviour that vanishes on a restart is astonishing.
CloudFlare wouldn't be adding additional stylesheets to your site. It looks like those resources are coming via Google and MaxCDN.
I have applications that run within the browser. When I make changes to pages and javascript I start getting calls from users who get weird results. I tell them to clear their cache and all is well.
Is there a way that I can force, or suggest to, the browser to get a new version of the page?
thanks
You can set a Cache-Control: no-cache header on the server-side to prevent the browser from caching your files.
Edit:
See this page for info on stopping caching of pages:
http://www.webmasterworld.com/forum21/10628.htm
See suggestions for .js/.css on this answer:
How to force browser to reload cached CSS/JS files?
The idea is to timestamp filenames when they change, so the filename changes and the browser is forced to load a new copy.
So I think I found the perfect solution. I discovered that if you put a ? and some unique character after the file name, it forces the browser to get a new version when that version changes.
So instead of:
<link href="css/mycss.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/ngen.js"></script>
code:
<link href="css/mycss.css?1.0.28" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/ngen.js?1.0.28"></script>
and since I use php, I create a global with the release in my main config.php and tack that on to the file reference.
$GLOBALS['V_UNIQUE'] = "?1.0.28" // my current release number
<link href="css/mycss.css?1.0.28<?php echo $GLOBALS['V_UNIQUE']?>" rel="stylesheet" type="text/css" />