html5构建离线应用
发表于2017-08-28 11:36 | 次阅读 | 0条评论 | 作者:siru90
html5支持离线缓存首先需要在应用中保存一份缓存清单,清单中列出需要缓存的文件.清单格式如下:
CACHE MANIFEST
CACHE:
/html5/test.html
/html5/pic.png
NETWORK:
/html5cache/test.js
FALLBACK:
/test/ test.jsp
CACHE:直接缓存的资源,需要明确指明某个文件,支持http资源 如:http://3gimg.qq.com/wap30/lbs-store/js/zepto.min.js
NETWORK:在缓存页面里需要在线更新的资源
FALLBACK:指定在线和离线时使用的文件如:"/test/ test.jsp"表示如果请求test路径时为离线,则跳转到test.jsp页面.此项非常有用,省去了自己去判断在线状态.
缓存清单配置好以后需要后端添加新的mime-type,注意mime-type不在前端LB上配置,需要在后端resin上指定,修改resin app-default.xml新增<mime-mapping extension=".appcache" mime-type="text/cache-manifest"/>。
缓存清单准备好后,需要指定加载清单资源的页面。如我想在用户访问load.jsp这个页面时加载离线资源只要在html的标签上加<html manifest="XXX.appcache">指定离线资源清单的文件名即可(注意html5的缓存默认会把加了manifest的页面也列入缓存清单里,所以加载离线资源的页面最好选择动态页面。)
如果当前页面指定了manifest,游览器在请求load.jsp页面时,会先请求清单文件如发现清单文件有修改则重新请求保存清单中的文件,否则什么都不做。
html5新的缓存技术更适合构建一个新的离线应用,而不是缓存用户游览过的页面。