HTML5应用缓存(application cache)【HTML5教程 - 第十二篇】

2019-03-18 09:47|来源: 未知

使用HTML5我们可以通过创建一个缓存manifest文件来方便的生成一个离线版的应用。

什么是应用缓存(application cache)?

HTMl5引入了application cache概念。意思是你可以缓存一个web应用,然后在没有互联网的情况下访问它。

主要三个的好处:

  • 离线浏览器 - 用户可以在离线状态下使用应用

  • 速度 - 缓存的资源加载速度很快

  • 减少了服务器负载 - 浏览器只会去服务器下载更新的或者改变了的资源


浏览器支持

iefirefoxchromeoperasafari

除了IE,Firefox,Chrome,Opera和Safari 5都支持这个特性。


HTML5 Cache Manifest 演示

<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
    The content of the document......
</body>
</html>


在线演示


Cache Manifest 基本代码

为了启动应用缓存,你需要在document的html中包含如下属性:

<!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 - 在这个列表标题下的文件如果不能访问时,则指定特定的fallback页面

CACHE MANIFEST

第一行,CACHE MANIFEST要求如下:

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

以上manifest资源文件包含了3个资源,一个CSS文件,一个GIF文件还有一个js文件。当这个manifest文件加载后,浏览器将会从服务器根目录下载3个文件,一旦不能访问互联网,资源仍旧可以被访问。

NETWORK

NETWORK部分指定了文件"login.jsp“将永远不需要缓存,所以离线不可用:

NETWORK:
login.jsp

一个星号可以用表示所有的其它资源或者文件需要一个互联网连接:

NETWORK:
*

FALLBACK

fallback部分指定了offline.html文件将会在无法访问互联网的情况下替代所有的/html5/下的文件 。

FALLBACK:
/html5/ /offline.html

注意:第一个的URI是资源,第二个是fallback


更新缓存

一旦一个应用被缓存,他将保持缓存除非一下情况发生:

  • 用户删除了缓存

  • manifest文件被修改

  • 应用缓存被程序修改

一个演示 - 完成Cache Manifest文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
 
NETWORK:
login.asp
 
FALLBACK:
/html5/ /offline.html

小技巧:以"#"开始的行是注释行,但是可以有其它用处。一个应用的缓存只有在manifest文件修改的时候更新。如果你编辑一个图片或者修改了javascript功能,那些变化是不会被重新缓存的。在注释中更新日期和版本是让浏览器重新缓存你的文件的一个方法。

应用缓存的一些注意问题

缓存时候得注意。

一旦文件被缓存,浏览器将会持续的显示缓存版本内容,即使你修改了服务器文件。为了让浏览器更新缓存,你需要修改manifest文件。

注意:浏览器可以有很多不同大小限制的缓存数据(有些浏览器允许5M的缓存数据)。


本文链接:HTML5教程 - 第十二篇:HTML5应用缓存(application cache),转自:http://www.gbin1.com/tutorials/html5-tutorial/html5-appcache/

相关问答

更多

html5视频教程下载

电驴资源被封,很多资源下载不了;现在的IT教程网很不错,非常多的资源

html5视频教程下载

电驴资源被封,很多资源下载不了;现在的IT教程网很不错,非常多的资源

html5免费教程网盘下载

可以去千峰官网找自己喜欢的下载观看,网盘的不一定是你正好需要的。

html5菜鸟教程零基础好学吗?

以前我们都说会者不难,难者不会,其实不能以偏概全,对于从未接触过html5的小白来说,首先面对的是一门陌生的语言,那么相比其他后端语言,它的门槛相对来讲是比较低的,容易上手,当然,这不意味着我们可以松懈,还是要脚踏实地,练好技术才是根本

html5菜鸟教程零基础好学吗?

以前我们都说会者不难,难者不会,其实不能以偏概全,对于从未接触过html5的小白来说,首先面对的是一门陌生的语言,那么相比其他后端语言,它的门槛相对来讲是比较低的,容易上手,当然,这不意味着我们可以松懈,还是要脚踏实地,练好技术才是根本

相关文章

更多

最近更新

更多