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 文件,那不是要死人了么?当然也有自动化啦!

gulp-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的效果。

上一篇:[Falcor] Return the data from server


下一篇:Java 中多条件排序