I am totally lost, don't even know what to google anymore, maybe someone can push me in the right direction here:
I have a WildFly Server running, and I did some changes to a JavaScript file.
As soon as I republished the new .war file to the server, the changes caused by the new js file were visible in my browser on the computer.
Yet, as I opened my phone to check the results there, nothing happened. I cleared the cache and, of course, now the changes appeared. On both, computer and phone, I was using Chrome.
I put the HTTP Header "Cache-Control" with "no-cache" as value, but that didn't do anything.
I use NGINX in front of the WildFly, but I checked and NGINX does not filter out that header.
I also tried versioning the files. WildFly offers a very neat solution for that, if you stumble across this question, check out this post to see how that is done. But this didn't do the trick for me either.
Does anybody know what might be going on here?
Thanks for any help or comments!
It ended up being a timing issue.
The browsers on the phones eventually reloaded the current files, and since then changes are visible immediately.
The script trick with the version number works like a charm. So do the headers ("Cache-Control: no-cache"). Both together are probably pretty fail safe. One can't do it all with version numbers, only the includes.
Thanks #Azametzin for the input!
If the cache cleaning through "Cache-Control" is failing somehow, another solution would be to set a new version for JavaScript file. For example:
<script type="text/javascript" src="script.js?v=0.01"> // any version number you want
I'm not very used to WildFly Server, but I believe you could set a function for creating a random number that will be used as the new version everytime the page is refreshed.
Something like: <script type="text/javascript" src="script.js?v={random number here}">
Hope it gives you a direction to follow.
Not all browser which cache-control supports in some browsers in Android device (Not Chrome Android), because the cache-control still works in android device. Some browser which taken from Android doesn't work.
Related
I have a localhost instance I run on a given port, and when developing a site for another client, my previous clients favicon still shows in the tab even though the client has no favicon. How do I remove my previous client's favicon from the browser/server? It does it Safari, Chrome (OS X), and Firefox. I've tried the force refresh (Mac equivalent of Ctrl + F5) to no avail. Any help would be appreciated.
Thanks.
Clear the browser's cache: Ctrl-Shift-Delete (Cmd-Shift-Delete), select what to clear, and for what period of time. Because the new website has the same host as the old one, browser may still think you're on the previous site and display your cached icon.
Or just add a favicon to the new site.
You can force a browser to download new instances of similarly named files by adding a version to them in the form of a query parameter, and updating the version as needed throughout development.
<link rel="icon" href="localhost:4200/favicon.ico?version=2" />
Other than that, closing the tab, and in some cases restarting the browser works if force refreshing the cache didn't.
These are typically stored in with the temp internet files on your server. Clearing the history, cookies, and meta-data should take care of this.
I downloaded the barebone example of Twitter's bootstrap and customized it. I tested it locally (with WAMP server) and everything works perfectly, both the CSS and the JScript.
I uploaded the files to my webhosting service and the JScript just doesn't work. I noticed it because dropdown boxes stopped working.
I searched and found other persons with the same problem but they all are using ruby and I'm not. Just the play CSS+JScript provided by bootstrap. Besides they said the solution was to include the bootstrap.js first and then the jquery.js. Well I tried it and it didn't work, I even included the not minified .js and still it didn't work.
I'm using the same browser (Chrome) for local and remote testing. I also tried different hosting services and the problem occurred in both.
Help is much appreciated.
Other similar questions:
Javascript features work on localhost but not when deployed to Heroku
twitter bootstrap drop down suddenly not working
The issue might be that you load boostrap.js before jQuery. Locally your browser may be using a cached copy of Jquery, so it works there but not on your live site. Try fixing it by switching those two lines in your code:
<script src="/code4pt/styles/js/bootstrap.js"></script>
<script src="/code4pt/styles/js/jquery.js"></script>
I know this is very strange but I think I got the solution. Previously I was using the (supplied) jQuery 1.7.2 minified. Now I changed it to use the jQuery 1.8.0 not minified. It just started to work... Another thing I did was to convert all files' encoding to UTF8 (I think this was the real problem/solution)
I had the same problem. In IE, the site was working on localhost but not when hosted on a different server. Adding the following meta tag fixed it.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
I had the exact same problem, so was relieved to find this post and others like it. My resolution was similar. I pulled my hair out for half a day trying all different things. Walked the dog. Had half a dozen beers. Slept on it. Had breakfast. Recopied back the stylesheets at top, and the js from the bottom from the local html to the server php, and then for some unknown reason it started working again. The only points which seem useful for others going through the same:
Try and get back to a working scenario - in my case the index.html was working on the server but not the index.php. Getting these the exact same was key.
Try on different browsers just in case something strange is going on.
Make sure you keep clearing the browser cache (e.g. right click on the reload button in Chrome and choose 'Empty Cache and Hard Reload')
Inspect your bootstrap css and js versions. Change them forward and backward in version until you get success. Chances are, the version that came with your bootstrap theme download is the most likely one to work.
I was having simular issues before. The tabs function was working fine in my HTML site, but would not work when coded into a Wordpress theme. All of the source URLS were being generated dynamically with Wordpress's .
The tabs finally began working when I added all JS links (except for Modernizr into the footer instead of the header.
Back to basics: If Debug is set to true on the local machine and false on the deployment environment as it should be, make sure your .min.js files are not overriding customizations you have made to the non-minified versions of .js files (applies to .css as well).
You can also turn Debug off on the local machine and you should see the same issues.
Late to the party but I found out that my issue was that the Bootstrap.js was not being pushed out during deployment.
In addition to the very useful suggestions by #dialex and #Darrell , I will add that if none of that works, you can review any code that you might be linking to, ie. via require ('page.php');, for duplicates. Duplicated .js links tend to cause these issues.
I ran into this on a site I built and uploaded to Amazon S3. Worked fine on my local machine and even my local server, but didn't work when served from Amazon. The console in Firefox (but not Chrome) showed it was failing to load bootstrap.min.css (et. al) because their MIME type was not text/css.
I had to use the S3 console to force change their types to text/css, clear caches, and reload. Voila!
I'm using Codeigniter. I solve these issues by changing my base_url in config.php.
Previous :
$config['base_url'] = 'http://localhost/public_html';
Changes to :
$config['base_url'] = 'http://(my intranet server ip adress)/public_html';
Had the same problem
In my .html files I had this line
<link th:rel="stylesheet" th:href="#{/webjars/bootstrap/4.0.0-2/css/bootstrap.min.css} "/>
After changing it to this
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
Everything works fine. I guess that internally webjars have http and changing css link to start with https solved my problem
Chrome is forcing https (as well as adding https to every internal link) to everything on my site, even though I have https support disabled/don't want to use it.
This occurred after I went to my site's cpanel (which requires you go through https). I changed no settings, and after that Chrome forces it. Only occurring on Chrome (firefox is working fine), and only on one computer.
Of course, I tried restarting, clearing cache/cookies as well as going to chrome://net-internals and deleting the domain from HSTS. Nothing works.
Any ideas? Thank you
I had the same issue and to all odds it had something to do with my website itself. In my case I'm running WordPress & WooCommerce on my site and it seems like by deactivating WooCommerce my issue was solved. Still not sure how to properly fix this since as soon as I activate WooCommerce again the same issue re-appears. However, at least I know now where the issue is coming from and can dig around further.
I noticed the same issue with WooCommerce 2.3. Earlier versions don't have the same issue. My workaround was to load my site using Internet Explorer {the horror}.
I am experiencing this weird issue where my Chrome browser keeps loading a old version of my website whose code doesn't even exist on my server any more. I assume it's a typical cache issue.
I tried to clean the browser cache, use igcognito mode, and clean DNS cache. The old cached page is still being loaded.
This issue seems to have been discussing on this google group for three years but there is still no solutions. https://productforums.google.com/forum/#!topic/chrome/xR-6YAkcASQ
Using firefox or any other web browsers works perfectly.
It doesn't just happen to me. All my coworkers experience the same issue on my website.
<?php Header("Cache-Control: max-age=3000, must-revalidate"); ?>
You can implement a PHP script that must be the first line of code in your index file . It is an http header typically issued by web servers. You can also rename the resource that is considered "stale". This tutorial will give you more details. https://www.mnot.net/cache_docs/
I'm not sure if I understand your problem correctly, but I was experiencing something similar and instead of clearing the cache I disabled it by doing this:
Open chrome and then go to your website
Press Command + Option + C(Mac)
Now that you've opened chrome's DevTools, go to the main menu where it says: Elements Console Sources ...
Click on the menu element that says Network
Make sure that the "Disable Cache" checkbox is checked
Then reload the page without closing the DevTools
This worked for me.
Let me know if it worked for you :)
A short term fix to view the new version of your site would normally be to clear out the cache and reload, for some reason this doesn't always work on Chrome. This short term solution is not going to fix the problem for every user that's on your site though, it will just allow you to see the new version of your site.
Adding version numbers to CSS and JS files will allow you and every other user, to see the most recent version of your site. A version number will force any browser not to load from the a user's personal computer cache, and instead load the actual files on the server, if the version number varies from the one in the user's cache.
So if you have these files on your server:
ExJS.js
ExCSS.css
and change them to:
ExJS.js?v=1.01
ExCSS.css?v=1.01
the new version of these files will load in any browser.
Normally, a browser will always load the HTML file from the server, but there are some HTML meta tags you can use to make sure that the most recent HTML version will load for any user:
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
There are also ways to make sure that files in other languages always load the most recent version as well, which is discussed on this post:
How to add version number to HTML file (not only to css and js files)
You can press on Inspect, then Network and check Disable cache.
change the name of images and make the necessary image name changes in html file.. found this quick fix for my website
I ran into the same issue, and I also tried to disable caching on my JSP pages
<% response.setHeader("Cache-Control","no-cache");
response.setHeader("Pragma","no-cache");
response.setDateHeader ("Expires", 0); %>
But it didn't help.
This is a known issue with google chrome and chromium browsers, even though you clear cache and cookie.
However it may or may not happen for most of the users.
Also this has been unresolved till the date since last 9-10 years.
Hence for testing purposes I would highly recommend to use Mozilla Firefox or Opera.
However it does sounds that your application is limited to certain browsers for best experience, and may not sound convincing to Business/End users.
But having said that, this caching issue may or may not happen to most of us.
You should be able to clear the problem by resetting Chrome. This is the only way I found to clear this condition - after tearing my hair out for half a day.
Prior to finding this, I tried clearing the cache, deleting the contents of the various cache directories etc. in vain.
[As of today May 3 2021] You can do this by gong to 'Settings > Advanced > Reset and clean up > Restore settings to their original defaults'. Note that this will not remove any bookmarks but will log you out of all accounts you are signed into.
Adding CNAME Will help also if you always run site without www, try with www.example.com will work.
I came across this issue developing locally, and tried the following things:
Clearing Cache + generally ALL files in Chrome
Setting the Cache-Control Header like Eli Duhon mentioned.
Setting the Cache Control Header in multiple other ways.
And the only thing that fixed the problem for me was to basically re-start my docker containers on which the app was running.
so I did this:
docker-compose down
And then
docker-compose up
and everything was updated after that.
HOWEVER, if you have changes again, they are still not updated...
So this is certainly not a fix to this problem, as I dont even know what causes this behaviour in the first place, but I assume it has to do something with hot reloading and/or Docker but that was the only thing that did the trick for me so I thought I would mention it here...
I had this problem moving a Wordpress site to new hosting where the URL redirects to .../wp, which hadn't been the case before.
Chrome was helpfully presenting a directory listing showing the file dates from the old server, despite the DNS having updated fully a week ago. So it was obviously demonstrating the problem discussed here.
I added an index.html file with just the following in it:
<meta http-equiv="refresh" content="0; URL='http://my-wp-site.com/wp'"/>
which fixed the problem straight away, including on Chrome browsers that had not had their cache cleared and that had no knowledge of any Google account of mine.
I don't know why this worked, however, given all the problems people have listed above.
you have two options
a) consider fingerprint the stale resources like
<script src="js/app-4829382839238882882bb3442bbbbdhh3kh3.js" type="text/javascript"></script>
b) Add cache control headers such as Cache-Control, Expires on your webserver.
This is a good read on browser caching
I am developing a web app for offline use, thus I need to use the application cache functionality.
Everything works great on Chrome (15.0.874.106) but is doesn't work on Firefox (7.0.1) and Opera (11.52).
This is my cache manifest file cache.manifest.php (I have reduced it to the bare minimum):
<?php
header("Cache-Control: max-age=0, no-cache, no-store, must-revalidate");
header("Pragma: no-cache");
header("Expires: Wed, 11 Jan 1984 05:00:00 GMT");
header('Content-type: text/cache-manifest');
?>CACHE MANIFEST
CACHE:
/app/common/css/reset.css
/favicon.ico
And this is the first 4 lines of the "main" HTML document:
<!DOCTYPE html>
<html manifest="/app/mobile/cache.manifest.php">
<head>
<title>MyApp Mobile</title>
When I try and load the cache manifest (http://www.myapp.com/app/mobile/cache.manifest.php) into the browser the file is displayed correctly but when I try to load the page once offline I get the "Unable to connect" error page. Again, that just happens on Firefox and Opera.
Firebug says "0 items in offline cache" and I didn't find the way to check the application cache on DragonFly.
I am getting mad and I don't know how to debug the problem effectively on Firefox and Opera.
Please help.
Thanks,
Dan
In my experience using the HTML5 AppCache, it is great once you get it working, but extremely brittle. If there's the tiniest thing wrong with it the browser ignores the entire file and, annoyingly, rather than use the browser's ordinary cache, re-loads everything from scratch off the server.
Worse, browsers will not re-load the manifest file unless its text content changes. So you might tweak your server headers or something to fix it, but unless the content of cache.manifest.php changes the browser will blindly ignore it and do exactly what it did last time. So it could have been broken, then you fixed it, but browsers are ignoring the changes because the text content of cache.manifest.php hasn't changed. This even seems to be immune to clearing your browser cache, which is part of what makes it so confusing - app cache is really, really serious about caching.
To get around this, text changes in comments count, so have a comment at the top with a version or timestamp or the date (e.g. # Version 1.2) and change that when you want the browser to "notice".
Then, the browser still won't immediately use it! The way the app cache works is the next time you load the page it will do exactly what it did last time yet again, and start checking for an update in the background. So you probably want the console up, wait for something like "updating..." then "complete", then hit Refresh and the browser will finally start using the new version. At last!
All in all it can be a right pain to get working. However, once it's working it's almost bulletproof: you can pretty much rest assured anything listed in the cache manifest is only every downloaded once, ever, for all time, per user, until you change the text content of the file.
Browser standards compliance is pretty good these days, so my best guess is you actually have it working, but you checked Chrome last and it's the only browser which has cached the manifest file correctly. During development you might have had it broken, but Firefox and Opera are clutching their old manifest files to the death. I bet you also tried clearing the browser cache in Firefox and Opera, which probably did nothing - you need to change the text content of the file and double-refresh before either Firefox and Opera will finally give up their broken versions of the manifest file and start using the one which works which you probably uploaded ages ago.
From: http://appcache.offline.technology
In Firefox, any resources served with Cache-control: no-store will not be cached, even if they're explicitly included in the manifest.
My php by default is sending:
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
It is enough to add:
header("Cache-Control: no-cache, must-revalidate");
To the php file to get it to start caching it.
(This is similar to Mychal Hackman's answer, but a little more specific).
To me your cache manifest looks a bit "unusual"... it might help to add a FALLBACK section... another point is that the appcache might interfer with the "normal browser cache" i.e. if the cache manifest is changed it needs to make sure that the browser reloads it, ideally this is achieved by changing the name (for example by having version number, timestamp... as part of the name).
You can interact in your page with the appcache via JS which could help to pinpoint the problem you see.
For in-depth information including JS code and a thorough walk-through see
http://www.html5rocks.com/en/tutorials/appcache/beginner/
http://www.w3.org/TR/html5/offline.html
If need be come back with specific questions.
UPDATE
As per comments provided by OP this shows a nice implementation of the JS API for checking/debugging appcache as described in the links above.
You can check the current status of the application cache using window.applicationCache.status, which returns a numeric value mapped to the following states:
0 - uncached, 1 - idle, 2 - checking, 3 - downloading, 4 - updateready, 5 - obsolete.
The application cache API has a few things worth noting:
window.applicationCache.update(): This will trigger the application cache download process, which is nearly the same as reloading the page. It simply checks if the manifest has changed, and if so downloads a fresh version of all the content in the cache (respecting any cache headers). Note that even though a new cache is created with this, the page will continue to use the old cache. To make the page use the new cache you have just downloaded, you must use the swapCache() function.
window.applicationCache.swapCache(): This function tells the browser to start using the new cache data if it is available. It is important to note that even if there is a new manifest file, the application will still continue using the old cache (as specified in the old manifest file) untill swapCache() is called. Once swapCache() is called, then the cache will be used as specified from the new manifest file.
from: http://dev.opera.com/articles/view/offline-applications-html5-appcache/
Check your cache in about:cache. I am betting you will see "data-size 0 bytes" for your PHP file(s).
Check your caching headers, I found in Firefox the default was "no-cache" on my php files. I just added:
header("Pragma: public");
header("Cache-Control: public, max-age=6000");
to my PHP file and reloaded the offline cache and it is finally working.
HTH
Try removing:
header("Cache-Control: max-age=0, no-cache, no-store, must-revalidate");
header("Pragma: no-cache");
header("Expires: Wed, 11 Jan 1984 05:00:00 GMT");
so that you are only sending the Content-type header:
<?php header('Content-type: text/cache-manifest'); ?>
ApplicationCache forces caching (oversimplifying, but not by much). Those first three headers are ways to prevent caching.
Opera appears to prevent caching when those headers are present. Firefox' debugging tools are a bit wonky when it comes to debugging AppCache, but it's probably save to assume this will fix it there as well.
For Firefox, try this little trick:
<html manifest="/app/mobile/cache.manifest.php?1">
Its the "?1" that finally get Firefox to check for the latest file. That's what did the trick for me anyway. Hope this helps.
From my experience with getting a site working offline on the iPad:
The name of the file needs to end with .manifest
The mime type needs to be text/cache-manifest
Have a version in the comments of your manifest
Create some javascript functions using window.applicationCache... to check if the browser sees a change in the manifest and to reload the content, also capture the status events and display them somewhere
See also:
http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html#//apple_ref/doc/uid/TP40007256-CH7-SW1
I had a similar problem. I am very late in answering but this might be helpful for others. Make sure you dont run into problems described by AshleysBrian in his answer. Adding to that
Make sure the manifest file is served as type "text/cache-manifest"
Dont try it out in Private Browsing mode in Firefox/IE. It only works in regular browsing mode. But it works in both modes in Chrome
While offline, a simple change in the URL could be a problem
Eg: http://localhost:8080/app doesn't work on Firefox/IE
but http://localhost:8080/app/ works in Firefox/IE
Both of them work in Chrome
Use these handy resource viewers to get more detailed perspective
about:cache - Firefox
chrome://appcache-internals/ - Chrome
Pls fill in if someone knows what is it for IE
As I understand, the Offline Web applications section in the W3C HTML5 draft is non-normative; meaning that is it still not part of the formal HTML5 standard as yet.
Since the feature is still not part of the HTML5 standard, different browsers may have different and varying/non-standard implementations, if at all they choose to implement it. Not all browsers may choose to support it. Do not rely on non-normative features until they are part of the standard.
I've found something similar, and tracked it down to the Cache-Control: no-store heading on the manifest. Chrome accepts this, but Firefox fails silently with this.
My tests showed that you can keep no-cache headers & expires headers in to ensure frequent refreshes.
My only way to make the manifest work everywhere is to do this:
CACHE MANIFEST
# version x.x
# 2015-03-27
# list everything
If I use NETWORK and/or FALLBACK it wont work (in Chrome).
I had the same problem also. Everything worked fine in Chrome and IE, but an "Unable to connect" message in FF.
After hours of despair, i found the solution and it was ridiculous simple:
In the developer-toolbar the entire cache was deactivated.
:/