HTML5离线缓存Manifest是什么
web app不比pc,有性能和流量方面的考虑,离线应用越来越重要,虽然浏览器有缓存机制,但是时常不靠谱,更何况普通情况下html文件是没法缓存的,断网之后一切over。
什么是manifest?
简单来说manifest能让你的应用在无网的情况下也能访问。
它有三大优势:
1、离线浏览,无网情况下也能正常访问;
2、更快的加载速度,缓存在本地访问速度自然更快;
3、减轻服务请求压力,文件缓存后不需要再次请求,只需要请求需要更新的文件。
如何使用?
- <!doctype html>
- <html manifest="demo.appcache">
- ...
- </html>
你需要在你想要缓存的web app的每一页中都包含 manifest 属性。如果一个页面没有 manifest属性,它将不会被缓存(除非在manifest文件中显式指定了这 个页面)。这意味着只要用户访问的页面包含manifest属性,它都将会被加入application cache中。这样,就不用在manifest文件中指定需要缓存哪些页面了。
manifest属性可以指定一个绝对url或是一个相对路径,但是,一个绝对url需要和web app是同源的。一个manifest文件可以是任何扩展文件类型,但必须有正确的mime-type,比如在apache中添加
“addtype text/cache-manifest .appcache”。
manifest文件
manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。
manifest 文件可分为三个部分:
cache manifest - 在此标题下列出的文件将在首次下载后进行缓存
network - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
fallback - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
一个完整的manifest文件:
- cache manifest
- # 2012-02-21 v1.0.0
- /theme.css
- /logo.gif
- /main.js
- network:
- login.asp
- fallback:
- /html5/ /404.html
cache manifest是必须的,#后面是注释,下面是需要cache的文件,需要相对路径,network是需要每次请求加载的文件。
可以使用星号来指示所有其他资源/文件都需要因特网连接:
network:
*
fallback是如果无法建立因特网连接,则用 "404.html" 替代 /html5/ 目录中的所有文件。
更新机制
有三种方式更新manifest缓存:
1、用户清空浏览器缓存;
2、manifest文件被修改,哪怕是注释(所以可以通过修改注释来更新文件)
3、由程序来更新
缓存状态
在程序可以通过window.applicationcache属性来查看缓存状态。
- var appcache = window.applicationcache;
- switch (appcache.status) {
- case appcache.uncached: // uncached == 0
- return ‘uncached’;
- break;
- case appcache.idle: // idle == 1
- return ‘idle’;
- break;
- case appcache.checking: // checking == 2
- return ‘checking’;
- break;
- case appcache.downloading: // downloading == 3
- return ‘downloading’;
- break;
- case appcache.updateready: // updateready == 4
- return ‘updateready’;
- break;
- case appcache.obsolete: // obsolete == 5
- return ‘obsolete’;
- break;
- default:
- return ‘uknown cache status’;
- break;
- };
为了通过编程更新cache,首先调用 applicationcache.update()。这将会试图更新用户的 cache(要求manifest文件已经改变)。最后,当 applicationcache.status 处于 updateready 状态时, 调用applicationcache.swapcache(),旧的cache就会被置换成新的。
- var appcache = window.applicationcache;
- appcache.update(); // attempt to update the user’s cache.
- …
- if (appcache.status == window.applicationcache.updateready) {
- appcache.swapcache(); // the fetch was successful, swap in the new cache.
- }
注意:像这样使用 update()和swapcache()并不会将更新后的资源 呈现给用户。这仅仅是让浏览器检查manifest文件是否发生了更新,然后下载指定的更新内容,重新填充app cache。因此,要让用户看到更新后的内容,需要两次页面下载,一次是更新app cache,一次是更新页面内容。
为了让用户能看到你的站点的最新版本,设置一个监听器来监听页面加载时的updateready 事件。
- // check if a new cache is available on page load.
- window.addeventlistener(‘load’, function(e) {
- window.applicationcache.addeventlistener(‘updateready’, function(e) {
- if (window.applicationcache.status == window.applicationcache.updateready) {
- // browser downloaded a new app cache.
- // swap it in and reload the page to get the new hotness.
- window.applicationcache.swapcache();
- window.location.reload();
- } else {
- // manifest didn’t changed. nothing new to server.
- }
- }, false);
- }, false);
监听事件,对不同的状态做出相应处理:
- var appcache = window.applicationcache;
- // fired after the first cache of the manifest.
- appcache.addeventlistener(‘cached’, handlecacheevent, false);
- // checking for an update. always the first event fired in the sequence.
- appcache.addeventlistener(‘checking’, handlecacheevent, false);
- // an update was found. the browser is fetching resources.
- appcache.addeventlistener(‘downloading’, handlecacheevent, false);
- // the manifest returns 404 or 410, the download failed,
- // or the manifest changed while the download was in progress.
- appcache.addeventlistener(‘error’, handlecacheerror, false);
- // fired after the first download of the manifest.
- appcache.addeventlistener(‘noupdate’, handlecacheevent, false);
- // fired if the manifest file returns a 404 or 410.
- // this results in the application cache being deleted.
- appcache.addeventlistener(‘obsolete’, handlecacheevent, false);
- // fired for each resource listed in the manifest as it is being fetched.
- appcache.addeventlistener(‘progress’, handlecacheevent, false);
- // fired when the manifest resources have been newly redownloaded.
- appcache.addeventlistener(‘updateready’, handlecacheevent, false);
如果manifest文件或者该文件中指定的某个资源下载失败,那么整个更新都会失败。在这种情况下,浏览器会继续试用老的application cache。
注意事项:
1. 站点离线存储的容量限制是5m
2. 如果manifest文件,或者内部列举的某一个文件不能正常下载,整个更新过程将视为失败,浏览器继续全部使用老的缓存
3. 引用manifest的html必须与manifest文件同源,在同一个域下
4. 在manifest中使用的相对路径,相对参照物为manifest文件
5. cache manifest字符串应在第一行,且必不可少
6. 系统会自动缓存引用清单文件的 html 文件
7. manifest文件中cache则与network,fallback的位置顺序没有关系,如果是隐式声明需要在最前面
8. fallback中的资源必须和manifest文件同源
9. 当一个资源被缓存后,该浏览器直接请求这个绝对路径也会访问缓存中的资源。
10. 站点中的其他页面即使没有设置manifest属性,请求的资源如果在缓存中也从缓存中访问
11. 当manifest文件发生改变时,资源请求本身也会触发更新
以上就是关于html5离线缓存manifest的相关内容介绍,希望对大家的学习有所帮助。
原文: