I have an HTML/JS/CSS app that's been added to the home screen on an iPad. This is not a cached HTML app - it doesn't have cache.manifest and is supposed to pull data from the server.
For some crazy reasons, it's cached the CSS file and refuses to get the new version from the server. Mobile safari does show the latest version correctly. I deleted the home screen icon, killed the app in the recent list, cleared safari cache, cookies and website data, killed safari in the recent apps and and re-added the home screen icon again after ensuring that I am seeing the latest data on safari. When I run it, it's still using the old cached version of the CSS.
It's worth noting that it took about 20 restarts for it to see the updated images and javascript files, but it's still not seeing the new css.
Any pointers are more than welcome.
P.S. I managed to solve this on my own ipad by connecting it to the computer, going into the dev console and refreshing from there, however I can't force the client to do the same (least because the client doesn't have a mac) - I need a way to force it to refresh the files from ipad alone, without involving any other hardware.
I have run into this a few times.
The simplest solution is to add a version number after your css link:
<link rel="stylesheet" href="style.css?ver=1" type="text/css" />
Just change the version number when making edits - that should force the device to reload the CSS.
If you are using php, you can add the file modification timestamp to the css link:
<link rel="stylesheet" href="style.css?ver=<?= filemtime('style.css') ?>" type="text/css" />
This would force it to reload the file each time you change it.
See a more complete explanation here:
http://php.net/manual/en/function.filemtime.php#81194
And here:
https://markjaquith.wordpress.com/2009/05/04/force-css-changes-to-go-live-immediately/
Related
I am beginner so take it easy on me.
Recently i have developed a web application in java and i have deployed it on Tomcat7 and it worked fine but when i deploy it on Tomcat8 the default fav icon cannot be replaced although i am using the following:
<link rel="shortcut icon" href="/url/logo.png" type="image/x-icon"/>
<link rel="apple-touch-icon" href="/url/logo.png">
And the browser locates the photo perfectly it's not 404 Error!.
I think the problem is related to tomcat8 because the app worked fine on tomcat7.. what should i do to solve the problem ?
With all the comments: Works for me (tried on 8.0.32).
Make sure
that the Icon is indeed available where you expect it
that the other browsers didn't cache the image
that you don't have a <base> tag in <html><head>, so that the browser would expect the image somewhere else than you.
You can use the developer tools (hit F12) and check what file Firefox is loading, its response code and content and response headers.
You might need Shift-Reload in order to bypass the cache, or explicitly flush the cache before this operation.
You can also experiment with temporarily declaring other images and double check on all browsers, just to make sure you're indeed bypassing the cache.
I am making a website using PHP. While completing it I tested it on Firefox only. Today when I tried to test it on other browsers (Opera, Chrome & Internet Explorer) I found some problems in my CSS. When I made changes to my CSS file, none of these browsers except Firefox is showing changes made in the CSS file.
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
So far what I have tried after Googling for a long time is
Cleared Cache memory of browser
Put "?v='+1 everytime'" at end of style.css
Refresh the webpage using 'ctrl+f5', 'ctrl+r' etc.
Any help ? Thanks in advance....
This is intended behaviour by most browsers. Whenever you try to load a page, if any resources are already present in browsers' cache, they will be loaded from there.
You have two options:
disable browser cache for your preferred browser (some browsers allow you to disable cache for specific domains)
make your HTML always refresh the resource, by appending a non-repeating parameter to the requested resource file name. I personally use: ?v=1482939287 (where 1482939287 is the timestamp). This will make the browser always refresh the resource, as it will ask for a version that's not existing in browser cache.
Example: <link rel="stylesheet" type="text/css" href="/css/style.css?v=1482939287">
Update: You can flush the cache for a webpage by opening Dev Console (Ctrl+Shift +I), right-click-ing on refresh page arrow (while Dev Console is open) and selecting Empty Cache and Hard Reload. That is emptying the cache.
You can also disable it, as suggested above, by opening Dev Console, going to Network tab and checking "Disable Cache" checkbox right under it. Please note that cache is only disabled while your developer console is open.
There are several solutions for this. I will list you some of my options below.
Unique identifiers to files though parameters
Adding a parameter behind the file as a kind of a version number may help.
In php you can use time() to get the current timestamp or unique() to get a unique string.
Cache settings server side
You can also find some .htaccess settings for caching specific file types on the server side. For performance reasons you should do this for production, too.
Browser Dev Tools
Another way is to open your Browser Dev Tools (mostly F12) while developing. Most browsers like Chrome and FF provides a cacheless enviroment when your Browser Dev Tools are open. As a example in chrome you can disable caching explicit.
My suggestion
Or even better use Task Runner to accomplish this. The keyword to search for is 'cache bust'. As example you can run gulp for concat, versioning, and let it connect the right css files you want to. This is specially suggested for development phase.
regards
Gkiokan
So I'm having this really weird bug with my new server where the CSS won't update in the browser. Refreshing and clearing the cache doesn't work. I then opened up FileZilla to see if the updated CSS file is actually being uploaded to server using FTP, which it is, and then when I drag a copy of the css file to my desktop, the css file magically updates. The PHP file updates just fine.
Here's how I include the css: <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
I have no idea what is happening and how to fix this so any help would be greatly appreciated!
You could have any number of issues, but I'd like to point out a cool tip when using Chrome.
On your page, with the developer tools open if you press and hold the reload button you get a great option to clear the cache and hard reload!
This is very handy to make sure you have the "freshest" copy while developing.
Update:
As for your scenario (after reading updates) it sounds like an HTTP header issue with your CSS file.
Check what HTTP headers are being sent with your CSS file response. If you are not specifying a cache header it will likely try to cache for you. Set an expires header (in the past) when in development, but far in the future when in production. In the Network tab of your developer tools (most browsers) you should be able to see these headers, or you can use a too like Fiddler that will let you deeply inspect your network traffic.
Alternatively if you can't easily tweak the HTTP Headers, then set a far expires header, but ensure the path to the file changes whenever you make a code change. Options include:
adding a time() stamp (always changes (yeah!) but doesn't cache (boo))
add the version control # to the file URL (works great, but you need to manage the updates properly within your tooling)
something fancier that creates a generated "fake" path to the file that auto changes on any modification to the file... but also loads the URL as expected, and sets the cache to "forever" (max 365 days according to the HTTP specs)
You may try queries to force the browser to load fresh CSS when it loads. To do this
<link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">
If you are comfortable with php you may try below code to force the browser to load most updated CSS to load. To do this
<link rel="stylesheet" type="text/css" href="http://example.com/style.css?d=<?php echo time(); ?>" />
This will ensure browsers always load fresh CSS with last modified time stamp.
Hope this help you.
I'm trying to work in my local server but I have to clear my cache every time if I want to see changes on the css rules.
There is any way to control Google Chrome cache?
Open DevTools
Open Settings (bottom right or use F1 shortcut)
Check Disable cache (while DevTools is open)
https://developers.google.com/chrome-developer-tools/docs/settings#general
CTRL+F5 : to refresh the page by clearing GG chrome cache.
Open up your Developer Tools then click the icon on the top right
In settings --> preferences scroll down to find "Disable cache (while DevTools is open)" and click on the box to select the option.
If you are still having the problem, and the page works on other browsers, then the easy fix could be to just uninstall Google Chrome and do a fresh install of the latest version. I ran into this problem and it was the best fix instead of the headache of tracking down a complicated fix or outdated posts that no longer work. After you have Chrome reinstalled, repeat the steps above to disable cache.
Following this solution here helped me reloading the css : https://wpreset.com/force-reload-cached-css/
Instead of requesting the file doing the following :
<link rel="stylesheet" href="~/css/variabledocument.css" type="text/css" />
Request id by adding a parameter (the name of the parameter doesn't matter) at the end of the file :
<link rel="stylesheet" href="~/css/variabledocument.css?refreshcss=1" type="text/css" />
This will request the new css file. Whenever you make a change to your css file, you just have to change either the parameter name, value or both and the server will request it again.
This is very useful when you have no control over the browsers of your clients and it requests no action on their part.
You can do any of the following options:-
Install a Chrome Extension like Clear Cache to clear cache by clicking on icon.
Use Incognito Mode and browser your website in incognito mode. Incognito mode won't disable cache clearly. Disabling cache completely may slow down your browsing experience.
Use chrome's features like Hard Reload (Clear cache and hard reload). Read this stackoverflow post
As #Vitaly mentioned, Use Developer Tool settings to disable cache completely.
Choose what fits you :)
More tools > Developer Tools
Then right click the refresh button on the browser.
You will get three options. Select "Empty Cache and Hard Reload".
This will only impact the active tab.
Shift-F5 to reload the page worked for me on Chrome 61.0.3163.100
To Control Google Chrome Cache you can do following steps:
Disable the cache (while DevTools is open)
Close the Chrome Browser
Clear the Cache with a cleaner software (such as CC Cleaner)
Open Chrome browser
Just to elaborate on JGallardo's answer above in 2022
In Chrome version 100.0.4896.88 in order to Disable the cache (while DevTools is open) the setting looks like this:
I like the solution of SylvainB2347 with adding some parameter to the include statement. This really makes Chrome to reload the resource as it assumes it must have changed.
I just wanted to optimize this solution a little, to make it automatic but not breaking the caching principle.
My solution is to use the PHP function filemtime(filename) which returns the timestamp of last content modification. I use it as:
<link rel="stylesheet" href="/index.css?foo=<?php echo filemtime("index.css"); ?>">
which produces this in HTML:
<link rel="stylesheet" href="/index.css?foo=1673508035">
When I modify index.css, the timestamp changes. This way the browser is forced to reload the resource only if it's been modified since the last visit. And I don't have to rewrite anything manually.
I have had this problem for a while now. There are times when I am working on a CSS file and I overwrite it by FTP-ing via FileZilla. When I reload the page to check my new changes, it doesn't load my new file. I can clear cache, reload, reset, etc, nothing will reload it. It happens the same accross IE, FF, Chrome, Safari, etc. If I delete the CSS file from the server, it is still being loaded up, but I don't know from where. The website is WordPress based but has no cache plugins. After a while, it will load the new file, but a while has to pass.
http://skyhangout.com/bellavistadental/
What in the world is causing this?
I had the same problem a few times! I can be obvius, but do you delete the cash from the dashboard? It is the only thing thats works to me (sometimes).
A common and effective method of cache busting is to append a query string ?example to the end of the stylesheet link:
<link rel="stylesheet" type="text/css" media="all" href="http://skyhangout.com/bellavistadental/wp-content/themes/tOrange/style.css?v=1.0" />
Then you just change ?v=1.0 to ?v=1.1 or something similar each time you update the CSS file.
This makes the browser think it's a new file, so any previously cached version is ignored and the new CSS file is downloaded.
If this doesn't fix it, it's not a browser cache issue, and is probably server-side caching (on the server level, not the Wordpress level), which you'd need to speak with your webhost about.