I am using bootstrap.min.css and my entire website uses this single CSS file for all pages. There are 179 pages on my website and my bootstrap.min.css is just 117Kb
is there any way to store this file on the client's system when he opens home page
and when user moves to the next page how can I use CSS file stored on the client's system ?
this how am linking file this right method
<link href="../../../css/proper align.css" rel="stylesheet">
If the css file is accessed via the exactly same URL (same server, same path, same filename, no attached parameters) and the caching headers are set properly (which they are by default), the file will be cached by the browser.
You can check this behavior using the development tools of your browser.
Here you have a screenshot from the devtools of Google Chrome (hit F12). On the network tab I have selected bootstrap.min.css and I see that it is served from the browsers cache. All fine here. If you don't get it from cache, you can check the caching settings inside the response header.
(http://imgur.com/wSliBMk)
By default the .css file will get cached on client side.
This means it will only be downloaded once for all the 179 pages you have on you website.
All of this caching and reading from cache is handled by the client browser.
If you are not planning on doing any weird "magic" with the css file you won't have to worry about it.
If you reference the same path in the html file the browser will "know" that it has to use the already cached file.
This cache will most of the time persist after the client closes the browser and returns to your website a later time.
Well, the file IS stored on the clients system, it's called caching and is done automatically by browsers. If you reference the same file on all pages, then it's loaded from the same location.
If you worry about bandwidth, I recommend using a CDN-service for your Bootstrap file.
(eg. "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css")
Related
My question is rather simple. Is there a way in the cache manifest file (or In the html) to tell iPhone, iPad or other never to cache specific files?
I have a made a small webpage that also works as a web app and there is some of the page that never should be cached.
Yes, you can list the files in the Network section to tell the browser to never save the files.Lines from the book diveintohtml5
The line marked NETWORK: is the beginning of the “online whitelist” section. Resources in this section are never cached and are not available offline.
For device or browser specific manifest, you can not do anything from JavaScript side. You have to do additional server side detection for that.
I have a test.html which uses multiple stylesheets. When opened the file from the local drive (not going through webserver), the styles were applied differently when compared to loading the files from webserver. Can this happen?. How to control this from happening?
attached is the comparision image from chrome browser developer tools styles listing.
As it was mentioned in comments, this looks like a browser caching issue.
A web cache stores copies of documents passing through it; subsequent requests may be satisfied from the cache if certain conditions are met.
http://en.wikipedia.org/wiki/Web_cache
Try hitting F5 to refresh the page or disable cache. Usually, it is done through the Developer Tools in a browser (F12).
I want to cache only a few files like JavaScript and CSS, font files and image sprites.
Is it better to add a manifest file for the files or should I let the browser do the cache?
If it's better with manifest, can I still leave the pages inaccessible if a user has no network connection? How?
I don't want this website to work offline, I just want a faster page load on secondary pages.
No, the page you use to reference the manifest file will itself always be cached. See:
HTML5 cache downloads root everytime
HTML5 cache manifest no cache for html file itself
So you will always have at least one page which is available offline. However this can be a page which is otherwise not normally accessed, and you can reference it in an iframe from your online pages.
I've been using HTML5 Offline caching on my website for a while and for some reasons I am considering turning it off. To my surprise it doesn't work.
This is how I've implemented HTML5 Offline caching.
In my index.html I give path to the manifest file
<html manifest="app.manifest">
In the app.manifest file I list all the js/css/png file that I would like to be cached by the browser for offline usage. Every time I deploy updates, I update the app.manifest file, which causes the browser to fetch latest version of all the files listed in the manifest file.
In order to turn off the offline caching, I changed my index.html's opening tag to
<html>
I made a dummy change to app.manifest file, so that browser (which has already cached my website), will detect the change and download latest version of all the files (including index.html).
What I noticed is, the browser indeed gets the latest version of all the files. I see the new <html> tag in the updated version without the manifest declaration, however the behavior of the browser for future changes does not change. i.e. I now expect the browser to immediately fetch the new version of the index.html file, when it's changed on server. However that doesn't happen. The browser doesn't download updated index.html until I make any changes to the manifest file.
Thus it appears to me that the browser has permanently associated app.manifest file with my website URL and it won't get rid of it even when I don't mention it in <html> tag.
I have tested this on both Google Chrome and Firefox, same results. I also tried restarting Chrome, but it won't forget that my site ever had app.manifest defined for it. I haven't found any discussion on this aspect of offline caching on the web.
Update: I managed to get rid of the behavior in Chrome by clearing all the browsing data (by going to settings). But that's not something I can tell the users to do.
Make the manifest URL return a 404 to indicate you don't want offline web applications anymore. According to Step 5 of HTML5 §5.6.4, this marks the cache as obsolete, and will remove it.
You can also manually delete the offline web application in Chrome by going to about:appcache-internals.
I'm trying to get a simple html5 webcache to work.
This is my one and only html page, index.html:
<!DOCTYPE HTML>
<html manifest="./main.manifest">
<body>
<p>Hi.</p>
</body>
</html>
This is my only cache file, main.manifest:
CACHE MANIFEST
# 2011-05-02-03
index.html
I'm running on apache shared hosting, I put a .htaccess file in my web directory where these other two files are, because I thought maybe I have to define the mime type:
AddType text/cache-manifest .manifest
So in the end I just have these three files in that directory:
index.html
main.manifest
.htaccess
When I visit the page on chrome from my mac, safari from my iphone, or chrome from my android 2.3 device, nothing happens, the page just loads as usual. If I turn airplane mode on (killing all connections) the page can't be loaded (so I guess caching failed).
What am I missing here?
Thanks
------------ Update ------------------
I think the mime type was not being recognized correctly. I updated .htaccess to:
AddType text/cache-manifest manifest
Now if I run in google chrome with console on, I see:
Document was loaded from Application Cache with manifest
http://example.com/foo/main.manifest
Application Cache Checking event
Application Cache NoUpdate event
Firefox prompts me when I load the page about the website wanting to let me store it to disk, so that's good. Looks like it's also working on android 2.3.4. The browser still says "This page cannot be loaded because you are not connected to the internet", but then it loads anyway.
Thanks!
First, you were right the first time on your mime type declaration. It should be like this:
AddType text/cache-manifest .manifest
Next, read this paragraph from Dive Into HTML5:
Q: Do I need to list my HTML pages in my cache manifest?
A: Yes and no. If your entire web application is contained in a single
page, just make sure that page points to the cache manifest using the
manifest attribute. When you navigate to an HTML page with a manifest
attribute, the page itself is assumed to be part of the web
application, so you don’t need to list it in the manifest file itself.
However, if your web application spans multiple pages, you should list
all of the HTML pages in the manifest file, otherwise the browser
would not know that there are other HTML pages that need to be
downloaded and cached.
So, in this case, you don't need a cache manifest. The browser will automatically cache your page (as long as it's the only resource, such as a CSS file or Javascript file, for example).
For more information, visit the link above.
I have had some trouble using "explicitly cached" items in my manifests, so I usually set it up like this:
CACHE MANIFEST
# 2011-05-02-03
CACHE:
index.html
But the other answer is correct, the browser will automatically cache any URLs that include an application cache manifest.
I recommend using Chrome's JavaScript Console -- it outputs application cache events as they are happening, including errors.