WebKit Research on the implementation of application cache for HTML 5

Last Update:2015-02-24 Source: Internet

Author: User

Tags browser cache

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Because of the working relationship, studied for a period of time applicationcache. Let's start with a few basic concepts about SQL DB table associated with it,

cachegroups : is a set of resources, such as HTML, CSS, JS, image, They are associated with a cache manifest, and each cache entry that the Cachegroups table contains has its own ID and the corresponding manifest URL.
cacheentries , cacheresources : These two tables store metadata for some resources (METADTA), such as HTTP headers, MIME types, and so on.
CacheResourcesData: This table stores each resource in blob mode.
caches : This table stores the size of each resource.

In the webkit/source/webcore/loader/appcache/directory, there is its implementation: APPLICATIONCACHESTORAGEXXX. When we compile WebKit, open the offline cache option, it will enable the HTML5 app cache feature and generate a SQL db file named Applicationcache.db in the user-specified cache directory. So when we put the manifest file on the Web to describe which files require the cache, and those that do not need the cache, WebKit's loader will decide whether to store resouce to this file, according to the manifest description. and whether you need to load resource such as image from this db, so you can avoid requests from the network, which can save a lot of overhead.

For more information, see articles from w3school.com.cn:

With HTML5, creating a cache manifest file makes it easy to create an offline version of your Web app.

What is the application cache (application cache)?

HTML5 introduces application caching, which means that Web applications can be cached and accessed without an Internet connection.

Application caching brings three benefits to your app:

Offline Browsing-users can use them when the app is offline
Speed-cached resources are loaded faster
Reduce server load-The browser will download only updated or changed resources from the server.

Browser support

All major browsers support application caching, in addition to Internet Explorer.

HTML5 Cache Manifest Instance

The following example shows an HTML document with the cache manifest (for offline browsing):

Instance

manifest="demo.appcache"><body>the content of the document......</body>

Try it yourself.

Cache Manifest Basics

To enable application caching, include the manifest attribute in the

<! DOCTYPE html>

Each page that specifies a manifest is cached when the user accesses it. If the manifest property is not specified, the page is not cached (unless the page is specified directly in the manifest file).

The recommended file name extension for the manifest file is: ". AppCache".

Please note that the manifest file needs to be configured with the correct mime-type, "Text/cache-manifest". Must be configured on the Web server.

Manifest file

The manifest file is a simple text file that tells the browser what to cache (as well as what is not cached).

The manifest file can be divided into three parts:

Cache MANIFEST -Files listed under this heading will be cached after the first download
NETWORK -Files listed under this heading require a connection to the server and are not cached
FALLBACK -Files listed under this heading provide a fallback page when the page is inaccessible (e.g. 404 pages)

CACHE MANIFEST

The first line, CACHE MANIFEST, is required:

CACHE Manifest/theme.css/logo.gif/main.js

The manifest file above lists three resources: a CSS file, a GIF image, and a JavaScript file. When the manifest file is loaded, the browser downloads the three files from the root directory of the Web site. These resources are then available, regardless of when the user disconnects from the Internet.

NETWORK

The following NETWORK section stipulates that the file "Login.asp" is never cached and is not available offline:

NETWORK:login.asp

You can use an asterisk to indicate that all other resources/files require an Internet connection:

network:*

FALLBACK

The FALLBACK section below specifies that if an Internet connection cannot be established, replace all files in the/html5/directory with "offline.html":

fallback:/html5//404.html

Note: The first URI is a resource and the second is a substitute.

Update cache

Once the app is cached, it remains cached until the following happens:

User empties browser cache
The manifest file is modified (see tips below)
App Cache updated by program

Instance-Full Manifest file

CACHE manifest# 2012-02-21 v1.0.0/theme.css/logo.gif/main.jsnetwork:login.aspfallback:/html5//404.html

Important Note: "#" begins with a comment line, but can also be used for other purposes. The app's cache is updated when its manifest file changes. If you edit a picture, or modify a JavaScript function, these changes are not re-cached. Updating the date and version number in the comment line is a way to enable the browser to re-cache the file.

Notes about the application cache

Keep an eye out for cached content.

Once the file is cached, the browser continues to show the cached version, even if you modified the file on the server. To ensure that the browser updates the cache, you need to update the manifest file.

Note: browsers may have a different capacity limit for cached data (some browser settings are limited to 5MB per site).

WebKit Research on the implementation of application cache for HTML 5

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More