浏览器探究 - HTML5规范之Application Cache（1）

来源：互联网发布：软件定制开发流程编辑：程序博客网时间：2024/06/03 23:02

浏览器特性

网络：下载资源
资源管理：缓存资源，避免重复下载
网页浏览：将资源转换为可视化结果
多页面管理：多页面同时加载
插件和扩展：常见插件：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.htmlindex.cssimages/logo.pngjs/main.jshttp://img.baidu.com/js/tangram-base-1.5.2.1.jsNETWORK:# 可选# 这一部分是要绕过缓存直接读取的文件login.phpFALLBACK:# 可选# 这部分写当访问缓存失败后，备用访问的资源# 每行两个文件，第一个是访问源，第二个是替换文件*.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();  //更新成功后，切换到新的缓存}

另外，用户想要更新缓存，可以通过删除缓存文件的方式来清除缓存。

0 0