HTML5 应用程序缓存

通过创建cache manifest文件,可以轻松的创建web应用的离线版本。(web应用可进行缓存,并可在没有因特网连接时进行访问)
优势:
1.离线浏览–用户可在应用离线时使用它们
2.速度–已缓存资源加载的更快
3.减少服务器负载–浏览器只从服务器下载更新过或者更改过的资源
1.Cache Manifest基础
如果需要用应用程序缓存,在文档<html>标签中包含manifest属性

<!DCOTYPE HTML>
<html manifest="demo.appcache">
...
</html>

每个指定了manifest的页面在用户对其访问时都会被缓存。如果未指定manifest属性,则页面不会被缓存。
manifest文件的建议文件扩展名是:“.appcache”
2.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.php”永远不会被缓存,且离线时是不可以用的。

NETWORK;
login.php

可以用*指示所有其他资源或文件都需要因特网的连接

NETWORK
*

FALLBACK
如果无法建立因特网连接,则用”offline.html”替代/html5/目录中的所有文件

FALLBACK
/html/  /offline.html

第一个URI是资源,第二个是替补。
3.更新缓存
一旦应用被缓存,它就会保持缓存知道发生下列情况:
用户清空浏览器缓存
manifest文件被修改
由程序来更新应用缓存
一个完整的manifest文件

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

NETWORK:
login.php

FALLBACK:
/html/ /offline.html

应用缓存会在其manifest文件更改时被更新。如果编辑了一幅图片,或者修改了一个javascript函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值