HTML5应用程序缓存(Application Cache)
来源:互联网 发布:引入js 随机数 编辑:程序博客网 时间:2024/05/21 11:01
最近做项目的时候,需要将web页面缓存到本地,经过调查,决定使用HTML5的应用程序缓存功能。
使用HTML5,通过创建 manifest 文件,可以轻松地创建 web 应用的离线版本。
请注意,根据MDN文档,该特性已经从 Web 标准中删除。推荐使用Service Workers代替,但是目前Service Workers 仍然有兼容性问题,所以应用程序缓存(ApplicationCache)仍然是目前进行离线存储的最好的方式。
应用程序缓存的优点
HTML5 提供一种应用程序缓存机制,使得基于web的应用程序可以离线运行。开发者可以使用 Application Cache (AppCache) 接口设定浏览器应该缓存的资源并使得离线用户可用。 在处于离线状态时,即使用户点击刷新按钮,应用也能正常加载与工作。
- 离线浏览: 用户可以在离线状态下浏览网站内容。
- 更快的速度: 因为数据被存储在本地,所以速度会更快。
- 减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源。
实例
index.html
<html manifest="cache.appcache"> ...</html>
cache.appcache
CACHE MANIFEST#v1.0.18/xxx.js/js/jquery.min.js/xxxx.js/xxxxx.jsNETWORK:*FALLBACK:404.html
注:
1.缓存清单文件可以使用任意扩展名,但传输它的 MIME 类型必须为 text/cache-manifest。
2.manifest 文件的建议的文件扩展名是:”.appcache”.
3.在缓存清单文件中列出的所有记录必须拥有相同的协议、主机名与端口号。
4.不要在清单文件中指定清单文件本身,否则将无法让浏览器得知清单文件有新版本出现。
应用程序缓存appcache文件配置
manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。
manifest 文件可分为三个部分:
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存。
NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存。可以使用通配符。
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
注:
1.缓存清单文件的第一行必须包含字符串 CACHE MANIFEST,本行的其他文本会被忽略。
2.注释只能在所在行起作用,不能追加到其他行上。
3.CACHE, NETWORK, 和 FALLBACK 段落可以以任意顺序出现在缓存清单文件中,并且每个段落可以在同一清单文件中出现多次。而且段落允许为空。
4.段落标题指定了缓存文件即将操作的段落。有三个可选的标题:
段落标题所在的行可以包含空白字符,段落名后的冒号 (:) 不可省略。
5.1在默认 (CACHE:) 段落,每行都是一个合法的 URI 或 IRI ,与一个要缓存的资源相关联(本段落内不允许通配符)。
5.2在 Network 段落内,每行都是一个合法的 URI 或 IRI,关联一个需要通过网络获取的资源(本段落内可以使用通配符 *)。
5.3在 Fallback 段落内,每行都是一个合法的 URI 或 IRI(与一个资源关联),紧跟着一个后备资源,用于当无法与服务器建立连接时访问。
5.4相对 URI 是指相对于缓存清单的 URI,而不是包含清单的文档的 URI。
使用manifest后加载过程
application cache的使用会修改文档的加载过程:
1.如果应用缓存存在,浏览器直接从缓存中加载文档与相关资源,不会访问网络。这会提升文档加载速度。
2.浏览器检查清单文件列出的资源是否在服务器上被修改。
3.如果清单文件被更新了, 浏览器会下载新的清单文件和相关的资源。 这都是在后台执行的,基本不会影响到webapp的性能。
下面详细描述了加载文档与更新应用缓存的流程:
1.当浏览器访问一个包含 manifest 特性的文档时,如果应用缓存不存在,浏览器会加载文档,然后获取所有在清单文件中列出的文件,生成应用缓存的第一个版本。
2.对该文档的后续访问会使浏览器直接从应用缓存(而不是服务器)中加载文档与其他在清单文件中列出的资源。此外,浏览器还会向 window.applicationCache 对象发送一个 checking 事件,在遵循合适的 HTTP 缓存规则前提下,获取清单文件。
3.如果当前缓存的清单副本是最新的,浏览器将向 applicationCache 对象发送一个 noupdate 事件,到此,更新过程结束。注意,如果你在服务器修改了任何缓存资源,同时也应该修改清单文件,这样浏览器才能知道它需要重新获取资源。
4.如果清单文件已经改变,文件中列出的所有文件—也包括通过调用 applicationCache.add() 方法添加到缓存中的那些文件—会被获取并放到一个临时缓存中,遵循适当的 HTTP 缓存规则。对于每个加入到临时缓存中的文件,浏览器会向 applicationCache 对象发送一个 progress 事件。如果出现任何错误,浏览器会发送一个 error 事件,并暂停更新。
5.一旦所有文件都获取成功,它们会自动移送到真正的离线缓存中,并向 applicationCache 对象发送一个 cached 事件。鉴于文档早已经被从缓存加载到浏览器中,所以更新后的文档不会重新渲染,直到页面重新加载(可以手动或通过程序).
缓存状态
UNCACHED(未缓存)
一个特殊的值,用于表明一个应用缓存对象还没有完全初始化。
IDLE(空闲)
应用缓存此时未处于更新过程中。
CHECKING(检查)
清单已经获取完毕并检查更新。
DOWNLOADING(下载中)
下载资源并准备加入到缓存中,这是由于清单变化引起的。
UPDATEREADY(更新就绪)
一个新版本的应用缓存可以使用。有一个对应的事件updateready,当下载完毕一个更新,并且还未使用 swapCache() 方法激活更新时,该事件触发,而不会是 cached 事件。
OBSOLETE(废弃)
应用缓存现在被废弃。
更新缓存的时机
一旦应用被缓存,它就会保持缓存直到发生下列情况:
用户清空浏览器缓存
manifest 文件被修改(包括更改注释)
由程序来更新应用缓存
缓存中的事件
已知的applicationCache中的事件如下所示:
实例如下所示
// 离线资源存储完成之后触发window.applicationCache.addEventListener('cached', function () { console.log('cached');});// 离线存储资源进行更新检查的时候会触发window.applicationCache.addEventListener('checking', function () { console.log('checking');});// 开始下载离线资源的时候会触发window.applicationCache.addEventListener('downloading', function () { console.log('downloading');});// 下载每一个资源的时候会触发window.applicationCache.addEventListener('progress', function () { console.log('progress');});// 离线资源更新完成之后window.applicationCache.addEventListener('updateready', function () { console.log('updateready');});// 检查更新之后发现没有资源更新的时候触发window.applicationCache.addEventListener('noupdate', function () { console.log('noupdate');});// obsoletewindow.applicationCache.addEventListener('obsolete', function () { console.log('obsolete');});// errorwindow.applicationCache.addEventListener('error', function () { console.log('error');});
结果
第一次加载后log:
缓存后再次打开log:
更新manifest文件后log:
将manifest文件中第五个文件设置为不存在的文件后的log:
断网后的log(chrome下):
上图是chrome浏览器模拟断网时的log,在手机浏览器真实断网的情况下触发以下两个事件:
1.onchecking
2.onerror
注:
1.onchecking事件每次刷新页面都会被触发,包括第一次加载。
2.onnoupdate事件触发的时机应该为manifest文件被更新之后,而不是缓存的资源被更新之后。
3.应用缓存可以变成废弃的。如果从服务器上移除一个应用的清单文件,浏览器将会清除所有清单中列出的应用缓存,并向 applicationCache 对象发送一个「obsolete」事件。这将使得应用缓存的状态变为 OBSOLETE。
加载完成后刷新
当manifest文件更新之后,浏览器下载完成之后会触发onupdateready事件,但是页面并没有被刷新,即新的文件并没有执行,需要程序控制刷新一下。
window.applicationCache.addEventListener('updateready', function () { if(window.applicationCache.status === window.applicationCache.UPDATEREADY) { window.applicationCache.swapCache(); window.location.reload(); }});
注意事项
- 在缓存清单文件中列出的所有记录必须拥有相同的协议、主机名与端口号。
- 一旦文件被缓存,浏览器会使用缓存的文件,即使服务器文件被修改也不会重新下载。为了确保浏览器更新缓存,请更新manifest文件。
- 引入manifest的页面,即使不在缓存列表里,也会被缓存,也就是说在服务器修改了这个html页面,刷新浏览器也不会生效,必须更新manifest文件,原因请看上一条。
- 当浏览器打开多个页面被缓存的页面的时候,刷新其中一个页面,其他几个页面也会收到缓存事件(比如说onchecking等),也会更新缓存。
- 站点离线缓存的默认容量限制是5M。(待确认)
- 站点中的所有页面,只会缓存一份资源。
- 站点中的其他页面,即使没有引用manifest文件,如果请求了缓存中的资源,也会从缓存中读取。
- 当manifest文件被更新之后,虽然本次访问下载了资源并触发了onupdateready方法,但是新的资源并不会被执行,需要手动刷新执行新的文件。
- 直接请求被缓存的资源,也会从缓存中读取。
- 该特性已从web标准中废弃,未来浏览器可能不再支持,MDN推荐使用Service Workers代替。(根据调查,截止到目前,浏览器仍未完全支持Service Workers,如果要兼容移动端,暂时还不能使用Service Workers)
注:
本文主要参考了MDN上的文章,谨在此对开源文档开发编写人员表示敬意。
如果您有任何疑问或本文侵犯了您的著作权,请联系我。 mail to kylin
- Application Cache---HTML5应用程序缓存Application Cache
- HTML5应用程序缓存Application Cache
- HTML5应用程序缓存(Application Cache)
- HTML5 Application Cache 应用程序缓存 demo
- HTML5 应用缓存,Application Cache
- Html5 离线应用缓存application Cache
- html5应用缓存Application Cache 详解
- 浅谈HTML5离线缓存(Application Cache)
- HTML5研究之应用缓存(application cache)
- HTML5 使用application cache 接口实现离线数据缓存
- [HTML5]Application Cache,未缓存文件无法访问解决方法
- HTML5页面静态资源缓存利器Application Cache
- HTML5 Application Cache
- HTML5 application cache
- HTML5 - Application Cache
- 学习HTML5 Application Cache
- HTML5 Application Cache
- HTML5 Application Cache
- python各个读写excel模块的对比
- fiddler过滤器的使用
- Windows 10不能安装mini版迅雷的解决方法
- 2进制负数相关知识
- Kotlin开发语言学习(5) 函数与闭包
- HTML5应用程序缓存(Application Cache)
- 我与免疫台不得不说的故事(二):风湿性疾病_1
- wmic命令收集整理
- 很棒的 openssl 证书解析例子
- 使用sklearn进行集成学习——实践
- android两次点击的焦点问题
- SoftEther VPN Client + VPN Gate Client
- 小程聊微服务-性能测试场景设计杂谈
- 淘淘商城系列——单点登录之安全退出