HTML5 application caching

HTML5 Application Cache

What is Application CacheApplication Cache

HTML5 introduces application caching technology, which means web applications It can be cached and used without a network. By creating a cache manifest file, you can easily create offline applications.

The three advantages brought by Application Cache are:

① Offline browsing

② Improve page loading speed

③ Reduce server pressure

And all major browsers support Application Cache, even if it does not support it, it will not have any impact on the program

Offline storage technology

HTML5 proposes two major offline storage technologies: localstorage and Application Cache, both have their own application scenarios; the traditional offline storage technology is Cookie.

After practice, we believe that localstorage should store some non-critical ajax data as an icing on the cake;

Application Cache is used to store static resources, which is still an icing on the cake;

And cookie can only save a small piece of text (4096 bytes); so it cannot store big data. This is one of the differences between cookie and the above caching technology. Because HTTP is stateless, the server needs to distinguish whether the request comes from the same server. A server needs an identification string, and this task is completed by cookies. This text will be passed between the server and the browser every time to verify the user's permissions.

So the application scenarios of Application Cache are different, so the usage is inconsistent.

Introduction to Application Cache

The use of Application Cache requires two aspects of work:

① The server needs to maintain a manifest list

② On the browser All it takes is a simple setting

Illustration with an example:

CACHE MANIFEST
CACHE:
# 需要缓存的列表
style1.css
1.jpg
01.js
http://localhost/applicationcache/02.js
http://localhost/applicationcache/zepto.js
NETWORK:
# 不需要缓存的
4.jpg
FALLBACK:
# 访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件*.html /offline.html
2.jpg/3.jpg

First of all I am here An error was reported:

Application Cache Error event: Manifest fetch failed (404)

The reason for this error is: the manifest file needs to be configured with the correct MIME-type, that is, "text /cache-manifest". It must be configured on the web server, different servers are different

\APPLICATIONCACHE
    01.js
    02.js
    1.jpg
    2.jpg
    3.jpg
    4.jpg
    demo.appcache
    index.html
    style1.css
    style2.css
    web.config
    zepto.js

In this way, it can be applied offline. Even if the network is disconnected at this time, those files can still be accessed

Here is one point It is worth noting that if /index.html is not included here, it will cache "applicationcache/". In fact, this is index.html

Manifest files can be divided into three sections:
CACHE MANIFEST - files listed under this header will be cached after the first download
NETWORK - files listed under this header require a connection to the server, and will not be cached
FALLBACK - The files listed under this heading specify the fallback page when the page is inaccessible (such as a 404 page)

Cache Manifest Basics

To enable application caching, include the manifest attribute in the document's <html> tag:

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

Each page that specifies a manifest will be displayed on the user's page It will be cached when accessed. If the manifest attribute is not specified, the page will not be cached (unless it is specified directly in the manifest file).

The recommended file extension for manifest files is: ".appcache".

Please note that the manifest file needs to be configured with the correct MIME-type, that is, "text/cache-manifest". Must be configured on the web server.

Manifest File

Manifest files are simple text files that tell the browser what is cached (and what is not cached).

Manifest files can be divided into three sections:

CACHE MANIFEST - files listed under this heading will be cached after the first download

NETWORK - under this heading Outgoing files require a connection to the server and will not be cached

FALLBACK - The files listed under this heading specify the fallback page (such as a 404 page) when the page cannot be accessed

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 loads, the browser downloads these three files from the root directory of the website. Then, whenever the user disconnects from the Internet, these resources are still available.

NETWORK

The following NETWORK section specifies that the file "login.php" is never cached and is not available offline:

NETWORK:
login .php

An asterisk may be used to indicate that all other resources/files require an Internet connection:

NETWORK:
*

FALLBACK

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

FALLBACK:
/html/ /offline.html

Note: The first URI is the resource, the second is the substitute.

Update cache

Once an application is cached, it will remain cached until the following occurs:

The user clears the browser cache

The manifest file is modified (See tips below)

Update application cache by program

Example - Complete Manifest file

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.php

FALLBACK:
/html/ /offline.html

Tips: Lines starting with "#" are comments. But it can also serve other purposes. The application's cache is updated when its manifest file changes. If you edit an image, or modify a JavaScript function, these changes will not be re-cached. Updating the date and version number in the comment line is a way to cause the browser to re-cache the file.

Instructions on application caching

Please pay attention to the contents of the cache.

Once a file is cached, the browser will continue to display the cached version, even if you modify the file on the server. To ensure that the browser updates its cache, you need to update your manifest file.

Note: Browsers may have different capacity limits for cached data (some browsers set a limit of 5MB per site).

Continuing Learning

new file

<!DOCTYPE html> <html manifest="demo_html.appcache"> <head> <meta charset="UTF-8"> </head> <body> <script src="demo_time.js"> </script> <p id="timePara"><button onclick="getDateTime()">获取日期和时间</button></p> <p><img src="" width="336" height="69"></p> <p>尝试打开 <a href="tryhtml5_html_manifest.htm" target="_blank">这个页面</a>, 在离线的状态下重新载入这个页面，页面也可以访问。</p> </body> </html>

submit Reset Code

Automatic operation

HTML5 application caching

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]