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/

相关问答

更多

ordonate分页codeigniter(ordonate pagination codeigniter)

$config['use_page_numbers'] = TRUE; 默认情况下,URI段将使用您要分页的项的起始索引。 如果您希望显示实际页码,请将其设置为TRUE。 文件 。 $config['use_page_numbers'] = TRUE; By default, the URI segment will use the starting index for the items you are paginating. If you prefer to show the the a

如何以编程方式对齐按钮左侧的图像视图?(how do i align image view left of button programically?)

LinearLayout li=new LinearLayout(this); li.setOrientation(LinearLayout.HORIZONTAL); final Button b1 = new Button(MainActivity1.this); final ImageView imageView = new ImageView(MainActivity1.this); b1.setText(reqdata[i].getSpinn

如果文本匹配子元素中的任何文本,请将类添加到此子级?(If text match any text in a child element, add class to this child?)

您还可以使用addClass回调 $('.class2').addClass(function() { return $(this).text() === $('.class1').text() && 'current'; }); .current { color: red; } <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li><a

DirectX 11:编码的顶点着色器大小与指定的大小不匹配(DirectX 11: Encoded Vertex Shader size doesn't match specified size)

我想到了。 着色器中的入口点不正确。 fxc命令编译了我的着色器,没有错误或警告,但是我的着色器没有正确定义入口点。 奇怪的。 这就是字节码只有大约200字节的原因。 也就是说,我的着色器很简单,一个传递,我可以相信它是200字节。 它更像是15k编译。 一个简短的HLSL程序(1061字节的源代码)如何爆炸到15k字节代码真的很奇怪。 I figured it out. The entry point was not right in the shader. The fxc command c

使用chrome应用jQuery动画时出现意外的抖动效果(Unintended shaking effect while applying jQuery animate with chrome)

我发布的代码现在工作正常。 似乎所有浏览器都修复了这些错误。 The code I posted is working fine now. It seems all browsers fixed the bugs.

相关文章

更多

最近更新

更多