Detailed code explanation of HTML5 offline application application cache

1. Application scenarios

We usually use the browser to cache Storing a single web page on the user's disk saves bandwidth when the user browses again, but even so, the Web is still unable to be accessed without the Internet. In order to allow the web application to be accessed in the offline state. html5Provides offline storage function through application cache API. The premise is that the web page you need to visit has been visited online at least once.

What is the difference between offline local storage and traditional browser cache?

1. Browser cache mainly includes two categories:

a. Cache negotiation: Last-modified,Etag

The browser asks the server whether the page has been modified. If If there is no modification, 304 is returned, and the browser directly browses the local cache file. Otherwise the server returns new content.

b. Complete caching: cache-control, Expires

Set the cache expiration time through Expires, and there is no need to interact with the server request before the expiration.

2. Offline storage provides services for the entire web, and the browser cache only caches a single page;

3. Offline storage can specify the files that need to be cached and which files can only be browsed online. The cache cannot be specified;

4. Offline storage can dynamically notify users to update.

2. How to implement

Offline storage is managed through manifest files and requires server-side support. Different servers have different ways to enable support.

CACHE MANIFEST//必须以这个开头
version 1.0 //最好定义版本，更新的时候只需修改版本号
CACHE:
    m.png
    test.js
    test.css
NETWORK:
    *
FALLBACK
    online.html offline.html

CACHE specifies files that need to be cached; NETWORK specifies files that can only be browsed through the Internet, * represents files other than those in CACHE; each line of FALLBACK specifies files used online and offline respectively

If you want the manifest to manage storage, you also need to define the manifest attribute in the html tag, as follows:

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE HTML</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;"><a href="http://www.php.cn/java/java-ymp-Lang.html" target="_blank">lang</a></span><span style="color: #0000ff;">="en"</span><span style="color: #ff0000;"> manifest</span><span style="color: #0000ff;">=&#39;test.manifest&#39;</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;"><a href="http://www.php.cn/html/html-HEAD-2.html" target="_blank">head</a></span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">char<a href="http://www.php.cn/code/8209.html" target="_blank">set</a></span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span><br/><br/><span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

Finally, don’t forget that these applications require server support.

The way to enable Apache server support is: add a piece of code in conf/mime.types:

            test/cache-manifest manifest

The way to enable IIS server:

Right click--HTTP ---Under MIME mapping, click File Type --- New --- Enter manifest for the extension, and enter test/cache-manifest

for the type. 3. Dynamically control updates through JS

applicationCacheObject provides some methods and events to manage the interactive process of offline storage. By entering window.applicationCache in the firefox8.0 console, you can see all the properties and event methods of this object.

applicationCache.onchecking = function(){
   //检查manifest文件是否存在
}

applicationCache.ondownloading = function(){
   //检查到有manifest或者manifest文件
   //已更新就执行下载操作
   //即使需要缓存的文件在请求时服务器已经返回过了
}

applicationCache.onnoupdate = function(){
   //返回304表示没有更新，通知浏览器直接使用本地文件
}

applicationCache.onprogress = function(){
   //下载的时候周期性的触发，可以通过它
   //获取已经下载的文件个数
}

applicationCache.oncached = function(){
   //下载结束后触发，表示缓存成功
}

application.onupdateready = function(){
   //第二次载入，如果manifest被更新
   //在下载结束时候触发
   //不触发onchched
   alert("本地缓存正在更新中。。。");
   if(confirm("是否重新载入已更新文件")){
       applicationCache.swapCache();
       location.reload();
   }
}

applicationCache.onobsolete = function(){
   //未找到文件，返回404或者401时候触发
}

applicationCache.onerror = function(){
   //其他和离线存储有关的错误
}

4. Interaction between browser and server

There was once an interview question like this: "Description is entered in the address bar of the browser: www.baidu. What happened after com?

1. The server returns baidu page resources, and the browser loads the html

2. The browser starts parsing

3. Found the link and sends a request to load the css file

4. The browser renders the page

5. Discovers the

picture

, sends a request to load the picture, and re-renders 6. Sends a request js file, Blocks rendering. If js operates on the dom, it will rerender

For pages that support offline storage, what is the interaction between the browser and the server?

First load page:

1-6: Same as above

7: Request the pages and data that need to be cached, even if they are in the previous page It has been requested in the step (this is an energy-consuming place)

8: The server returns all requested files, and the browser stores them locally

Load the page again:

1: Send a request

2: Use a locally stored offline file

3: Parse the page

4: Request the manifest file on the server to determine whether there is one Change, return 304 means there is no change and go to step 5, otherwise go to step 6

5: Enter 7-8 of the first loading page

6: Use local storage and do not re-request

The above is the detailed content of Detailed code explanation of HTML5 offline application application cache. For more information, please follow other related articles on the PHP Chinese website!