Is HTML5 Application Cache different from browser cache?? If so, in what aspects, it is different and how this mechanism works?? And tell me how using AppCache we can improve browsing performance.. Also discuss about the pros and cons of HTML5 AppCache (its expiry and storage size limit etc.,)??
HTML5 Cache
HTML5 provides application cache, which means that a web application is cached, and accessible without an internet connection.
Application cache gives an application three advantages:
Offline browsing - users can use the application when they're offline
Speed - cached resources load faster Reduced server load - the
browser will only download updated/changed resources from the server
Browser cache
Internet browsers use caching to store HTML web pages by storing a copy of visited pages and then using that copy to render when you re-visit that page. If the date on the page is the same date as the previously stored copy, then the computer uses the one on your hard drive rather than re-downloading it from the internet.
References -
http://www.w3schools.com/html/html5_app_cache.asp
http://www.pctools.com/security-news/what-is-a-browser-cache/
The new HTML5 specification allows browsers to prefetch some or all of a website assets such as HTML files, images, CSS, JavaScript, and so on, while the client is connected. It is not necessary for the user to have accessed this content previously, for fetching this content. In other words, application cache can prefetch pages that have not been visited at all and are thereby unavailable in the regular browser cache. Prefetching files can speed up the site's performance, though you are of course using bandwidth to download those files initially.
AppCache has been deprecated.
See Google's note on it and Mozilla's. Google recommends using the service worker Cache API (which Mozilla classifies as an "experimental technology"). Note: compatibility with Safari is limited.
Difference
AppCache is specifically designed to allow web apps (and web sites) to be made available offline, though the same speed benefits which the normal browser cache provides, when the user is online, are also provided by AppCache.
The key difference with the Browser cache is that you can specify all the assets the browser should cache in a manifest file (conceivably your entire site) whereas the browser cache will only store the pages (and associated assets) you have actually visited.
Related
When server sets expire to far future on resources, shouldn't client recognize the resource is not expired and load it from its own cache? (no contact to server)
Why is this manifest cache required for offline browsing?
Html5 adds an "Application Cache" feature which is implemented by manifest files in the header of web pages. This application cache is different from the normal caching that browsers perform, and allows a developer to specify which portions of the website should be saved locally. The manifest can specify things like images, javascript files, xml documents and more. It gives the developer more control over how the website operates in offline mode.
The standard caching isn't designed specifically for supporting offline browsing. Its designed more for stuff like pressing the back button or rapidly viewing the same page, which is why the w3c added the new application cache.
I listed static resources (CSS and javascript files) referenced by the HTML in the explicit cache section of the cache manifest, as a modern mobile web app usually does. But it is surprising to find in chrome that these static resources are downloaded twice for the first time accessing the web app when there is not any local cache yet, since the cache is used to minimize bandwidth. I think the reasons that they are downloaded twice is that they are referenced in the cache manifest and in the HTML.
Why doesn't the browser share the resource if it is referenced in both places? Is it conforming to the HTML5 standard or a bug in chrome?
I have seen this behavior consistently across nearly every browser (Chrome, IE, and Firefox) when using a cache manifest. As far as I can tell, the resources are indeed downloaded twice because they are referred to in both the cache manifest and the html/css. The initial load is for loading the page itself, and the second load is for loading the appcache.
Now, even if a second request needs to be performed to load the appcache, the resource should be served from the regular browser cache since the original request probably loaded it into the browser cache. However, all browsers seem to treat appcache loads differently than regular browsing activity and bypass the cache.
As far as HTML5 specs go, the spec suggests that browsers can implement a mechanism to use the existing download, but it is optional:
Fetch the resource, from the origin of the URL manifest URL, with the synchronous flag set and the manual redirect flag set. If this is an upgrade attempt, then use the newest application cache in cache group as an HTTP cache, and honor HTTP caching semantics (such as expiration, ETags, and so forth) with respect to that cache. User agents may also have other caches in place that are also honored.
If the resource in question is already being downloaded for other reasons then the existing download process can sometimes be used for the purposes of this step, as defined by the fetching algorithm.
An example of a resource that might already be being downloaded is a large image on a Web page that is being seen for the first time. The image would get downloaded to satisfy the img element on the page, as well as being listed in the cache manifest. According to the rules for fetching that image only need be downloaded once, and it can be used both for the cache and for the rendered Web page.
source
I don't understand the point of the HTML5 AppCache. We already have a normal cache. If you visit a website the first time it'll already cache all the assets. What extra value does the AppCache provide? Is it just a list of files so that the browser knows what assets to download, even if they're not referenced by the HTML right now? Does the browser make sure that the caching is "all-or-nothing", i.e. does it ensure that everything referenced by the manifest is cached, or nothing at all?
I think the point you're missing is that AppCache is specifically designed to allow web apps (and web sites) to be made available offline, though the same speed benefits which the normal browser cache provides, when the user is online, are also provided by AppCache.
The key difference with the browser cache is that you can specify all the assets the browser should cache in a manifest file (conceivably your entire site) whereas the browser cache will only store the pages (and associated assets) you have actually visited.
I'm no expert on the AppCache, but I do know it is not without its problems. There's a really good article here from a chap who used AppCache to allow parts of his mobile site to be available offline. It includes some rationale on their decision to use it and a number of gotchas they encountered in doing so.
This HTML5 Rocks article on the subject also has some good information.
AppCache actually uses the browser cache in support of its operation. It is the browser equivalent of downloading an app to run locally.
The first time a user visits the page, the resources of that page will be loaded from the server and stored in the normal cache. If the page specifies an appcache manifest, the browser will download the manifest and fetch all the resources in there (even if they do not appear on the page that embedded the manifest). These are then stored in appcache.
The second time a user visits the page, the browser will check its appcache. If an entry exists for that URL, it will load the page from appcache instead of from the server, based on the rules specified in the manifest (the manifest can mark some resources explicitly as fetched from the network).
After the browser loads the page from appcache, it will contact the server to see if there is an updated manifest. If the manifest is updated, it will fetch the resources from the manifest. These fetches are done using normal browser cache rules, so some of these resources may actually end up being fetched from the regular browser cache instead of from the server (this allows you to do differential updates when using appcache to develop offline apps). The new version of the appcache is kept separate from the old version. After the new version is fetched the user keeps interacting with the resources from the old version until they refresh the main page, after which the new version is loaded and the old is discarded.
Another important point is that appcache has different rules for when resources are discarded. Appcache basically never discards the latest set of resources, and caches them as a whole. To prevent abuse it enforces storage limits (sometimes as little as 5 MB) of how big a site's cache can be. By contrast, the browser cache has no per-site limits, but will discard individual resources from a site if the global cache limits are reached.
The important feature of HTML 5 application cache is it makes available the web application offline. Which is not given by normal browser cache.
In addition to this application cache will provide
Speed - since the entire contents of the specified page will be cached to browser so it will provide a better speed than browser cache
Reduce Server Load - There is no need of a post back all the time, since all the contents are there in cache, till there is any changes in the Manifest file
Cache manifest :- The cache manifest file is the heart of HTML5 application cache. We can specify what are the pages need not be cached, what should not, and even we can reuse this one as a error handling technique, for that we can specify a custom error page in the FALLBACK section to show if the user request a content that requires network connectivity
For a basic understanding on Application cache you can See this tutorial
What is new in HTML 5’s “offline web applications” feature which was not already available in all browsers?
Offline caching is the job of the browser — how did it become a job of HTML?
A web cache is a mechanism for the
temporary storage (caching) of web
documents, such as HTML pages and
images, to reduce bandwidth usage,
server load, and perceived lag. A web
cache stores copies of documents
passing through it; subsequent
requests may be satisfied from the
cache if certain conditions are met.
As written in Wikipedia’s article for Web cache.
And this is written for offline web cache in the W3C website:
In order to enable users to continue
interacting with Web applications and
documents even when their network
connection is unavailable — for
instance, because they are traveling
outside of their ISP's coverage area —
authors can provide a manifest which
lists the files that are needed for
the Web application to work offline
and which causes the user's browser to
keep a copy of the files for use
offline.
What is HTML 5 doing better and different in caching?
Is it similar to offline mode in Internet Explorer 5? And can we cache the data beyond the limit of amount of space set in browser?
Please give me an example so that I can understand the difference of HTML 5 offline cache, and browser caches.
Web browser caching is when browsers decide to store files locally to improve performance. HTTP allows web servers to suggest browsers how long to store the files for, and allows browsers to ask the server whether a file has changed (so that they can avoid re-downloading it).
However, it’s not designed to reliably store assets required by an offline application. It’s ultimately up to the browser whether, and for how long, it caches the files. And browsers will often stop using their cached version if they can’t contact the server to check that it’s up-to-date.
The HTML5 offline web applications spec provides web authors with the ability to tell browsers what to store for offline access, and requires browsers to keep those files up-to-date when it is online. It also provides a DOM property that tells the developer whether the browser is online or offline, and events that fire when the online status changes.
As Peeter describes in his answer, this allows web app developers to store user-inputted data whilst the user is offline, then sync it with the server when they’re online again. The developer has to do this storage and syncing manually, as the browser only provides the events indicating online status, but if the browser also supports localStorage, the developer can store the data there.
I can do no better than point you to the relevant chapter of Dive into HTML5: http://diveintohtml5.ep.io/offline.html
You can now cache dynamic data, instead of just js/css/html files / images.
Lets say you've got a todo list application open in your browser. You're connected to the internet and you're adding a bunch of stuff you have to do.
Boom, you're on an airplane without a connection. You've got 6 hours of time to kill so you decide to get some work done. You finish all of the things on your todo list (the list was still open in your browser). You select all of the items and change their state to "finished".
Your plane lands, you open up your laptop and refresh the page. All the changes you did without a connection are now synced to the server as you have a internet connection now.
Does the HTML 5 application (offline) cache have any benefit for online/connected apps?
My page needs to be online to function and is loaded exclusively in a UIWebView as part of an iOS app. This page is loading some large dependencies and I was wondering if I could use the HTML 5 app cache to store these dependencies to avoid relying on the regular browser cache.
So I guess my question is:
When an HTML 5 page is online, does it use the offline cache if a dependency already exists in the HTML5 offline cache?
Yes, the HTML5 offline application caching works with online applications, allowing you to benefit from indefinite local caching. For example, see http://www.w3.org/TR/html5/offline.html#concept-appcache-onlinewhitelist about the ability to specifically whitelist particular URLs which do not get cached.
Offline web apps make use of a cache manifest as you probably know. Any resources declared in the CACHE: section of this file will be stored in the offline cache, and so a user agent that can work with such things will always pull the resources from there—theoretically therefore, there is a performance benefit.
Conversely, any pages / resources specifically listed in the NETWORK: section of your cache manifest will not get cached locally (throwing errors when offline), and the app will require a connection to load them.
The benefits of using an off-line cache have to be weighed against the additional maintenance you may incur in providing (and updating) the manifest cache file itself, but hey.