html5应用缓存.pdfVIP

html5 应用缓存 什么是 Application Cache HTML5 引入了应用程序缓存技术，意味着web 应用可进行缓存，并在没有网络的情况下使用，通过创建 cache manifest 文件，可以轻松的创建离线应用。 Application Cache 带来的三个优势是： ① 离线浏览 ② 提升页面载入速度 ③ 降低服务器压力 而且主要浏览器皆以支持 Application Cache ，就算不支持也不会对程序造成什么影响 离线存储技术 HTML5 提出了两大离线存储技术：localstorage 与 Application Cache ，两者各有应用场景；传统还有离线存储技术为 Cookie。 经过实践我们认为 localstorage 应该存储一些非关键性 ajax 数据，做锦上添花的事情； Application Cache 用于存储静态资源，仍然是干锦上添花的事情； 而 cookie 只能保存一小段文本（4096 字节）；所以不能存储大数据，这是 cookie 与上述缓存技术的差异之一，而因为 HTTP 是无状态的，服务器为了区分请求是否来源于同一个服务器，需要一个标识字符串，而这个任务就是 cookie 完成的，这一 段文本每次都会在服务器与浏览器之间传递，以验证用户的权限。 所以 Application Cache 的应用场景不一样，所以使用也不一致。 Application Cache 简介 Application Cache 的使用要做两方面的工作： ① 服务器端需要维护一个 manifest 清单 ② 浏览器上只需要一个简单的设置即可 html manifest=demo.appcache 以例子做说明： CACHE MANIFEST CACHE: # 需要缓存的列表 style1.css 1 / 5 1.jpg 01.js http://localhost/applicationcache/02.js http://localhost/applicationcache/zepto.js NETWORK: # 不需要缓存的 4.jpg FALLBACK: # 访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件*.html /offline.html 2.jpg/3.jpg 首先我这里报了一个错： Application Cache Error event: Manifest fetch failed (404) 这个错误的原因是：manifest 文件需要配置正确的 MIME-type ，即text/cache-manifest。必须在 web 服务器上进行 配置，不同的服务器不一样 \APPLICATIONCACHE 01.js 02.js 1.jpg 2.jpg 3.jpg 4.jpg 2 / 5 demo.appcache index.html style1.css style2.css web.config zepto.js 这样一来便可以离线应用了，这个时候就算断网了，那些文件依旧能访问 这里有一点值得注意，比如这里不带/index.html 他会将 “applicationcache/”缓存，其实这个就是 index.html manifest 文件可分为三个部分： CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存 NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存 FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面） 3 / 5 如图所示，HTML5 定义了几个事件点，但是我们一般不会主动使用js 去操作什么，大多数情况下，我们完全依赖浏览器的 处理即可。 尺寸限制 Application Cache 的尺寸限制统一在 5M ，我这里做一个测试： 如所示，两个 css 文件依旧超过了 5M 这个时候 Doc