html5离线缓存使用
2016-07-14 23:14
615 查看
html5 离线缓存使用以及注意事项
1、index.html中加入离线缓存的声明文件 如:
<!DOCTYPE html>
<html manifest="test.appcache">
test.appcache 与 index.html在相同路径下。
2、服务器端加入MIME TYPE声明:
tomcat如下 web.xml中加入
<mime-mapping>
<extension>manifest</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>
3、编写test.appcache文件
CACHE MANIFEST
# 2016-04-26
#v1.0.9
CACHE:
css/my.css
js/my.js
NETWORK:
*
FALLBACK:
/html5/ /404.html
第一行必须为CACHE MANIFEST
CACHE:配置要缓存的文件不可以使用通配符
NETWORK:配置不缓存的文件,可以使用通配符表示其他文件都不缓存
FALLBACK:规定当页面无法访问时的回退页面
4、可以通过更改test.appcache中的注释如版本号是浏览器更新缓存文件,第二次打开页面时使用新的文件
5、当index.html也被缓存的情况下可以通过更改test.appcache文件名来更新缓存文件。
1、index.html中加入离线缓存的声明文件 如:
<!DOCTYPE html>
<html manifest="test.appcache">
test.appcache 与 index.html在相同路径下。
2、服务器端加入MIME TYPE声明:
tomcat如下 web.xml中加入
<mime-mapping>
<extension>manifest</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>
3、编写test.appcache文件
CACHE MANIFEST
# 2016-04-26
#v1.0.9
CACHE:
css/my.css
js/my.js
NETWORK:
*
FALLBACK:
/html5/ /404.html
第一行必须为CACHE MANIFEST
CACHE:配置要缓存的文件不可以使用通配符
NETWORK:配置不缓存的文件,可以使用通配符表示其他文件都不缓存
FALLBACK:规定当页面无法访问时的回退页面
4、可以通过更改test.appcache中的注释如版本号是浏览器更新缓存文件,第二次打开页面时使用新的文件
5、当index.html也被缓存的情况下可以通过更改test.appcache文件名来更新缓存文件。
相关文章推荐
- 谈谈h5 WebStorage的那点事儿
- html5 运行在手机上 图片根据手势缩放
- HTML5中应该记住的知识
- html5常用标签
- HTML5基础学习笔记(八)
- 你不知道的5个HTML5新功能(第二辑)
- html5的video详解
- html5视频播放解决方案
- 利用html5 canvas实现纯前端上传图片的裁剪
- HTML5笔记二:历史管理history
- Html5之画布,尽情地画吧
- 使用Flexible实现手淘H5页面的终端适配
- 精选9个值得学习的 HTML5 效果【附源码】
- HTML5小游戏研究(一):canvas初探,雏形:方块跳跃障碍
- 仿淘宝的Flexible进行H5页面进行适配mobile
- HTML5笔记一:基础操作
- HTML5 拖放功能实现代码
- 《HTML5与CCS3网页设计基础》案例2---JavaJam Coffee House
- 移动前端不得不了解的html5 head 头标签
- 《HTML5与CCS3网页设计基础》案例1---Pacific Trails Resort