www.91084.com

GVKun编程网logo

HTML5 应用程序缓存（html5应用程序缓存和浏览器缓存区别）

9

在这篇文章中，我们将带领您了解HTML5应用程序缓存的全貌，包括html5应用程序缓存和浏览器缓存区别的相关情况。同时，我们还将为您介绍有关HTML5应用程序缓存、HTML5应用程序缓存_html/c

在这篇文章中，我们将带领您了解HTML5 应用程序缓存的全貌，包括html5应用程序缓存和浏览器缓存区别的相关情况。同时，我们还将为您介绍有关HTML 5 应用程序缓存、HTML 5 应用程序缓存_html/css_WEB-ITnose、HTML 5应用程序缓存使用总结、html5 web应用程序缓存的知识，以帮助您更好地理解这个主题。

本文目录一览：

HTML5 应用程序缓存（html5应用程序缓存和浏览器缓存区别）

HTML5 应用程序缓存（html5应用程序缓存和浏览器缓存区别）

使用应用程序缓存，通过创建 cache manifest 文件，可轻松创建 web 应用的离线版本。

什么是应用程序缓存？ (推荐学习：html教程)

HTML5 引入了应用程序缓存（Application Cache），这意味着可对 web 应用进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们速度 - 已缓存资源加载得更快减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源

浏览器支持

表格中的数字指示完全支持应用程序缓存的首个浏览器版本。

html-1.png

HTML Cache Manifest 实例

下例展示了带有 cache manifest 的 HTML 文档（供离线浏览）：

实例

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

<body>
文档内容 ......
</body>

</html>

HTML 5 应用程序缓存

HTML 5 应用程序缓存

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。

什么是应用程序缓存（Application Cache）？

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

  • 离线浏览 - 用户可在应用离线时使用它们
  • 速度 - 已缓存资源加载得更快
  • 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

浏览器支持

所有主流浏览器均支持应用程序缓存，除了 Internet Explorer。

Manifest 文件

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：

  • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
  • NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

CACHE MANIFEST

第一行，CACHE MANIFEST，是必需的：

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。

# NETWORK 小节规定文件 "login.asp" 永远不会被缓存，且离线时是不可用的

NETWORK:
login.asp

#可以使用星号来指示所有其他资源/文件都需要因特网连接：

NETWORK:
*

# FALLBACK 小节规定如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件：

FALLBACK:
/html5/ /404.html

更新缓存

一旦应用被缓存，它就会保持缓存直到发生下列情况：

  • 用户清空浏览器缓存
  • manifest 文件被修改（参阅下面的提示）
  • 由程序来更新应用缓存
# 实例 - 完整的 Manifest 文件

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

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

重要的提示：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

HTML 5 应用程序缓存_html/css_WEB-ITnose

HTML 5 应用程序缓存_html/css_WEB-ITnose

html 5 应用程序缓存的介绍

http://www.w3school.com.cn/html5/html_5_app_cache.asp


立即学习“前端免费学习笔记（深入）”；

接下来通过实际案例介绍HTML5应用程序缓存的介绍。


立即学习“前端免费学习笔记（深入）”；

一 应用服务器

应用服务器使用tomcat.

在tomcat的web.xml 添加如下配置,因为manifest文件返回时MIME-type必须为 text/cache-manifest

  <mime-mapping>    <extension>appcache</extension>    <mime-type>text/cache-manifest</mime-type>  </mime-mapping>
登录后复制

二 页面

manifest文件default.appcache

缓存staticPage.html,不缓存 * 即所有文件。如果页面不存在或无法连接到网路，跳转到errorPage.html

CACHE MANIFEST              staticPage.html      NETWORK: * FALLBACK:/ errorPage.html
登录后复制


立即学习“前端免费学习笔记（深入）”；

index.html 引入default.appcache 缓存文件

<!DOCTYPE html><html manifest="default.appcache"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body>	this is the index page!</body></html>
登录后复制

staticPage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body>	this is the static page! eee</body></html>
登录后复制

randomPage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body>This is the random page!</body></html>
登录后复制

errorPage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body>	<h1>Error !!!</h1></body></html>
登录后复制

所有以上html及缓存文件(default.appcache)都在同一目录下。

现在让我们看看测试结果如何.

访问 http://localhost:8080/webapp/index.html

结果如下

从控制台上的信息，可知staticPage.html,errorPage.html已被缓存.

停止服务器。

访问 http://localhost:8080/webapp/staticPage.html 正常。缓存起效

访问 http://localhost:8080/webapp/randomPage.html 返回errorPage.html内容。yes，FALLBACK配置起效.

访问 http://localhost:8080/webapp/index.html 正常. no, 这不是我们想要的，因为我们并没有设置这个页面要缓存。 从w3cshcool介绍中可知 每个指定了 manifest 的页面在用户对其访问时都会被缓存。


立即学习“前端免费学习笔记（深入）”；

有如下一个方案针对以上问题。

添加cachePage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html  manifest="default.appcache"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body></body></html>
登录后复制

修改index.html body内添加如下。

<iframe src="cachePage.html"></iframe>
登录后复制

经测试，不可行。


立即学习“前端免费学习笔记（深入）”；

summary:

如果应用有A,B,C,D 页面。

A 页面中引入了一个manifest文件，该manifest文件，缓存B文件，C文件作为错误页面。

当请求A页面是，浏览器会缓存A，B,C页面，及manifest文件。

如果A、B、C页面有跟新,要刷新文件，就对服务器端的manifest文件做任意修改(或者删除服务器端的manifest文件, 如果这样当用户访问任意缓存页面时，浏览器会尝试同步manifest文件，发现文件不存在，然后删除所有客户端缓存)。


立即学习“前端免费学习笔记（深入）”；

每次访问A，B，C(缓存页面)，浏览器都会对manifest文件做一次同步。

访问非缓存的文件，则manifest文件不会同步。


也就是说，每次访问缓存文件，浏览器会去同步manifest文件,

如果manifest文件有跟新，则刷新缓存文件列表(更新缓存文件、删除缓存文件、添加缓存文件)。

然后再次访问缓存文件时就可以看到更新的内容了。


立即学习“前端免费学习笔记（深入）”；

以上都在chrome版本41.0.2272.118做测试。 


立即学习“前端免费学习笔记（深入）”；


立即学习“前端免费学习笔记（深入）”；


立即学习“前端免费学习笔记（深入）”；

HTML 5应用程序缓存使用总结

HTML 5应用程序缓存使用总结

      近期接触了HTML5本地缓存，在HTML页面的html标签加入后缀为.appcache的文件，即可以轻松地创建 web 应用的离线版本。

使用本地缓存带来的好处：

  • 离线浏览 - 用户可在应用离线时使用它们

  • 速度 - 已缓存资源加载得更快

  • 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

浏览器支持：

所有主流浏览器均支持应用程序缓存，除了 IE

HTML5 Cache Manifest 实例

下面的例子展示了带有 cache manifest 的 HTML 文档（供离线浏览）：

HTML页面

987.jpg

demo.appcache文件

988.jpg

Cache Manifest 基础

如需启用应用程序缓存，请在文档的 标签中包含 manifest 属性：

<!DOCTYPE HTML><html manifest="demo.appcache">...</html>
登录后复制

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。

manifest 文件的建议的文件扩展名是：".appcache"。

请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。

Manifest 文件

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：

  • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

    立即学习“前端免费学习笔记（深入）”；

  • NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

Manifest 使用总结：

  • HTML页面添加.appcache的文件后，PC端和手机端浏览器都可离线缓存文件

  • 添加了.appcache的页面本身也会被缓存

  • 如果修改时间戳文件，而没有修改.appcache的文件，则不可以更新浏览器缓存文件

  • HTML页面引入.appcache的文件后，只有修改.appcache的文件，才能更新缓存文件

989.jpg

有了 .appcache文件后，HTML时间戳文件是否失去了它原来的意义呢？

      也许当IE的低版本去见马克思后，当所有浏览器都支持HTML5应用程序缓存后，HTML时间戳文件才可能退休，至少在目前，还是离不开平凡更新的时间戳文件。而使用.appcache文件来更新浏览器缓存，目前主要应用在移动终端。

以上就是HTML 5应用程序缓存使用总结的内容。

html5 web应用程序缓存

html5 web应用程序缓存

话说到web应用程序缓存，这个东西，我觉得挺有用的。以前，个人看到网页版的美图秀秀，而自己的电脑本地也安装了美图秀秀，就觉得这两者没必要在网页版上也实现吧。不过，后来觉得，还是网页版的方便多了，因为不需要自己安装程序啊，至少自己的电脑里面不会因多一个应用程序，而很乱。但是，又苦恼于web版的美图秀秀，不管是在没有网络的日子呢，还是在像乌龟般慢吞吞的校园中，都不能使用，又觉得还是本地电脑上的应用方便。于是乎，一直在猜想着，能不能有基于web的应用程序，既需要安装应用程序，又不依赖于网络的，那该有多好啊~
   这不，最近看到一个概念，web离线应用，真是完美诠释了我想要说的了，很有兴趣的，就可是了这个话题的旅行了。
    <!doctype html>
<html manifest="demo.appcache">
<!--<html manifest="/.../demo_html.appcache">使用这个，加载应用程序的web缓存.使用manifest这个属性的页面，会在用户对其进行访问的时候，都会自动缓存为.appcache文件。其中，有一点非常重要的是，manifest文件需要正确配置MIME-type，即“text/cahe-manifest”，必须在web服务器上进行配置才行。
完整的manifest文件例子：
CACHE MANIFEST
#2012-02-21 v1.0.0(这个注释行)
/theme.css
/logo.gif
/main.js

NETWORK
login.asp
FALLBACK
/html5/404.html
manifest文件分为三部分：
CACHE MANIFEST——在此标题下列出的文件将在首次下载后进行缓存(包含/theme.css,/logo.gif,/main.js，这就是为什么，在下面那个页面一个简单的js代码也要使用js加载，这样是为了达到在缓存中的下载与加载使用。当manifest文件加载之后，浏览器就会从网站的根目录下载这三个文件，所以，无论用户何时与因特网断开连接，这些资源依然是可用的)
NETWORK——在此标题下列出的文件需要与服务器的链接，且不会被缓存(login.asp，在此目录下标识的，则表明该文件永远都不会被缓存，同时离线时事不可用的。也可以使用*来表示，其他的所有资源都需要网络连接)
FALLBACK——在此标题下列出的文件规定当页面无法访问时的回退页面(这个目录，表示如果无法建立因特网连接的话，则用404.html替代目录下的所有文件，这个就是我们经常所见的一个错误网页)
-->
<head>
<Meta charset="utf-8">
<title>HTML5应用程序缓存</title>
</head>
<!--HTML5，可以创建cache manifest文件，来创建一个web应用的离线版本(web应用的理离线版本，通俗的来说，就是一个应用程序在基于浏览器的同时，不需要安装客户端程序的同时，也不依赖于网络，就可以通过浏览器打开一个应用。举例子说明，比如office程序吧，我们在自己电脑上安装了office的桌面版本，安装也比较麻烦的。同时，我们也发现，网络上有office的在线版本的，可以在线同样适用office工具。但是，我们发现，这样的在线office工具是需要联网才能获取到服务的，而web应用程序的离线化，其实就是，同时免去了安装本地office的同时，又不需要联网，就可以基于浏览器打开一个web应用。这就不可避免的，需要通过浏览器，在我们本地电脑上存放一些web应用的缓存了，然后就可以在没有英特网的时候进行访问。)
web应用程序缓存的优势：所有浏览器均支持应用程序缓存，除了IE
1.离线浏览——用户可在应用离线时使用它们
2.速度——已缓存资源加载得更快
3.减少服务器负载——浏览器将只从服务器下载更新/更改过得资源。-->
<body>
<script type="text/javascript">
function getDateTime()//该函数照例子来说，是放在demo_time.js文件里，然后再<script>那里进行src加载的
{
var d=new Date();
document.getElementByIdx_x("timePara").innerHTML=d;
}
</script>
<!--关于缓存的生命周期：
web应用一旦被缓存，就会一直存在，除非：
1.用户清空浏览器缓存
2.manifest文件被修改
3.由程序来更新应用缓存-->
<p id="timePara"><button onClick="getDateTime()">获取日期和事件</button></p>
<p>请打开<a href="html5_html5_manifest.html" target="_blank">这个页面</a>，然后脱机浏览页面，页面中的脚本和图像依然可用</p>
<!--在这里，应该是加载了<html manifest="..appcache">这里的缓存文件，才得以执行的，由于本人不会构造什么.appcache文件，也没有这样的文件，所以做不了测试-->
</body>
</html>

关于HTML5 应用程序缓存和html5应用程序缓存和浏览器缓存区别的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于HTML 5 应用程序缓存、HTML 5 应用程序缓存_html/css_WEB-ITnose、HTML 5应用程序缓存使用总结、html5 web应用程序缓存的相关知识，请在本站寻找。

本文标签：

上一篇HTML5 浏览器支持（html5浏览器支持情况）

下一篇在HTML页面中引入外部HTML文件的解决方案（怎么在html中引入外部js）

相关文章