浏览器特性
- 网络:下载资源
- 资源管理:缓存资源,避免重复下载
- 网页浏览:将资源转换为可视化结果
- 多页面管理:多页面同时加载
- 插件和扩展:常见插件:NPAPI、PPAPI、ActiveX。扩展根据浏览器不同有不同扩展:FireFox扩展,Chromium扩展。
- 账户和同步:历史记录、书签等
- 安全:网站安全提示,浏览器不被恶意代码攻破
- 开发者工具:例如火狐的fireBugs
HTML5规范
类别 | 具体规范 |
---|---|
离线 | Application Cache,Local Storage,Indexed DB,在线、离线事件等 |
存储 | Application Cache,Local Storage,Indexed DB |
连接 | web socket, server sent事件 |
文件访问 | FILE API, File system, File Writer, Progress Event |
语义 | 各种新元素,包括media,structual,国际化,Link relation,属性,form类型,macromedia等 |
音频和视频 | HTML5 video,Web audio,WebRTC, VideoTrack |
3D和图形 | Canavas 2D,3D CSS变换,WebGL,SVG等 |
展示 | CSS 2D/3D变换,转换(transition),WebFonts等 |
性能 | Web Worker,HTTP Caching等 |
其他 | 触控和鼠标,shadow DOM, CSS masking等 |
Application Cache
什么是Application Cache API?
传统的web程序中浏览器也会对资源文件进行cache,但是并不是很可靠,有时起不到预期的效果。而HTML5中的application cache支持离线资源的访问,为离线web应用的开发提供了可能。
使用application cache能够带来以下几点收益:
- 用户可以在离线时继续使用
- 缓存到本地,节省带宽,加速用户体验的反馈
- 减轻服务器的负载
如何使用application cache?
要使用application cache,主要用到缓存清单文件:manifest,该文件告诉浏览器需要缓存哪些资源
manifest文件结构:
CACHE MANIFEST
# 以上折行必需要写
CACHE:
# 这部分写需要缓存的资源文件列表
# 可以是相对路径也可以是绝对路径
index.html
index.css
images/logo.png
js/main.js
http://img.baidu.com/js/tangram-base-1.5.2.1.js
NETWORK:
# 可选
# 这一部分是要绕过缓存直接读取的文件
login.php
FALLBACK:
# 可选
# 这部分写当访问缓存失败后,备用访问的资源
# 每行两个文件,第一个是访问源,第二个是替换文件*.html /offline.html
manifest文件使用:
写完一个manifest文件之后,像下面这样在你的web页面中引用他
<html manifest="demo.cache">
...
</html>
其中文件后缀可以自定义,但是需要在服务器中进行相应配置,指定其为text/cache-manifest MIME 类型文件:
让 Apache 支持 manifest
新建或者编辑现有的 .htaccess 文件,在里面加上一行:
AddType text/cache-manifest .manifest
让 Nginx 支持 manifest
修改 mime.types 文件,在里面增加 manifest 文件的映射:
text/cache-manifest manifest
让 Tomcat 支持 manifest
修改 web.xml 文件,在里面增加:
<mime-mapping>
<extension>manifest</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>
让 GAE 支持 manifest
- url: /mystaticdir/(.*\.manifest)
static_files: mystaticdir/\1
mime_type: text/cache-manifest
upload: mystaticdir/(.*\.manifest)
做完以上工作,你的应用程序就可以使用application cache了。
更新缓存的方式
开发人员想要通知客户的浏览器更新application cache的方法有以下两类:
- 更新manifest文件:浏览器发现manifest文件本身发生变化,便会根据新的manifest文件去获取新的资源进行缓存。当manifest文件列表并没有变化的时候,我们通常通过修改manifest注释的方式来改变文件,从而实现更新。
- 通过javascript操作:浏览器提供了applicationCache供js访问,通过对于applicationCache对象的操作也能达到更新缓存的目的。
var appCache = window.applicationCache;
appCache.update(); //尝试更新缓存
...
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache(); //更新成功后,切换到新的缓存
}
另外,用户想要更新缓存,可以通过删除缓存文件的方式来清除缓存。