★★【页面离线】离线缓存技术★★★ 测试成功

一. 离线网络应用程序基础

离线网络应用程序的核心是一个 content type (内容类型) 为 cache-manifest 的文本文件。这个文件保存了应用程序中需要离线存储的文件（HTML, CSS, JavaScript, 图片等）。举一个简单的例子，若一个应用程序由以下文件组成：

  • index.html
  • demo.css
  • demo.js
  • logo.png

index.html 为主页，其他文件是主页中引用的资源，如果我们需要离线缓存这个应用程序，需要在 index.html 的同级目录下增加一个 manifest 文件，并命名为 .manifest 后缀文件，而文件中的内容可以这样编写：

1
2
3
4
5
CACHE MANIFEST
./index.html
./demo.css
./demo.js
./logo.png

可以看出，以上文件的路径是相对路径，这里是相对于 manifest 文件而言的。当然，你也可以使用绝对路径，这并不影响 manifest 的使用。

manifest 文件的编写很简单，但启用离线缓存还需一些步骤。首先是需要把 manifest 文件和应用程序关联起来，即把页面指向缓存名单，方法是为 html 标签指定 manifest 值，例如：

1
<html manifest="demo.manifest">

其中 demo.manifest 是例子中编写的 manifest 列表文件。

小提示：若应用程序中有多个页面，则每个页面都需要与 manifest 关联起来。

接着，开发者必须给 manifest 文件指定 text/cache-manifest 内容类型，这样浏览器才能识别它。关于具体的方法，如果你的服务器支持 .htaccess ，可以在 .htaccess 中写入以下语句：

1
AddType text/cache-manifest .manifest

这样做可以把 text/cache-manifest 的 MIME 类型和 .manifest 文件关联起来。当然，可能开发者并没有 .htaccess 的编写权限，但实际上，开发者可以使用另外一些更实用的方法达到目的。因为在实际的项目开发中，应用程序中的文件数量不会只像上例中仅有的 4 个，如果有很多的文件需要缓存，每个文件都需要手动写入 manifest 文件实在比较费时，更麻烦的是，每次改动这些文件都必须相应地改动 manifest 文件，因此 Kayo 更加建议开发者使用后台脚本直接获取需要缓存的文件并写入一个 manifest 列表，Kayo 熟悉的后台脚本是 PHP ，在 PHP 中，可以直接在代码中设置 MIME 类型，这样就不需要配置 Web 服务来完成对 manifest 的支持了。至于具体如何使用 PHP 编写 manifest ，会在下面详细介绍。

二. 浏览器支持

关于离线网络应用程序在现代浏览器中都已经实现完整的支持，IE 则完全不支持。具体如下：

Chrome 4+ , Firefox 3.5+ , Safari 4+ 和 Opera 10.6+

三. 白名单

默认情况下，开发者会为应用程序中所有文件指定缓存，但实际上，仍有一些资源可能需要强制取消缓存，即必须访问网络资源，离线时该资源不可用。为元 素强制取消缓存可以在 manifest 文件中使用关键字 NETWORK: 。在 NETWORK: 关键字下添加文件的列表，这些文件会强制取消缓存，而这个文件列表就称为白名单 (Whitelist) 。实际上，对于需要缓存的资源也是有关键字的，这个关键字是 EXPLICIT: ，但所有资源列表的开头如果没有添加关键字，默认都会被认为在 EXPLICIT: 关键字的列表下，因此需要缓存的资源列表开头可以忽略不写关键字（如上例）。

例如，对上例进行扩展，把 logo.png 添加到白名单，可以这样编写 manifest 文件。

1
2
3
4
5
6
7
CACHE MANIFEST
./index.html
./demo.css
./demo.js
 
NETWORK:
./logo.png

四. 备选名单

备选名单是对于白名单的补充，在白名单中，没有联网时，资源不能加载，这样会导致页面出现错误，如上例中，"logo.png" 被设置为白名单，如果用户离线浏览该应用程序，会出现一个损坏的图片链接，为了避免这种情况，可以使用 FALLBACK: 指定一个备选名单，备选名单中需要为一个资源准备两个文件，若能正常联网，会引用第一个文件，离线时则引用第二个文件，关于这个特点，有一个很实用的应用 —— 表明程序是离线工作还是联网工作，在不同的状态下引用不同的图片即可方便地表明状态。接下来 Kayo 继续扩展上例，为 logo.png 指定一个离线时的替换图片 backup.png 。

1
2
3
4
5
6
7
CACHE MANIFEST
./index.html
./demo.css
./demo.js
 
FALLBACK:
./logo.png ./backup.png

 

 

 

 

demo.manifest              //需要缓存的东西要全部列出

CACHE MANIFEST
./index.html
./css/style.css
./css/swiper.css

./js/fengxiang.js
./js/home.js
./js/iscrollzoom.min.js
./js/jquery.min.js
./js/public.js
./js/swiper.js



./images/home/sy_back.jpg
./images/home/word.png
./images/home/btn0.png
./images/home/btn1.png
./images/home/btn2.png
./images/home/btn3.png
./images/home/btn4.png


NETWORK:
./images/home/btn5.png


FALLBACK:
./logo.png ./backup.png
.htaccess

AddType text/cache-manifest .manifest
<!DOCTYPE html>
<html manifest="demo.manifest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>嵊泗花鸟岛</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
sf
</body>
</html>

 

posted @ 2014-08-26 14:26  Shimily  阅读(278)  评论(0)    收藏  举报