h5应用缓存及收藏时Icon显示

2022-09-01 21:04:54

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

码农公寓