突然想用html5的离线缓存，但是一直没有成功，在各种群里问发现很多人都没什么经验，最终终于在各种论坛找到解决方案了。下面就简单记录一下相关情况。

一、离线缓存的优点

我们都知道离线缓存主要是用来减少web应用对网络的依赖的，也就是说让你能偶在没网的情况下也能使用（当然是某些功能）。初看有点像传统的缓存，但是还是有很大不同的，首先离线缓存可以缓存整个应用，而普通的则是缓存单个界面；离线缓存的更新更加方便，可以动态通知，而传统缓存则是通过返回状态码来判断更新的；离线缓存还可以指定有网和没网分别加载什么文件，这点传统的缓存则做不到。

二、基本使用

离线网络应用程序的核心是一个 content type (内容类型) 为 cache-manifest 的文本文件。这个文件保存了应用程序中需要离线存储的文件（HTML, CSS, JavaScript, 图片等）。举一个简单的例子

CACHE MANIFEST
./index.html
./demo.css
./demo.js
./logo.png
这里定义的就是一个manifest文件，这个文件同其他文件放在相同的文件夹下，第一行类似是文件类型定义，它必须是写这个，然后下面定义了需要缓存的文件。当然虽然这里没有写manifest文件，但它默认是进行缓存的。
从别处摘了一份书写规范：
  1. 首行必须是 CACHE MANIFEST。
  2. 其后，每一行列出一个需要缓存的资源文件名。
  3. 可根据需要列出在线访问的白名单。白名单中的所有资源不会被缓存，在使用时将直接在线访问。声明白名单使用 NETWORK：标识符。
  4. 如果在白名单后还要补充需要缓存的资源，可以使用 CACHE：标识符。
  5. 如果要声明某 URI 不能访问时的替补 URI，可以使用 FALLBACK：标识符。其后的每一行包含两个 URI，当第一个 URI 不可访问时，浏览器将尝试使用第二个 URI。
  6. 注释要另起一行，以 # 号开头

然后我们需要在每个网页中加入

<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的离线缓存技术的更多相关文章
	

    
								
  1. HTML5 manifest离线缓存技术
		
    干什么用的? 离线缓存为的是第一次请求后,根据manifest文件进行本地缓存,并且在下一次请求后进行展示(若有缓存的话,无需再次进行请求而是直接调用缓存),最根本的感觉是它使得WEB从online可 ...
    
		
    2. 
						
  2. H5离线缓存技术Application Cache
		
    H5离线缓存技术Application Cache 1.离线缓存技术:是浏览器本身的一种机制 HTML5引入Application Cache(应用程序缓存)技术,离线存储可以将站点的一些文件存储在本 ...
    
		
    3. 
						
  3. HTML5新特性之离线缓存技术
		
    一.离线缓存的起因. HTML5之前的网页,都是无连接,必须联网才能访问,这其实也是web的特色,这其实对于PC是时代问题并不大,但到了移动互联网时代, 设备终端位置不再固定,依赖无线信号,网络的可靠 ...
    
		
    4. 
						
  4. HTML5 manifest离线缓存
		
    一.基本概念 离线缓存是HTML5新引入的技术,能够让你的Web应用程序指定哪些文件可以缓存在本地,使得你的网络断开时依然可以通过本地的缓存来进行访问浏览. 二.使用方法 1. MIME type 声 ...
    
		
    5. 
						
  5. H5离线缓存技术
		
      HTML5提供了很多新的功能以及相应的接口,离线存储就是其中的一个,离线存储可以将站点的一些文件存储在本地,在没有网络的时候还是可以访问到以缓存的对应的站点页面,其中这些文件可以包括html,js ...
    
		
    6. 
						
  6. android离线缓存技术
		
    离线缓存是指在有网络的状态下将从服务器获取的网络数据,如Json 数据缓存到本地,在断网的状态下启动APP时读取本地缓存数据显示在界面上,常用的APP(网易新闻.知乎等等)都是支持离线缓存的,这样带来 ...
    
		
    7. 
						
  7. html5 manifest 离线缓存知识点
		
    1.最大缓存容量为 5M. 2.manifest文件需要配置正确的MIME-type,即“text/cache-manifest”,这个是在web服务器上进行配置. ②编写.manifest文件,文件 ...
    
		
    8. 
						
  8. html5的离线缓存
		
    一个离线网络应用程序就是一个URL的列表,html,css,js,图片,或者其他类型的资源. 把这些资源,在本地缓存下来,当你尝试在没有网络连接时访问网络应用程序,你的浏览器将自动切换并使用本地代替. ...
    
		
    9. 
						
  9. HTML5 离线缓存管理库
		
    一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. symfony2 环境搭建笔记
			
    本机环境:windows+xampp symfony下载:官网下载 环境配置: 1.下载后将symfony文件夹解压到xampp/htdocs中(最好改一下文件夹名,尽量小写) 2.Symfony2自 ...
    
			
    2. 
						
  2. LUA+resty 搭建验证码服务器
			
    使用Lua和OpenResty搭建验证码服务器 雨客 2016-04-08 16:38:11 浏览2525 评论0 云数据库Redis版 摘要: Lua下有个Lua-GD图形库,通过简单的Lua语句就 ...
    
			
    3. 
						
  3. 为什么学习c++?该怎么学？
			
    本人最近刚开始学习C++,准备记录下学习C++的历程.以下都是记录欢迎指教. 第一堂课,我们的老师告诉我们为什么学习C++,学习C++有啥用?这我也想了.但是我不了解C++,所以肯定是想不了多少的.  ...
    
			
    4. 
						
  4. Android自定义图形shape
			
    在Android开发过程中,经常需要改变控件的默认样式, 那么通常会使用多个图片来解决.不过这种方式可能需要多个图片,比如一个按钮,需要点击时的式样图片,默认的式样图片. 这样就容易使apk变大.另一 ...
    
			
    5. 
						
  5. 解读Unity中的CG编写Shader系列二
			
    转自 http://www.itnose.net/detail/6095974.html 上一篇文章的例子中我们可以看到顶点着色器的输出参数可以说是直接作为了片段着色器的形参传递过来,那么不由得一个问 ...
    
			
    6. 
						
  6. Divide and conquer:Drying(POJ 3104)
			
    烘干衣服 题目大意:主人公有一个烘干机,但是一次只能烘干一件衣服,每分钟失水k个单位的水量,自然烘干每分钟失水1个单位的水量(在烘干机不算自然烘干的那一个单位的水量),问你最少需要多长时间烘干衣服?  ...
    
			
    7. 
						
  7. Divide and Conquer:Cable Master(POJ 1064)
			
    缆绳大师 题目大意,把若干线段分成K份,求最大能分多长 二分法模型,C(x)就是题干的意思,在while那里做下文章就可以了,因为这个题目没有要求长度是整数,所以我们要不断二分才行,一般50-100次 ...
    
			
    8. 
						
  8. 【python】入门学习（八）
			
    异常处理: python在遇到问题时会自动引发异常,也可以用raise故意引发异常,异常种类必须是已有的 >>> raise IOError('This is a test.') T ...
    
			
    9. 
						
  9. 常用js函数整理--common.js
			
    var h = {}; h.get = function (url, data, ok, error) { $.ajax({ url: url, data: data, dataType: 'json ...
    
			
    10. 
						
  10. 字符匹配算法之Boyer-Moore算法
			
    Boyer-Moore算法的精华是从后向前,取好后缀与坏后缀中的最大移动位移动搜索词,以达到最快速检索的效果. 详情参考:http://www.ruanyifeng.com/blog/2013/05/ ...
    
			
    11.