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

h5应用缓存及收藏时Icon显示的更多相关文章

  1. H5的缓存 manifest

    H5里面的App Cache是由开发Web页面的开发者控制的,而不是由Native去控制的,但是Native里面的WebView也需要我们做一下设置才能支持H5的这个特性. 1.工作原理 写Web页面 ...

  2. 如何实现Selenium自动化读取H5手机缓存

    更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 原文链接:http://www.cnblogs.com/zishi/p/6890675.html 前言: 由于Se ...

  3. 自动化测试系列:如何实现Selenium自动化读取H5手机缓存

    更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 原文链接:http://www.cnblogs.com/zishi/p/6890675.html 前言: 由于Se ...

  4. H5离线缓存技术Application Cache

    H5离线缓存技术Application Cache 1.离线缓存技术:是浏览器本身的一种机制 HTML5引入Application Cache(应用程序缓存)技术,离线存储可以将站点的一些文件存储在本 ...

  5. Atitit.播放系统规划新版本 and 最近版本回顾 v3  pbf.doc  1 版本11 (ing)41.1 规划h5本地缓存系列 41.2 Android版本app41.3 双类别系统,

    Atitit.播放系统规划新版本 and 最近版本回顾 v3  pbf.doc 1 版本11 (ing)4 1.1 规划h5本地缓存系列 4 1.2 Android版本app4 1.3 双类别系统, ...

  6. 【SSH网上商城项目实战16】Hibernate的二级缓存处理首页的热门显示

    转自:https://blog.csdn.net/eson_15/article/details/51405911 网上商城首页都有热门商品,那么这些商品的点击率是很高的,当用户点击某个热门商品后需要 ...

  7. h5 离线缓存小demo

    传统的web应用是在线应用,这其实也是web的特色,对于PC时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得更低.比如:在火车上,穿山越岭进隧道,便无法访问w ...

  8. h5的缓存机制

    H5的缓存,大概有localstorage.sessionstorage.cookie和manifest. 一.LocalStorage LocalStorage是永久性的本地缓存,存储在客户端的浏览 ...

  9. H5 离线缓存的用法

    H5离线缓存基础系列   1.什么是离线缓存 离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 2. ...

随机推荐

  1. 01.SQLServer性能优化之---水平分库扩展

    汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 第一次引入文件组的概念:http://www.cnblogs.com/dunitian/ ...

  2. const,static,extern 简介

    const,static,extern 简介 一.const与宏的区别: const简介:之前常用的字符串常量,一般是抽成宏,但是苹果不推荐我们抽成宏,推荐我们使用const常量. 执行时刻:宏是预编 ...

  3. Python标准模块--ContextManager

    1 模块简介 在数年前,Python 2.5 加入了一个非常特殊的关键字,就是with.with语句允许开发者创建上下文管理器.什么是上下文管理器?上下文管理器就是允许你可以自动地开始和结束一些事情. ...

  4. nodejs模块发布及命令行程序开发

    前置技能 npm工具为nodejs提供了一个模块和管理程序模块依赖的机制,当我们希望把模块贡献出去给他人使用时,可以把我们的程序发布到npm提供的公共仓库中,为了方便模块的管理,npm规定要使用一个叫 ...

  5. php报错 ----> Call to undefined function imagecreatetruecolor()

    刚才在写验证码的时候,发现报错,然后排查分析了一下,原来是所用的php版本(PHP/5.3.13)没有开启此扩展功能. 进入php.ini 找到extension=php_gd2.dll ,将其前面的 ...

  6. spring boot 实战:我们的第一款开源软件

    在信息爆炸时代,如何避免持续性信息过剩,使自己变得专注而不是被纷繁的信息所累?每天会看到各种各样的新闻,各种新潮的技术层出不穷,如何筛选出自己所关心的? 各位看官会想,我们是来看开源软件的,你给我扯什 ...

  7. WebApi基于Token和签名的验证

    最近一段时间在学习WebApi,涉及到验证部分的一些知识觉得自己并不是太懂,所以来博客园看了几篇博文,发现一篇讲的特别好的,读了几遍茅塞顿开(都闪开,我要装逼了),刚开始读有些地方不理解,所以想了很久 ...

  8. 使用Microsoft的IoC框架:Unity来对.NET应用进行解耦

    1.IoC/DI简介 IoC 即 Inversion of Control,DI 即 Dependency Injection,前一个中文含义为控制反转,后一个译为依赖注入,可以理解成一种编程模式,详 ...

  9. JavaScript作用域

    JavaScript作用域 JavaScript作用域一直是前端开发的难题,现在只要用五句话就可解决. 一.“JavaScript中无块级作用域” 在Java或C#中存在块级作用域,即:大括号也是一个 ...

  10. document.compatMode

    在我电脑屏幕上显示的 电脑是 1920*1080这是在document.compatMode:css1Compat模式 window.screen.availWidth 1920 window.scr ...