您的位置：首页 > Web前端 > HTML5

HTML5 应用程序缓存

2016-06-14 19:42 375 查看
通过创建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函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html5 应用程序缓存
相关文章推荐
新的分享
章节导航