使用html5的离线缓存技术
突然想用html5的离线缓存，但是一直没有成功，在各种群里问发现很多人都没什么经验，最终终于在各种论坛找到解决方案了。下面就简单记录一下相关情况。
一、离线缓存的优点
我们都知道离线缓存主要是用来减少web应用对网络的依赖的，也就是说让你能偶在没网的情况下也能使用（当然是某些功能）。初看有点像传统的缓存，但是还是有很大不同的，首先离线缓存可以缓存整个应用，而普通的则是缓存单个界面；离线缓存的更新更加方便，可以动态通知，而传统缓存则是通过返回状态码来判断更新的；离线缓存还可以指定有网和没网分别加载什么文件，这点传统的缓存则做不到。
二、基本使用
离线网络应用程序的核心是一个 content type (内容类型) 为 cache-manifest 的文本文件。这个文件保存了应用程序中需要离线存储的文件（HTML, CSS, JavaScript, 图片等）。举一个简单的例子
CACHE MANIFEST./index.html./demo.css./demo.js./logo.png- 首行必须是 CACHE MANIFEST。
- 其后，每一行列出一个需要缓存的资源文件名。
- 可根据需要列出在线访问的白名单。白名单中的所有资源不会被缓存，在使用时将直接在线访问。声明白名单使用 NETWORK：标识符。
- 如果在白名单后还要补充需要缓存的资源，可以使用 CACHE：标识符。
- 如果要声明某 URI 不能访问时的替补 URI，可以使用 FALLBACK：标识符。其后的每一行包含两个 URI，当第一个 URI 不可访问时，浏览器将尝试使用第二个 URI。
- 注释要另起一行，以 # 号开头
然后我们需要在每个网页中加入
<html manifest="xxx.manifest">
三、服务器的配置
如果你认为现在你的工作就完成了，那你就错了，其实主要还是服务器的配置问题，不同的服务器有不同的方法。我使用的是apache。配制方法是在conf/mime.types加入一段代码：
test/cache-manifest manifest
然后你就可以使用html5强大的离线缓存功能了
四、更新问题
貌似是有各种更新的方法，不过我最喜欢的还是最简单的一种，也就是在manifest文件中加入一行版本号，这样更新的时候就直接更新了。
五、限制
目前的关于大小的限制如下：
- Safari桌面浏览器(Mac以及 Windows)没有限制
- Mobile Safari限制为10MB
- Chrome限制为5MB
- Android浏览器对应用程序缓存大小没有限制
- Firefox桌面版有无限的应用程序缓存大小
- Opera的应用程序缓存大小可以由用户管理，但有一个默认大小50M
可以使用这个网站来检验你的manifest文件是否正确
六、怎样查看离线缓存
chrome： chrome://appcache-internals
firefox： about:cache
使用html5的离线缓存技术的更多相关文章
- HTML5 manifest离线缓存技术
干什么用的? 离线缓存为的是第一次请求后,根据manifest文件进行本地缓存,并且在下一次请求后进行展示(若有缓存的话,无需再次进行请求而是直接调用缓存),最根本的感觉是它使得WEB从online可 ...
- H5离线缓存技术Application Cache
H5离线缓存技术Application Cache 1.离线缓存技术:是浏览器本身的一种机制 HTML5引入Application Cache(应用程序缓存)技术,离线存储可以将站点的一些文件存储在本 ...
- HTML5新特性之离线缓存技术
一.离线缓存的起因. HTML5之前的网页,都是无连接,必须联网才能访问,这其实也是web的特色,这其实对于PC是时代问题并不大,但到了移动互联网时代, 设备终端位置不再固定,依赖无线信号,网络的可靠 ...
- HTML5 manifest离线缓存
一.基本概念 离线缓存是HTML5新引入的技术,能够让你的Web应用程序指定哪些文件可以缓存在本地,使得你的网络断开时依然可以通过本地的缓存来进行访问浏览. 二.使用方法 1. MIME type 声 ...
- H5离线缓存技术
HTML5提供了很多新的功能以及相应的接口,离线存储就是其中的一个,离线存储可以将站点的一些文件存储在本地,在没有网络的时候还是可以访问到以缓存的对应的站点页面,其中这些文件可以包括html,js ...
- android离线缓存技术
离线缓存是指在有网络的状态下将从服务器获取的网络数据,如Json 数据缓存到本地,在断网的状态下启动APP时读取本地缓存数据显示在界面上,常用的APP(网易新闻.知乎等等)都是支持离线缓存的,这样带来 ...
- html5 manifest 离线缓存知识点
1.最大缓存容量为 5M. 2.manifest文件需要配置正确的MIME-type,即“text/cache-manifest”,这个是在web服务器上进行配置. ②编写.manifest文件,文件 ...
- html5的离线缓存
一个离线网络应用程序就是一个URL的列表,html,css,js,图片,或者其他类型的资源. 把这些资源,在本地缓存下来,当你尝试在没有网络连接时访问网络应用程序,你的浏览器将自动切换并使用本地代替. ...
- HTML5 离线缓存管理库
一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...
随机推荐
- powerdesigner反向
1.Could not initial JVM不能初始化 :要求安装32位的JDK,把path指向32的安装目录 2.Non SQL Error : Could not load class orac ...
- C#之键值对
1.初始化一个键值对 //初始化定义一个键值对,注意最后的括号 Dictionary<int, string> dic = new Dictionary<int, string> ...
- centos7 安装mysql5.7.11注意事项
centos7通过yum install mysql默认安装的是mariadb.至于为什么默认安装mariadb以及mariadb和mysql的区别,网上有很多说明.这里不再阐述,下面介绍下怎么另行下 ...
- CEF3开发者系列之进程间消息传递
在使用CEF3作为框架开发过程中,实现WebSockets.XMLHttpRequest.JS与本地客户端交互等功能时,需要在渲染(Render)进程和浏览(Browser)进程中传递消息.CEF3在 ...
- 使用Java中的IO流，把A文件里的内容输入到B文件中
我们先创建两个文本文件,out.txt和in.txt,在out.txt中输入"Hello World",然后使用FileInputStream把字符串读取出来,再使用FileOut ...
- apache的httpd.conf翻译
# This is the main Apache HTTP server configuration file. It contains the 这是Apache HTTP Server的主配置文件 ...
- 自定义ToolBar之一
其实已经有很多大神写过这方面的文章了,不过我比较蠢吧,老有一些地方看不懂的,翻了很多关于Toolbar方面的文章和视频,这儿总结一下. 参考资料:youtube:slidenerd 阶段一 自定义配 ...
- 【编程题目】如何对n个数进行排序，要求时间复杂度O(n)，空间复杂度O(1)
转自:http://blog.csdn.net/vast_sea/article/details/8167968 看上去似乎任何已知的算法都无法做到,如果谁做到了,那么所有的排序方法:QuickSor ...
- 【linux】nohup运行守护进程
来源:http://www.cnblogs.com/allenblogs/archive/2011/05/19/2051136.html nohup 命令 用途:不挂断地运行命令. 语法:nohup ...
- swift选择类或结构体
按照通用的准则,当符合一条或多条以下条件时,请考虑构建结构体: 结构体的主要目的是用来封装少量相关简单数据值. 有理由预计一个结构体实例在赋值或传递时,封装的数据将会被拷贝而不是被引用. ? 任何在结 ...