h5应用缓存及收藏时Icon显示
h5应用实现离线缓存，加载后，断网仍然可以继续使用。
一、需求
转行做h5，目前做赛道游戏，动手做了个赛道编辑器web版的，由于web版需要开启服务器才能使用，策划要想回家使用就要发布到外网服务器了，特麻烦了。
h5 cache manifest 文件完美解决我的需求，让策划回家也能使用。
二、原理
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
- 离线浏览 - 用户可在应用离线时使用它们。
- 速度 - 已缓存资源加载得更快。
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
所有主流浏览器均支持应用程序缓存，除了 Internet Explorer。某些浏览器的支持的大小不一定，不过肯定都超过5M了。
三、实现
嵌入
在网站的index.html头部嵌入 cache manifest 文件：
<!DOCTYPE HTML>
<html manifest="app.manifest">
<head>
<meta charset="utf-8">
<title>Game</title>
……
</head>
</html>
cache manifest 文件加上后，浏览器会去根据文件内的标记，去服务器请求资源，如果无法连接服务器，将直接使用本地文件缓存。如果服务器的cache manifest 文件有变更，则浏览器会重新请求所有的资源。
Manifest文件
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
更新缓存
一旦应用被缓存，它就会保持缓存直到发生下列情况：
- 用户清空浏览器缓存
- manifest 文件被修改，一般我会设置一个版本号、及生成时间来实现重新更新。
- 由程序来更新应用缓存
一旦被缓存后，除非修改manifest文件，否则不会重新更新，即使已经修改了服务器上的其他资源。
栗子
与 index.html 同级的 app.manifest 文件
CACHE MANIFEST
# Time: Fri May 27 2016 19:44:17 GMT+0800 (中国标准时间)
CACHE:
index.html
main.min.js
resource/default.res.json
resource/default.thm.json
resource/favicon.ico
NETWORK:
*
SETTINGS:
prefer-online
# hash: 2b6fc415e3a2ce3122fab5e1deb79f87474807bf0eb2d77d1875f6858675a1de
四、自动化Manifest
人类都是在进步的哈，手动一个一个文件加入 manifest 文件，那不是要死人了么？当然也有自动化啦！
下面内容在我的github上ManifestTool
要想使用上面的工具，首先要安装 nodejs。
然后在当前目录下安装依赖包：
npm install
安装成功后，在当前目录下查看版本：
gulp -v
[10:11:00] CLI version 3.9.0
[10:11:00] Local version 3.9.1
把项目放入public文件夹内，并执行 命令：
win 下执行 build.bat
mac 下在当前目录下执行 gulp build ，如下
[10:08:33] Using gulpfile ~/Documents/GitClonePro/ManifestTool/gulpfile.js
[10:08:34] Starting 'build'...
[10:08:34] Finished 'build' after 6.92 ms
成功后会在public目录内生成一个 app.manifest文件。
在项目的index.html头部引用此文件，如下：
<!DOCTYPE HTML>
<html manifest="app.manifest">
<head>
<meta charset="utf-8">
<title>Game</title>
……
</head>
</html>
完成，直接把 public 内所有文件直接拷贝到自己的web服务器上即可。
快去尝试一下吧。
五、进阶美化
上面完成的只是让策划能离线使用，但是这还不够美，要能收藏到本地桌面才好，要能在桌面显示自定义icon才好。
ok，下面实现在iphone的Safari上实现。
<!-- Standard iPhone -->
<link rel="apple-touch-icon" sizes="57x57" href="./resource/touch-icon-iphone-114.png" />
<!-- Retina iPhone -->
<link rel="apple-touch-icon" sizes="114x114" href="./resource/touch-icon-iphone-114.png" />
<!-- Standard iPad -->
<link rel="apple-touch-icon" sizes="72x72" href="./resource/touch-icon-iphone-144.png" />
<!-- Retina iPad -->
<link rel="apple-touch-icon" sizes="144x144" href="./resource/touch-icon-iphone-144.png" />
制作两个icon图片，尺寸为 114X114 和 144X144，网上一堆工具可以转换。
把上面的标签嵌入index.html中
<!DOCTYPE HTML>
<html manifest="app.manifest">
<head>
<meta charset="utf-8">
<title>Game</title>
<!-- Standard iPhone -->
<link rel="apple-touch-icon" sizes="57x57" href="./resource/touch-icon-iphone-114.png" />
<!-- Retina iPhone -->
<link rel="apple-touch-icon" sizes="114x114" href="./resource/touch-icon-iphone-114.png" />
<!-- Standard iPad -->
<link rel="apple-touch-icon" sizes="72x72" href="./resource/touch-icon-iphone-144.png" />
<!-- Retina iPad -->
<link rel="apple-touch-icon" sizes="144x144" href="./resource/touch-icon-iphone-144.png" />
</head>
</html>
通过手机打开web，点击加入书签，你会发现多了icon 显示，选择收藏到桌面，会在桌面生成一个icon，直接点击这个icon可以直接体验原生app的效果。
