How to implement application cache in html5? A brief description of offline storage technology-H5 Tutorial-php.cn

How to implement application cache in html5? A brief description of offline storage technology

青灯夜游

Release： 2018-09-08 17:07:42

Original

1626 people have browsed it

In this chapter, we will introduce to you how to implement application cache using html5? Briefly describe offline storage technology. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Before HTML5, we had to connect to the Internet to access the page. However, with the rise of mobile Internet, the location of device terminals is no longer fixed. Mobile devices rely heavily on wireless signals, but the reliability of wireless networks is not stable. For example, websites cannot be accessed when passing through tunnels or in places with weak signal strength. This is undoubtedly a bad user experience, so offline caching in HTML5 (applicationCache) solves this problem.

1: What is offline caching
HTML5 offline cache, also known as applicationCache, is one of the new features of HTML5. A simple understanding is that the data is cached after the first load. Without clearing the cache, it can be loaded next time without a network. It is used to compare web pages or games with static data. Easy to use. Of course, not all new browsers in Html5 can support it, and the same goes for offline caching. Anyway, IE9 (including) and browsers below IE9 are currently not supported. If used on mobile, it should be supported. It is also relatively simple to detect whether offline caching is supported.

<script>
    if(window.applicationCache){
        alert("支持离线缓存");
    }
    else{
        alert("不支持离线缓存");
    }
</script>

Copy after login

2: How to use

HTML5 offline cache is a cache area separated from the browser's cache. To save data in this cache, you need to use a description file (. manifest), lists the resources that need to be downloaded and cached.

1. Import the manifest file

<!DOCTYPE html>
<html>
<head>
<!--就是在这里引入，注意引入也是讲究路劲跟文件名的，
      这里文件名是test，后缀是mainfest，路劲在当前的html下面
     （一般放在html当前文件夹下面也没什么问题，我是这么放的）-->
<html manifest="test.manifest">
<meta charset="UTF-8">
<title>html5 离线缓存</title>
</head>
<body>
</body>
</html>

Copy after login

2. After the introduction is completed, the next step is to write the test.mainfest file code.

Manifest files are simple text files that tell the browser what is cached (and 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 will not be cached
③FALLBACK - The files listed under this title specify the fallback page when the page cannot be accessed (such as the 404 page)

Complete code

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

Copy after login

The manifest file needs to be configured with the correct MIME-type, That is "text/cache-manifest", this is configured on the web server.

Analysis:
Lines starting with # represent comments. The files under CACHE are all cached files. NETWORK means that each time it is requested from the network and then cached, the specified file is always requested from the network for the latest one. FALLBACK: If the specified file cannot be found, it will be redirected to a new address. Standards are all capitalized.

3. Dynamically control updates through JS

The application will remain cached after it is offline, unless one of the following situations occurs:
The user clears the browser's access to your website data storage.
The manifest file has been modified.

Please note: Updating a file listed in the manifest does not mean that the browser will re-cache the resource. The manifest file itself must be changed.

1) Cache status: The window.applicationCache object is a programmatic access method to the browser's application cache. Its status property can be used to view the current status of the cache.

The value of applicationCache.status is as follows:
0 === Not cached
1 === Idle (the cache is the latest state)
2 === Checking
3 === Downloading
4 === Update ready
5 === Cache expiration

var appCache = window.applicationCache; 
switch (appCache.status) { 
　　case appCache.UNCACHED: // UNCACHED == 0 
　　　　return &#39;UNCACHED&#39;; 
　　　　break; 
　　case appCache.IDLE: // IDLE == 1 
　　　　return &#39;IDLE&#39;; 
　　　　break; 
　　case appCache.CHECKING: // CHECKING == 2 
　　　　return &#39;CHECKING&#39;; 
　　　　break; 
　　case appCache.DOWNLOADING: // DOWNLOADING == 3 
　　　　return &#39;DOWNLOADING&#39;; 
　　　　break; 
　　case appCache.UPDATEREADY: // UPDATEREADY == 4 
　　　　return &#39;UPDATEREADY&#39;; 
　　　　break; 
　　case appCache.OBSOLETE: // OBSOLETE == 5 
　　　　return &#39;OBSOLETE&#39;; 
　　　　break; 
　　default: 
　　　　return &#39;UKNOWN CACHE STATUS&#39;; 
　　　　break; 
　　};

Copy after login

2) Actively update the cache: applicationCache.update()

<script>    //利用定时器隔一定时间自动更新一下缓存
    setInterval(function(){
            applicationCache.update();
    },50000);</script>

Copy after login

To update the cache programmatically, please call applicationCache.update() first. This operation will attempt to update the user's cache (provided the manifest file has been changed). Finally, when applicationCache.status is in the UPDATEREADY state, call applicationCache.swapCache() to replace the original cache with the new cache.

var appCache = window.applicationCache;
appCache.update(); // Attempt to update the user&#39;s cache.
...
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache();  // The fetch was successful, swap in the new cache.

Copy after login

4. A simple offline cache application

Build a web project AppCache, including four files:
appcache_offline.html

<html manifest="test.manifest">
<head>
<title>AppCache Test</title>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
</head>
<body>
<p><output id="test"></output></p>
<div id="log"></div>
</body>
</html>

Copy after login

manifest File: test.manifest

CACHE MANIFEST
#VERSION 1.0
CACHE:
test.css

Copy after login

test.css

output { font: 2em sans-serif; }

Copy after login

test.js

setTimeout(function () {
document.getElementById(&#39;test&#39;).value = new Date();
}, 1000);

Copy after login

The above is the detailed content of How to implement application cache in html5? A brief description of offline storage technology. For more information, please follow other related articles on the PHP Chinese website!