HTML5 offline storage principle-HTML Tutorial-php.cn

Foreword:

Using HTML5, you can easily create an offline version of your web application by creating a cache manifest file.

HTML5 introduces application caching, which means web applications can be cached and accessed when there is no network.

Application caching brings three advantages to apps:

　Offline browsing--Users can use them when offline.

　Speed--Cached resources load faster.

　Reduce server load - the browser will only download changed resources from the server.

Principle and environment

　As mentioned above, the offline storage of HTML5 is based on a newly created .appcache file. Through the parsing listoffline storage resources on this file, these resources will be stored like cookies. Later, when the network is offline, the browser will display the page through the data stored offline.

Just like cookies, offline storage of html5 also requires a server environment.
A small tool is provided here - a simple iis server. Place it in the project update directory and double-click to run it to simulate the server environment.
Link: http://pan.baidu.com/s/1jG86UV0 Password: ja9h

Parse List

Before you start, you need to understand the manifest (that is, the .appcache file) and how to write the above parsing list.

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 heading specify the fallback page when the page is inaccessible (such as a 404 page)

When online, the user agent will read the manifest every time it visits the page. If changes are found, all resources in the manifest will be reloaded.

CACHE MANIFEST

The first line, CACHE MANIFEST, is required:

<span style="color: #008080;">1</span> CACHE MANIFEST / theme.css /logo.gif / main.js

Copy after login

　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

Whitelist, use the wildcard "*". It will enter the open state of the whitelist. In this state, all URLs that do not appear in the relevant Cache area will use the HTTP related cache header policy by default.

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

<span style="color: #008080;">1</span> NETWORK: login.asp

Copy after login

* can be used to indicate that all other resources/files require an internet connection:

NETWORK: *

Copy after login

FALLBACK

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

ALLBACK：/html5/ /404.html

Copy after login

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

Update cache

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

User clears browser cache
manifest file modified
Update application cache by program

Demo

<span style="color: #0000ff;">case</span>/ |-- index.html | |-- demo.appcache | |-- 简易IIS服务器.exe | `-- image |-- HTML5 offline storage principle `-- HTML5 offline storage principle

Copy after login

index.html

 
 
 
    <meta charset="UTF-8"> 
    <title>HTML5离线存储</title>
 
 
    <img src="image/HTML5%20offline%20storage%20principle" alt=""> 
    <img src="image/HTML5%20offline%20storage%20principle" alt="">

Copy after login

demo.appcache

CACHE MANIFEST #v01 image/HTML5 offline storage principle   NETWORK:*FALLBACK: /

Copy after login

HTML5 offline storage principle

HTML5 offline storage principle

is stored in the

image folder

Okay, then execute Simple IIS Server.exeTry it out.
When iis is turned on
Alt text
When iis is turned off (it is turned off, no effect will be seen if paused)

You can see that Picture 1 has been successfully displayed offline, but Picture 2 cannot be displayed as normal.

Now I want to change the positions of Picture 2 and Picture 1.

 
    <img src="image/HTML5%20offline%20storage%20principle" alt=""> 
    <img src="image/HTML5%20offline%20storage%20principle" alt="">

Copy after login

这时候发现问题来了，html明明修改了为什么图片没有置换过来呢，我不是在demo.appcache文件的NETWORK写了星号吗?除了CACHE MANIFEST文件其它都采用在线模式。查资料得知：引入manifest的页面,即使没有被列入缓存清单中，仍然会被用户代理缓存。
好吧，那我把.appcache文件更新下，于是乎把头部的版本号修改一下#v02。刷新下页面还是没反应！再刷新，有了！为什么？

　　对于浏览器来说,manifest的加载是要晚于其他资源的. 这就导致check manifest的过程是滞后的.发现manifest改变.所有浏览器的实现都是紧随这做静默更新资源.以保证下次pv,应用到更新.

通过控制台我们能够窥探一二：

第一次刷新，应用程序缓存更新准备事件,
第二次刷新才会看到效果。

缓存立即执行

我们的产品已经更新了用户却要第二次进来才能够看到，这样用户体验也太差了吧，有什么方式能够解决呢？好在html5给javascript提供了相关的API。

API篇幅太多自行查看把，这里我晒下我测试成功的code：

<span style="color: #008080;"> 1</span> <span style="color: #008000;">/*</span><span style="color: #008000;">code1,简单粗暴的</span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 2</span> applicationCache.onupdateready = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
</span><span style="color: #008080;"> 3</span> 　　<span style="color: #000000;">applicationCache.swapCache();
</span><span style="color: #008080;"> 4</span> 　　<span style="color: #000000;">location.reload();
</span><span style="color: #008080;"> 5</span> <span style="color: #000000;">};
</span><span style="color: #008080;"> 6</span> <span style="color: #008000;">/*</span><span style="color: #008000;">code2，缓存公用方法</span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 7</span> <span style="color: #008000;">//</span><span style="color: #008000;"> var EventUtil = {</span>
<span style="color: #008080;"> 8</span> <span style="color: #008000;">//</span><span style="color: #008000;"> addHandler: function(element, type, handler) {</span>
<span style="color: #008080;"> 9</span> <span style="color: #008000;">//</span><span style="color: #008000;"> if (element.addEventListener) {</span>
<span style="color: #008080;">10</span> <span style="color: #008000;">//</span><span style="color: #008000;"> element.addEventListener(type, handler, false);</span>
<span style="color: #008080;">11</span> <span style="color: #008000;">//</span><span style="color: #008000;"> } else if (element.attachEvent) {</span>
<span style="color: #008080;">12</span> <span style="color: #008000;">//</span><span style="color: #008000;"> element.attachEvent(“on” + type, handler);</span>
<span style="color: #008080;">13</span> <span style="color: #008000;">//</span><span style="color: #008000;"> } else {</span>
<span style="color: #008080;">14</span> <span style="color: #008000;">//</span><span style="color: #008000;"> element["on" + type] = handler;</span>
<span style="color: #008080;">15</span> <span style="color: #008000;">//</span><span style="color: #008000;"> }</span>
<span style="color: #008080;">16</span> <span style="color: #008000;">//</span><span style="color: #008000;"> }</span>
<span style="color: #008080;">17</span> <span style="color: #008000;">//</span><span style="color: #008000;"> };</span>
<span style="color: #008080;">18</span> <span style="color: #008000;">//</span><span style="color: #008000;"> EventUtil.addHandler(applicationCache, “updateready”, function() { //缓存更新并已下载，要在下次进入页面生效</span>
<span style="color: #008080;">19</span> <span style="color: #008000;">//</span><span style="color: #008000;"> applicationCache.update(); //检查缓存manifest文件是否更新，ps:页面加载默认检查一次。</span>
<span style="color: #008080;">20</span> <span style="color: #008000;">//</span><span style="color: #008000;"> applicationCache.swapCache(); //交换到新的缓存项中，交换了要下次进入页面才生效</span>
<span style="color: #008080;">21</span> <span style="color: #008000;">//</span><span style="color: #008000;"> location.reload(); //重新载入页面</span>
<span style="color: #008080;">22</span> <span style="color: #008000;">//</span><span style="color: #008000;"> });</span>

Copy after login

code1一般用在页面加载时直接触发，而code2的方式可后期检查更新。