Home Web Front-end H5 Tutorial Detailed code explanation of HTML5 offline application application cache

Detailed code explanation of HTML5 offline application application cache

Apr 01, 2017 am 11:09 AM

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
Copy after login

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>
Copy after login

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
Copy after login

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(){
   //其他和离线存储有关的错误
}
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Table Border in HTML Table Border in HTML Sep 04, 2024 pm 04:49 PM

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

Nested Table in HTML Nested Table in HTML Sep 04, 2024 pm 04:49 PM

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

HTML margin-left HTML margin-left Sep 04, 2024 pm 04:48 PM

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

HTML Table Layout HTML Table Layout Sep 04, 2024 pm 04:54 PM

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

Moving Text in HTML Moving Text in HTML Sep 04, 2024 pm 04:45 PM

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

HTML Ordered List HTML Ordered List Sep 04, 2024 pm 04:43 PM

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

HTML onclick Button HTML onclick Button Sep 04, 2024 pm 04:49 PM

Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.

HTML Input Placeholder HTML Input Placeholder Sep 04, 2024 pm 04:54 PM

Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

See all articles