通过代码示例跟我学html5相关技术——html5脱机应用技术及实例

通过代码示例跟我学html5相关技术——html5脱机应用技术及实例内容摘要：

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 8/19 页 8 xmlns= xmlns:web= xsi:schemaLocation= version= mimemapping extensionmanifest /extension mimetypetext/cachemanifest/mimetype /mimemapping welefilelist welefile/welefile /welefilelist /webapp 更新缓存 应用程序可以等待浏览器自动更新缓存，也可以使用 Javascript 接口手动触发更新。 （ 1）自动更新 浏览器除了在第一次访问 Web 应用时缓存资源外，只会在“ Cache Manifest”文件本身的内容发生变化时才会更新缓存中的对应的资源文件；但如果仅仅是“ Cache Manifest”文件中的相关资源文件发生变化浏览器并不会立即触发更新行为 —— 比如开发人员修改了系统中的相关图片资源或更改了 JavaScript 程序代码，这些更改不会导致重新缓存，此时则需要在应用程序中通过代码等方式手动 触发更新或者通过修改“ Cache Manifest”文件的内容而产生自动触发更新的效果。 比如，可以在“ Cache Manifest”文件添加注释文件的版本或者修改其中的版本号达到“ Cache Manifest”文件被修改的效果。 该方法不仅可以很明确地区分离线 Web 应用的版本，而且还可以轻易地通知浏览器更新缓存中的相关资源文件 —— 要表明一个新的清单文件，只需更改现有清单文件的部分或全部内容。 （ 2）手动更新 开发者可以使用 的接口更新缓存，此时需要检测其中的一 个status 属性的值 （ ），如果其值是 UPDATEREADY，那么可以调用 ()函数更新缓存。 示例代码如下： if( == )｛ “ Cache Manifest”文件的存储位置 的扩展名 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 9/19 页 9 ()。 ｝ 通过调用 ()函数使得浏览器开始尝试更新的行为，但前提是“ Cache Manifest”文件是更新过的（比如前面所说的修改版本号）。 其中的 status 有五种无符号的短整型值的状态： 1) UNCACHED = 0，此时 applicationCache 对象的缓存宿主与应用缓存无关联； 2) IDLE = 1，应用缓存已经是最新的，并且没有标记为 obsolet； 3) CHECKING = 2， applicationCache 对象的缓存宿主已经和一个应用缓存关联，并且该缓存的更新状态是 checkin； 4) DOWNLOADING = 3， applicationCache 对象的缓存宿主已经和一个应用缓存关联，并且该缓存的更新状态是 downloadin； 5) UPDATEREADY = 4， applicationCache 对象的缓存宿主已经和一个应用缓存关联，并且该缓存的更新状态是 idle，并且没有标记为 obsolete，但是缓存不是最新的； 6) OBSOLETE = 5， applicationCache 对象的缓存宿主已经和一个应用缓存关联，并且该缓存的更新状态是 obsolete。 但 update()函数会调用当前应用资源下载的过程，可能会出现重复下载资源文 件。 因此可以使用 . swapCache()函数更新到最新的缓存，这个不会使得之前加载的资源突然被重新加载。 图片不会重新加载，样式和脚本也不会重新渲染或解析，唯一的变化是在此之后发出请求页面的资源是最新的。 缓存更新过程中的相关事件 （ 1）缓存新过程中的相关事件 applicationCache 对象再更新缓存的过程中会触发各种事件。 从而可以实现对更新过程进行监控和处理各种异常、提示等待状态等行为以提高用户的体验。 （ 2）主要的相关事件 applicationCache 对象的更新过程所触发的事件主要是： 1) onchecking（检查 manifest 文件是否存在） 2) onerror（其他和离线存储有关的错误） 3) onnoupdate（返回 304 表示缓存名单没有被更改，通知浏览器直接使用本地文件） 4) ondownloading（检查到有 manifest 或者 manifest 文件已更新就执行下载操作，开始重新下载缓存名单中列出的每个资源文件） 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 10/19 页 10 5) onprogress（下载的时候周期性的触发，可以通过它获取已经下载的文件个数和多少文件仍然处于下载队列等信息） 6) onupdateready（缓存名单中所有列出的资源被成功重新下载后，新版本的离线网络应用程序被完整缓存并以备离线使用的标志） 7) oncached（离线网络应用程序被完整缓存成功，可以在离线状态下被使用） 8) onobsolete（未找到文件，返回 404 或者 401 时候触发） （ 3）对更新过程进行监控和处理各种异常 var appCache =。 /** 请求 manifest 文件时返回 404 或 410 下载失败或 manifest 文件在下载过程中源文件被修改会触发 error 事件 */ (39。 error39。 , handleCacheError, false)。 function handleCacheError(e) { alert(39。 不能正确地更新缓存。 39。 )。 } 不管是 manifest 文件还是它所罗列的资源文件下载失败，整个更新过程就终止了，浏览器会使用上一个最新的缓存。 可能出现的错误如下： 1) 缓存名单返回一个 HTTP404 错误（页面未找到）或者 410 错误（永久消失） 2) 缓存名单被找到且没有更改，但指向名单的 HTML 页面没有正确下载 3) 缓存名单被找到且被更改，但浏览器没有下载某个缓存名单中列出的资源 应用 updateready 事件自动地更新本地缓存 （ 1） updateready 事件的触发机制 如果与页面绑定的存储在 Web 服务器端的 manifest 文件的内容发生变化时，并且把manifest 文件中所定义的要求更新的各个资源文件都下载到本地后将引起本地缓存的更新，从而触发 updateready 事件。 因此，可以在 updateready 事件中编写代码，实时监测本地缓存是否完成更新的信息。 （ 2）如何定义 updateready 事件 当 Web 页面加载时，可以为。