浏览器的缓存机制，多种多样，离线缓存是其中之一，这也是为了更好的用户体验，性能优化的重要一步。我们来讲讲这个离线缓存。
什么是HTML5离线缓存？
离线缓存（Application Cache）就是web应用缓存方式的一种，可以使得用户在离线状态下，依然能够很完美的浏览网站。
HTML5离线缓存的优势？
HTML5离线缓存应用场景？
h5游戏及一些页面内容不经常会变动、相对较为固定的内容。
HTML5离线缓实现原理？
HTML5的离线存储是基于一个manifest文件(缓存清单文件，后缀为.appcache)的缓存机制(不是存储技术)，通过这个文件上的清单解析离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态时，浏览器会通过被离线存储的数据进行页面展示。
HTML5离线缓存主要通过html元素的manifest属性指定一个后缀为manifest的文件，该文件为网页指定哪些文件需要被缓存，哪些不需要缓存，以及获取失败的处理方式等等，该文件主要包含四个部分：
CACHE MANIFEST：标题，位于文件首行，如果没有指定标题，会导致文件解析失败
CACHE：该部分指定需要缓存的文件列表，内容为相对路径，对应html文件中引入的路径，一般来说主文档无需添加，默认缓存。
NETWORK：指定不需要缓存的文件，即永远从服务端获取。
FALLBACK：指定文件获取失败后的处理方式。
HTML5离线缓其工作流程？
html元素的manifest文件，加载CACHE以及FALLBACK对应的资源到缓存中manifest文件是否更新（联机状态才会检查）。若manifest文件更新，浏览器会下载所有资源并更新缓存。NETWORK中的资源则会对应读取FALLBACK。注意点：只有manifest文件更新，浏览器才会重新下载新资源，意味着仅仅更改资源文件内容是不会触发更新的。这一问题可以通过在manifest中添加版本注释来解决。且更新缓存并不会立即生效，需下次访问生效！可通过浏览器API监听相应的事件，提醒用户刷新浏览器。
HTML5离线缓如何使用？
首先在文档的html标签中设置manifest 属性，引用manifest文件 。
然后配置manifest文件，在manifest文件中编写离线存储的资源。
最后操作window.applicationCache进行需求实现。
此外，必须要在服务器端正确的配置MIME-type。
如何更新缓存？
一旦应用被缓存，它就会保持缓存直到发生下列情况：
所以更新缓存应该是这样的：
oAppCache.addEventListener('updateready', function(){
oAppCache.swapCache();// 更新本地缓存
location.reload(); //重新加载页面页面
}, false); 与传统浏览器缓存区别？
注意点：
看一个例子：我们做一个离线缓存的例子，文件夹的目录结构大致是这样的：
第一步：在文档的html标签中设置manifest 属性，引用manifest文件 。
要将清单与网页关联，需将html 元素的 manifest 属性值设置为manifest文件名 。manifest 属性可指向绝对网址或相对路径，但绝对网址必须与相应的网络应用同源。清单文件可使用任何文件扩展名，但必须以正确的 MIME 类型提供，“.appcache"是官方推荐的文件扩展名。 demo.html的代码应该是这样的：
<!DOCTYPE html>
<html lang="en" manifest="demo.appcache">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<img src="img.jpg" height="500" width="900" alt="">
其它内容...
</body>
</html>第二步：配置manifest文件，在manifest文件中编写离线存储的资源。
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
注意：CACHE MANIFEST写在第一行
demo.appcache的代码应该是这样的：
CACHE MANIFEST
#version 1.0
CACHE：
img.jpg
NETWORK:
*
FALLBACK:
/demo/ /404.htmldemo.appcache中的配置意为：demo.html中的img在首次下载后进行缓存；其他文件内容都需要因特网连接；如果无法建立因特网连接，则用 "404.html" 替代 /demo/ 目录中的所有文件。
第三步：操作window.applicationCache进行需求实现。
window.applicationCache 对象是对浏览器的应用缓存的编程访问方式。其 status 属性可用于查看缓存的当前状态。status的值为：
浏览器会对下载进度、应用缓存更新和错误状态等情况触发相应事件。
function handleCacheEvent(e) {
对应操作...
}
function handleCacheError(e) {
alert('Error: Cache failed to update!');
};
//在浏览器为应用缓存查找更新时触发
oAppCache.addEventListener('checking', handleCacheEvent, false);
//在检查描述文件发现文件无变化时触发
oAppCache.addEventListener('noupdate', handleCacheEvent, false);
// 在开始下载应用缓存资源时触发
oAppCache.addEventListener('downloading', handleCacheEvent, false);
//在文件下载应用缓存的过程中持续不断地下载地触发
oAppCache.addEventListener('progress', handleCacheEvent, false);
//在应用缓存完整可用时触发
oAppCache.addEventListener('cached', handleCacheEvent, false);
//在页面新的应用缓存下载完毕触发
oAppCache.addEventListener('updateready', function(){
oAppCache.swapCache();// 更新本地缓存
location.reload(); //重新加载页面页面
}, false);
//在检查更新或下载资源期间发送错误时触发
oAppCache.addEventListener('error', handleCacheError, false);
//缓存清单不存在时触发
oAppCache.addEventListener('obsolete', handleCacheEvent, false); 第四步：在服务器端正确的配置MIME-type
若遇到如此报错“Application Cache Error event: Manifest fetch failed (404)”,其原因是manifest文件需要正确的配置MIME-type（描述该消息的媒体类型），即“text/cache-manifest”，必须在服务器端进行配置。不同服务器配置方式不一样，举在tomcat服务器配置的例子。
在tomcat服务器中的conf/web.xml中添加：
<mime-mapping>
<extension>manifest</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>在开发者工具的Network面板下，可以看到img.jpg的Size为(from disk cache)，意味着是从缓存中读取的。
HTML5的离线缓存，没那么难。。。