云顶国际,云顶国际登录官网

    欢迎访问云顶国际登录官网~

  1. 加入收藏
  2. 设为主页
  3. 学校简介
北大青鸟

三分钟了解北大青鸟

×
  • 北大青鸟大数据课程
  • 北大青鸟网络工程师
  • 北大青鸟web设计专业
  • 北大青鸟PHP专业
  • 北大青鸟启蒙星课程

五步创建成功HTML5离线WEB应用实战

责任编辑:云顶国际登录官网来源:云顶国际登录官网数据库技术教程发布时间:2013-02-20 11:15
导读:HTML5近十年来发展得如火如荼,在HTML 5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。
    HTML5近十年来发展得如火如荼,在HTML 5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。HTML功能越来越丰富,支持图片上传拖拽、支持localstorage、支持web sql database、支持文件存储api等等。它任重而道远,致力于将Web带入一个更为成熟的应用平台。在所有炫酷特性中,让我喜欢的是它具有离线缓存Web应用的功能。

  开发离线Web 应用程序:三大核心功能

  在开发支持离线的 Web 应用程序时,开发者通常需要使用以下三个方面的功能:

  1. 离线资源缓存:需要一种方式来指明应用程序离线工作时所需的资源文件。这样,浏览器才能在在线状态时,把这些文件缓存到本地。此后,当用户离线访问应用程序时,这些资源文件会自动加载,从而让用户正常使用。HTML5 中,通过 cache manifest 文件指明需要缓存的资源,并支持自动和手动两种缓存更新方式。

  2. 在线状态检测:开发者需要知道浏览器是否在线,这样才能够针对在线或离线的状态,做出对应的处理。在 HTML5 中,提供了两种检测当前网络是否在线的方式。

  3. 本地数据存储:离线时,需要能够把数据存储到本地,以便在线时同步到服务器上。为了满足不同的存储需求,HTML5 提供了 DOM Storage 和 Web SQL Database 两种存储机制。前者提供了易用的 key/value 对存储方式,而后者提供了基本的关系数据库存储功能。

  HTML5推出的 “Web Storage”(Web 存储)API

  为了弥补cookie容量小存在的缺陷,WebStorage可以解决轻量级的存储。HTML5推出的 “Web Storage”(Web 存储)API,它包括 localStorage 和 sessionStorage,可以存储简单对象(如应用程序状态),使用本地和会话存储能够很好地完成,但是对大量的结构化数据进行处理时,需要用到 HTML5 的“Web SQL Database” API 接口。

  在HTML5中网络存储按照生命周期分为2种,一种是基于会话(session),这种存储周期只是当前会话,当网页[注1]被关被后,或者被转到其他网站后,存储也就被销毁;
  sessionStorage.varName = “生成新变量”;
  sessionStorage.varName = “变量操作”;
  delete sessionStorage.varName; //删除变量
  另外一种是本地存储,当网页下次被打开的时候,你仍然可以访问上次打开该网页时存储的数据,比如本地存储的网站用户名就可以使用这种方式。
  用法和基于会话的存储一样,只是前缀名改成了localStorage
  localStorage.varName = “生成新变量”;
  localStorage.varName = “变量操作”;
  delete localStorage.varName; //删除变量
  Web Storage
  // use localStorage for persistent storage
  // use sessionStorage for per tab storage
  saveButton.addEventListener('click', function () {
  window.localStorage.setItem('value', area.value);
  window.localStorage.setItem('timestamp', (new Date()).getTime());
  }, false);
  textarea.value = window.localStorage.getItem('value');
  离线存储HTML5 Web SQL Database

  Web SQL Database 提供了基本的关系数据库功能,支持页面上的复杂的、交互式的数据存储。它既可以用来存储用户产生的数据,也可以作为从服务器获取数据的本地高速缓存。例如可以把电子邮件、日程等数据存储到数据库中。Web SQL Database 支持数据库事务的概念,从而保证了即使多个浏览器窗口操作同一数据,也不会产生冲突。

  它还引入了一套使用 SQL 来操纵客户端数据库(client-side database)的 API,这些 API 是异步的(asynchronous)。所使用的 SQL 语言为 SQLite 3.6.19。其中 SQLite 是一款轻型的数据库,占用资源非常低,支持 Windows/Linux/Unix 等主流操作系统,同时能够跟很多程序语言相结合,如 C#,PHP,Java,JavaScript 等,比起 Mysql,PostgreSQL 这两款开源的数据库管理系统来说,它的处理速度更快。目前iOS和Android平台支持运行Web SQL Database。

  var db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); //5MB
  db.transaction(function(tx) {
  tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
  });
  Web Workers
  main.js:
  var worker = new Worker('task.js');
  worker.onmessage = function(event) { alert(event.data); };
  worker.postMessage('data');
  task.js:
  self.onmessage = function(event) {
  // Do some work.
  self.postMessage("recv'd: " + event.data);
  };
  HTML5 IndexedDB:轻量级NoSQL数据库
  IndexedDB是HTML5-WebStorage的重要一环,是一种轻量级NoSQL数据库。
  w3c为IndexedDB定义了很多接口,其中Database对象被定义为IDBDataBase。
  浏览器对象中,实现了IDBFactory的只有indexedDB这个实例。

  五步创建HTML5离线Web应用

  在HTML5提供的所有炫酷功能里,创建离线缓存网页是我喜欢的一个特性,以下是五步快速创建HTML5离线Web应用的步骤
  1. 步:创建一个有效的HTML5文档,HTML5 doctype比xhtml更易于识记。
  创建一个名为index.html的文件,这里学习如何使用CSS3来策划网站布局。
  2. 新增.htaccess支持
  我们要创建的缓存页面称为manifest文件,假设你所使用的服务器是Apache,我们在创建文件之前,需要往.htaccess文件新增一个指令。
  打开.htaccess文件,该文件部署在网站的根目录下,新增以下代码:
  AddType text/cache-manifest .manifest
  该指令可以确保每一个.manifest文件文本高速缓存。如果该文件不存在,整个缓存效果就无法实现,页面也不能实现离线缓存。
  3. 创建.manifest文件
  在我们创建好了.manifest文件后,事情就变得有趣多了。创建好新文件,命名为offline.manifest,嵌入以下代码。
  CACHE MANIFEST
  #This is a comment
  CACHE
  index.html
  style.css
  image.jpg
  image-med.jpg
  image-small.jpg
  notre-dame.jpg
  现在你拥有了一个完美的manifest列表。其实原理很简单,在声明CACHE后,你可以列出自己想要离线缓存的文件。这个对于缓存一个简单的网页,已经是绰绰有余了,而HTML5的缓存有其它一些有趣的功能。
  CACHE MANIFEST
  #This is a comment
  CACHE
  index.html
  style.css
  NETWORK:
  search.php
  login.php
  FALLBACK:
  /api offline.html
  在这个示例中,manifest文件声明了CACHE,用于缓存index.html和style.css。同时,我们声明了NETWORK,用于指定不被缓存的文件,比如登录页面。
  后声明的是FALLBACK,这个声明允许将用户转入一个指定的页面,比如本例中如果不打算离线查看API资源的话,可以转向Off.html页面。
  4. 将manifest 文件链接到HTML文档中。
  在manifest文件和主要的html文档准备好了以后,你一还需要做的事情是将manifest文件链接到html文档中。
  操作方法很简单,只需在html元算中添加manifest 属性,代码如下:
  5. 测试
  一旦完成好以后,可以开始测试了。如果你使用Firefox 3.5+来访问index.html文件,你可以看到下面的图片。
  像其它的浏览器,比如(Chrome, Safari, Android 和 iPhone) 不会弹出文件缓存的相关提示,文件会自动缓存。
  Firefox: 3.5+、Safari: 4.0+、Chrome: 5.0+、Opera: 10.6+、iPhone: 2.1+、Android: 2.0+都对这种技术提供支持,IE不支持。

本文标题:五步创建成功HTML5离线WEB应用实战,责任编辑:云顶国际登录官网,来源:武汉宏鹏,于2013年02月20日11时15分发布于云顶国际登录官网。云顶国际宏鹏鲁广校区,是北大青鸟武汉电脑学校,专业IT计算机培训,拥有软件/网络/安卓/Web前端/Java课程.北大青鸟地址:光谷广场鲁巷数码港.电话:027-87807717

专业老师指导

专业老师指导

赵老师

从事IT教育培训十年有余,致力于帮助广大学子找到适合自己的专业。

培训咨询客服

培训咨询客服

陈老师

IT培训专业客服,用自己的真诚解决了无数学子的困惑。

本文地址:
文章标题:
  • 北大青鸟Java软件开发
  • 北大青鸟UI设计课程_零基础可学
  • 北大青鸟动漫设计_武汉设计学校
  • 北大青鸟数字艺术_武汉电脑学校
在线咨询
×
在线咨询更多问题

如您有任何疑问
在线咨询随时为您解答或拨打咨询热线:17740513250

×
  • 姓 名*
  • 手 机*
  • QQ号/微信号
  • 所报学科 *
  • 其他备注
  • 温馨提示:请保持手机畅通,咨询老师将为您提供专属的一对一报名服务。