HTML5应用程序缓存Application Cache

时间 2019-11-11

标签 html5 html 应用程序缓存 application cache 栏目 HTML5 繁體版

原文原文链接

什么是Application Cachecss

HTML5引入了应用程序缓存技术，意味着web应用可进行缓存，并在没有网络的状况下使用，经过建立cache manifest文件，能够轻松的建立离线应用。html

Application Cache带来的三个优点是：html5

① 离线浏览web

② 提高页面载入速度ajax

③ 下降服务器压力浏览器

并且主要浏览器皆以支持Application Cache，就算不支持也不会对程序形成什么影响缓存

离线存储技术服务器

HTML5提出了两大离线存储技术：localstorage与Application Cache，二者各有应用场景；传统还有离线存储技术为Cookie。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.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
    demo.appcache
    index.html
    style1.css
    style2.css
    web.config
    zepto.js

这样一来即可以离线应用了，这个时候就算断网了，那些文件依旧能访问

这里有一点值得注意，好比这里不带/index.html他会将“applicationcache/”缓存，其实这个就是index.html

manifest 文件可分为三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件须要与服务器的链接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面没法访问时的回退页面（好比 404 页面）

如图所示，HTML5定义了几个事件点，可是咱们通常不会主动使用js去操做什么，大多数状况下，咱们彻底依赖浏览器的处理便可。

尺寸限制

Application Cache的尺寸限制统一在5M，我这里作一个测试：

如所示，两个css文件依旧超过了5M这个时候

Document was loaded from Application Cache with manifest http://localhost/applicationcache/demo.appcache
index.html:1 Application Cache Checking event
index.html:6 GET http://localhost/applicationcache/style2.css net::ERR_FAILED
index.html:1 Application Cache NoUpdate event
index.html:11 GET http://localhost/applicationcache/2.jpg net::ERR_FAILED
index.html:12 GET http://localhost/applicationcache/3.jpg net::ERR_FAILED

如所示，style2已经不能缓存了，这个会形成什么问题呢？

好比我A频道维护了本身的Application Cache，B频道也维护了本身的，这个时候A频道若是使用达到了一个峰值，会致使B频道全部的缓存失效，因此：

建议Application Cache，存储公共资源，不要存储业务资源

一些问题

由更新机制来讲，首次更新manifest时，由于页面加载已经开始甚至已经完成，缓存更新还没有完成，浏览器仍然会使用过时的资源；浏览器是当Application Cache有更新时，该次不会使用新资源，第二次才会使用。这个时候update事件中执行window.reload事件。

window.applicationCache.addEventListener("updateready", function(){
    window.location.reload()
});

由上例能够知道，缓存的不仅是显示定义的文件，好比上例中的applicationcache/时便会默认保存index.html为映射的数据，而且包含demo.appcache文件，不少时候会遇到一次文件更新线上总是不更新，这个时候随便在manifest配置文件中作一点修改便可更新。

好比咱们将这里代码作一个改变：

<html  manifest="demo.appcache">
=>
<html  manifest="demo1.appcache">

这个时候若是不作demo.appcache的更新的话，缓存将不会更新，缘由是index.html被缓存了，检测的仍然是原manifest清单

各个页面统一管理本身的manifest清单，意思是a页面配置了common.js，b页面也配置了common.js，意思是a页面更新后，b页面的manifest不更改的话，b页面依旧读取的是老版本的文件，这个有必定道理却也有必定浪费，须要公共页面作处理。

总结

从可用性与易用性来讲，Application Cache是值得使用的，可是最好是作静态资源的缓存，真正要实现离线应用还得花更多的功夫呢！

参考：http://www.w3school.com.cn/html5/html_5_app_cache.asp

文中有何错误、不足请指出。