We store only index.html on our server and turned off caching for it. When we deploy application we upload all resources to CDN and replaced links in index.
Instead of XHRs file downloads browser fetches content from cache, but for files directly linked from index.html browser sends requests to CDN and got 'Not modified' response.
How to force browser use cached files referenced from not cached index.html?
Reproduced in Chrome at least.
That is normal behavior. '304 Not modified' means that the copy in the Browser Cache is still valid (etag) and a download is not needed.
If you clear the clients browser cache then the file from the cdn will be fetched with a "200 ok"
Related
When navigating my site, my browser is loading the JS files from cache, but not the CSS files. This happens both running a local server and on the live site (to me and apparently to other users, which is apparent since the logs show mostly .css files getting loaded).
I've tried the other solutions (example): I am clicking around on hyperlinks (not refreshing) and my Chrome Devtools do not have "Disable Cache" checked.
Here is the initial request (using CTRL+F5 for a hard refresh):
Then navigating back to that page creates another request:
(Note: there is no Cache-Control sent in the second request, proving that I indeed did not refresh)
As expected, the server responds with a 304 Not-Modified for the .css file, but I don't understand why it's making a trip to the server at all (notice below the .js file is retrieved without a server request).
I believe you can look at the issue first-hand on your own machine by going to https://up.codes. I'm using Chrome 71.0.
Why are the CSS files not being cached?
#Allen found the issue (Vary header included cookie and the cookie was changing between requests), but I'll show how to fix it for the case of Flask for posterity. You can use Flask's #app.after_request() hook to make sure Flask does not add cookie when it hits this line:
#app.after_request
def add_header(response):
url = request.url
if ('.css' in url or '.js' in url or '.svg' in url or '.png' in url or
'.gif' in url) :
# Flask adds to the header `Vary: cookie` meaning the client should
# re-download the asset if the cookie changed. If you look at the Flask
# source code that comes next after the below return, it will add
# `Vary: cookie` if and only if session.accessed is true.
session.accessed = False
return response
Your server responded with different session cookie when requesting these css files, and your header set with Vary: Cookie, which caused the browser to send request again because of the session cookie change.
Check out for your web.config's compilation attribute, if its:
<compilation debug=”true”/>
CSS will get continually downloaded by clients on each pageview request and not cached locally within the browser.
If its set to false, the resource is only downloaded once to the client and cached there.
Check out this post: Chrome will not cache CSS files. .js files work fine
Chrome uses multiple types of caches.
Blink (the rendering engine that Chrome uses) uses an in memory cache and a disk cache. It uses this cache for images, fonts and js files.
As long as a file of that type is still in the memory cache or the file cache it will be loaded from there and skip the WebRequest API, this means that no call is made to the server.
I don't know exactly why css files are not being cached by Blink, but this is the reason why you see an HTTP request for css files and not for js ones.
Note, that if, for some reason, the js file is evicted from the memory cache and the disk cache you will see an HTTP request for the js files also.
I need to disable cache for browsers however when I add a manifest file to the server, it displays old html.
Here's my manifest file (cache.manifest):
CACHE MANIFEST
# Cache manifest version 1.0
CACHE
#no cache
NETWORK
*
The cache manifest is for offline applications and controls the creation and use of a local copy of an application. It’s not really a cache, and it is very different normal caching. The HTML document containing the manifest attribute is always included in the application “cache”. This means that in supporting browsers, the HTML file, once loaded, will be stored locally and the local copy will be used in all subsequent accesses to its URL, without ever fetching it again from a server—unless the content of the manifest file changes.
To affect normal caching, use cache control tools provided by the server software or, if you cannot, use meta hacks. See Caching Tutorial for Web Authors and Webmasters.
I am using a manifest file to cache my files. Between these files some are the index.html and some javascript libs.
After I tested my webpage , the files are successfully cached (i validated this with the web inspector), however when I open the page again the non-cached linked resources are not receiving response.
The link URL is ok because I can use the "copy link URL" option and paste the url in another browser tab and receive the response. But in my web page i am not receiving anything.
I tried using NETWORK: * with the same result.
Is this because the index.html shouldn't be cached if it has non-cached resources linked?
thanks in advance
The Fallback Header has to be on it's own line, like so:
NETWORK:
*
(new line after the colon).
Did you use the same template for the index.html and the uncached resources or including the entry somehow in those?
In that case you got the master entry for every page you don't want to be cached: every page that includes the manifest entry will became cached.
I have a special kiosk-solution with chrome where I need chrome to upon application start, load the start-url from cache, not try to fetch it online.
The reason is that this is, like I said, a kiosk-mode presentation, is is a screen standing in the public that reboots every night, and if the reboot happens while the ISP has downtime on the internet connection, chrome will only show an error page.
If I can get it to load the cached version of the page though, instead of trying to fetch it online, then the last valid version of the page will show, and through some nifty ajax-workings of mine ;) it will automatically update after a while. If THAT update fails, the currently displayed version of the page will remain until a subsequent update succeeds.
See my problem?
In a browser like firefox I could do it by starting the browser in off-line mode and after page load switch it to online-mode. Only FF doesn't work for me in the particulat project, and Chrome doesn't seem to have an off-line mode?
You could use HTML5 Offline Web Applications to accomplish that. It's probably very easy to set up in your case, just add a file like the following to your app's directory:
CACHE MANIFEST
index.html
help.html
style/default.css
images/logo.png
images/backgound.png
NETWORK:
server.cgi
This manifest should contain all the files you'll need to display some useful information and later grab current content via AJAX. There's also a NETWORK section, where you have to specify things that should not be cached (ie the script that delivers your Updates via AJAX).
You can load the manifest file by adding a manifest attribute to your tag (cache-manifest is the name of the file above):
<html manifest="cache-manifest">
Make sure your server delivers the cache manifest with a MIME-type of
text/cache-manifest MIME
Type or copy-paste the below flag setting into the chrome address bar.
chrome://flags/#enable-offline-mode
scroll down to enable offline stale mode.
Restart your browser.
If an offline version of the page is available in the system cache it will load up when you are not connected.
One thing I'm not fully grasping is if the cache manifest is also acting as a prefetch when it is online for all the files listed.
For example, lets say I'm visiting:
/page1.html
Each of the pages on my site will have the same declaration:
<html manifest="/cache.manifest">
In the cache manifest file, I have:
CACHE MANIFEST
/page2.html
/page3.html
/page4.html
So what will happen is I visit /page1.html first, and when I'm online my browser will know to cache pages 2-4 also. And when I'm disconnected and I visit pages 2-4 everything will load just fine because it was already cached.
QUESTION: If I visit /page1.html, and I'm STILL connected online, and visit /page2.html, will my browser still request /page2.html, or will it not make another request to the server and use what it cached from the /cache.manifest file? Essentially acting like the prefetch link that firefox uses?
Well, the spec says "all files," without any exceptions for html files, so I figure it works for html files just like any other, it gets taken from the cache, not the server. However, I have not done any testing to confirm this. I would do the following:
Create the following cache manifest file:
CACHE MANIFEST
/page1.html
/page2.html
/page3.html
/page4.html
Include it in each of the four cache manifest files. Then:
Visit page1.html
Edit page2.html to make it different than before you visited page1.html
Visit page2.html
See which version you get.
Make sure you try it out on all browsers. I'll be interested to see your results.
When we use cache manifest it takes the files from the cache each time you load the page.
There is a solution for this.
You have to change the version number in the manifest file, If at all you have done any changes to the HTML files. so that your manifest pulls in the latest version of the HTML from the server and Stores it in Cache.
CACHE MANIFEST
#v01
/page1.html
/page2.html
/page3.html
/page4.html
You can just Increment the V01 to 02,03... So on, this will ensure your cache will have latest version of html pages
I think it takes it from the manifest file even if you are online :). Can't you try it out by uploading a file and then navigating to the page?