当前位置:首页 > 开发 > Web前端 > 前端 > 正文

第10章 构建离线Web应用

发表于: 2012-03-15   作者:bsr1983   来源:转载   浏览次数:
摘要:   10.1HTML5离线Web应用概述 10.2 使用HTML5离线Web应用API 10.2.1 检测浏览器是否支持离线Web应用API        if(window.applicationCache) {        //浏览器支持离线应用 }

 

10.1HTML5离线Web应用概述

10.2 使用HTML5离线Web应用API

10.2.1 检测浏览器是否支持离线Web应用API

       if(window.applicationCache)

{

       //浏览器支持离线应用

}

10.2.2 搭建简单的离线应用程序

       假设开发人员希望搭建一个包含HTML文档、样式表和JavaScript文件的单页面应用程序,同时要为这个HTML5应用程序添加离线支持,那么可参考代码清单10-2,在html元素中加入manifest特性。

代码清单10-2

<!DOCTYPE html>

<html manifest=”application.manifest”>

.

.

.

</html>

       修改完HTML文档,接下来需要提供缓存清单文件,用以指明那些资源需要存储在缓存中。代码清单10-3是一个缓存清单文件的内容示例。

       CACHE MAINFEST

       example.html

       example.js

       example.css

       example.gif

10.2.3支持离线行为

       HTML5引入了一些新的事件,用来让应用程序检测网络是否正常连接。应用程序处于在线状态和离线状态会有不同的行为模式。是否处于在线状态可以通过检测window.navigator对象的属性来做判断。首先,navigator.onLine是一个标明浏览器是否处于在线状态的布尔属性。当然,onLine值为true并不能保证Web应用程序在用户的机器上一定能访问到相应的服务器。而当其值为false时,不管浏览器是否真正联网,应用程序都不会尝试进行网络连接。

10.2.4 manifest文件

       离线应用包含一个manifest(清单)文件,此文件中列出了浏览器为离线应用缓存的所有资源。manifest文件的MIME类型是text/cache-manifest

       manifest文件的写法是先写CACHE MANIFEST,然后换行,每行单列资源文件。每行的换行符可以是CRLF或者CRLF,但文本编码格式必须是UTF8.

       添加到CACHE MANIFEST区块中的文件,无论应用程序是否在线,浏览器都会从应用程序缓存中获取该文件。没必要在这里列出应用程序的主HTML资源,因为最初指向manifest文件的HTML文档会被隐含包含进来。但是,如果希望缓存多个HTML文件,或者希望将多个HTML作为支持缓存的应用程序的可选入口,则需要将这些文件都列在CACHE MANIFEST中。

       FALLBACK部分提供了获取不到缓存资源时的备选资源路径。

       NETWork部分罗列的资源,无论缓存中存在与否,均从网络获取。

10.2.5 applicationCache API

       applicationCache API是一个操作应用缓存的接口。新的window.applicationCache对象可触发一系列与缓存状态相关的事件。该对象有一个数值型属性window.applicationCache.status代表了缓存的状态。缓存状态共有6种,见表10-2

      

数值型属性

缓存状态

0

UNCACHED(未缓存)

1

IDLE(空闲)

2

CHECKING(检查中)

3

DOWNLOADING(下载中)

4

UPDATEREADY(更新就绪)

5

OBSOLETE(过期)

       目前Web上大部分的页面都没有指定缓存清单,所以这些页面的状态就是UNCACHED(未缓存)。IDLE(空闲)是带有缓存清单的应用程序的典型状态。处于空闲状态说明应用程序的所有有资源都已被浏览器缓存,当前不需要更新。如果缓存曾经有效,但现在manifests文件丢失,则缓存进入OBSOLETE(过期)状态。

10-3 常见事件及其关联的缓存状态

事件

关联的缓存状态

onchecking

CHECKING

ondownloading

DOWNLOADING

onupdateready

UPDATEREADY

onobsolete

OBSOLETE

oncached

IDLE

此外,没有可用更新或者发生错误时,还有一些表示更新状态的事件:

(1)onerror

(2)onnoupdate

(3)onprogress

window.applicationCache有一个update()方法。调用update方法会请求浏览器更新缓存。包括检查新版本的mainfest文件并下载必要的新资源。如果没有缓存或者缓存已过期,则会抛出错误。

10.3 使用HTML5离线Web应用构建应用

       需要注意,manifest文件的内容类型必须配置为text/cache-manifest发送到浏览器,如果文件类型不正确,即使浏览器支持应用缓存也会返回缓存错误。

 

第10章 构建离线Web应用

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
applicationCache是html5新增的一个离线应用功能 离线浏览: 用户可以在离线状态下浏览网站内容。 更
web sql database 是html5废弃的一个新特性,它提供了基本的关系数据库功能,使用 `SQL` 来操纵客户
事件、属性和 CSS(转载自) 这个关于 jQuery 系列文章 的第二篇介绍了如何将更多的交互添加到 Web
其实,就算用Java建造一个不是很烦琐的web应用,也不是件轻松的事情。 在构架的一开始就有很多事情
本篇文章来源于:开发学院 http://edu.codepub.com 原文链接:http://edu.codepub.com/2009/0605/55
Web 应用的信息交互过程通常是客户端通过浏览器发出一个请求,服务器端接收和审核完请求后进行处理
SAAS 产品演变 项目 -> 产品 -> 多租户 -> 高性能的多租户 -> 可配置的多租户 ->可
SAAS 产品演变 项目 -> 产品 -> 多租户 -> 高性能的多租户 -> 可配置的多租户 ->可
传统的Web应用程序有一个很大的症结是当用户的网络连接不好时,应用会加载失败,为了解决这一问题,H
  今天我们的内容是关于如何创建离线web应用,他的好处是可以让浏览器下载我们指定的web资源,这
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号