html5实例解析:开发web app的过程


html5带给我们的不仅仅是更多语义丰富的标签,还有更多更牛逼的特性,比如“离线存储”。 对于台式电脑来说,或者它并没有带来什么惊喜,但是对于移动设备来说离线存储简直就是一个神迹。对于任何拥有支持离线存储浏览器的移动设备,比如iphone,ipod touch,离线存储使得web前端工程师可以很容易的针对它们开发应用程序。

前面吹嘘了一段,不过说实在的,html5本地存储就目前来说还是很受限的。其一,浏览器限制,目前只有 Safari 3.1 and later, and in iPhone OS 2.0 and later. 提供了javascript database 原生支持,不过也有 Taffy DB 可以曲线救国。(还没有用过,不敢妄下结论。)。 其二,服务器端需要修改配置,旦如果是自己的服务器就很简单了。

下面就以一个简单的offline web app-note book 为例,记录一下为iphone/ipod touch开发web app的过程。不是经验,只是初探。

  1. 建立适合 iphone/ipod touch 的UI
  2. 数据的本地存储
  3. 文件的本地存储
  4. 完善这个app (不打算完善它了,有时间做一个实用的app专门介绍 iphone web app 的开发吧)

首先,适合iphone/ipod touch 的UI 它并不是本文的重点,有兴趣的同学可以移步这里 。这里只强调一点:你默认做的页面,放到iphone看会变的很窄,字很小。这是因为iphone用它320px宽的屏幕显示了一个默认980px宽的页面,你的内容被按比例缩小了。要解决这个问题很简单,只要在html的head区域加一个meta标记,具体语法请看这里 。 也就是这样:

这个问题解决之后我们就可以肆意的使用html5和css3来打造界面了,(针对设备开发可以不考虑兼容性,真是畅快淋漓呀。)

我大概做了个丑陋的界面:

html代码CSS代码 (其实你可以不用看,最后有打包的代码)

完成了UI,我们就需要对数据进行处理了。

在开始“数据”的本地存储之前,我们先来了解一下client-side database storage API:

the client-side database storage API allows web applications to store structured data locally using a medium many web developers are already familiar with – SQL.--webkit blog

目前只有webkit核心的浏览器支持这一特性。你甚至都不能在w3c的html5工作草案中找到 (cs-db)client-side database 的详细描述。

首先我们要尝试建立一个数据库链接:

try {
	if(!window.openDatabase){  //检测浏览器是否支持cs-db
		alert('not supported cs-db!');
	} else {
		var shortName = 'noteDB';
		var version = '1.0';
		var displayName = 'Note book database';
		var maxSize = 65536;
                //创建一个数据库
		var db = openDatabase(shortName,version,displayName,maxSize);
	}
} catch(e){  //尝试捕获错误
	if (e == 2){
		alert('Invalid database version.');
	} else {
		alert("Unknown error "+e+".");
	}
}

如果以上代码无误,你就会在safair或者chrome的开发者工具中看到这个数据库:

在右侧区域可以直接执行一些sql查询,但是我总是得到 “发生意外错误“0”。” 这样的结果,不知道是不是RP的问题。

接下来就是创建表,以及执行一些sql语句进行增删改查。

js执行sql的基本语法大致是这样的:

db.transaction(
	function (transaction){
		transaction.executeSql(sqlquery,[],dataHandler, errorHandler);
	}
);

其中transaction.executeSql中参数依次为:sql查询字符串,传递给sql查询的参数,数据处理句柄,错误处理句柄。其中只有第一项为必选,其余都为可选项。

第二个参数的用法大致是这样的:

transaction.executeSql("UPDATE people set age=? where name=?;",[ age, name ]);

查询字符串中的“ ?” 会被后面数组中的变量依次替换。

注意:以上我用了“大致”这个词,因为没有官方的文档W3C-web database),只是从一些其它文献以及自己判断得来,若有错误还请指正。

下面我们创建一张用来存储note的表:

db.transaction(
	function (transaction){
		transaction.executeSql(
                'CREATE TABLE IF NOT EXISTS notes (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,titel TEXT, note TEXT NOT NULL, date DATE);',errorHandler);
	}
);

errorHandler是这样的:

function errorHandler(transaction, error){
	alert('Error was: '+ error.message +'(Code:'+ error.code +')');

	var fatal_error = true;
	if(fatal_error){
		return true;
	}
	return false;
}

error.message 是一段错误描述,error.code 是错误代码 (详情)

再看看如果从db中检索出数据并显示到页面上:

db.transaction(
	function (transaction){
		transaction.executeSql("SELECT * from notes;",[],dataHandler, errorHandler);
	}
);

function dataHandler(transaction, results){
	var string = "";
	for (var i = 0; i" + row['titel'] + "

";
	}
	var listConts = $('listCont');
	listConts.innerHTML = string;
}

可以看出,基本上和php之类后端语言操作大同小异。
更多代码可查看示例程序,不再一一罗列。

完成了数据的本地存储,就要将文件存储也搞定。为了实现文件的本地存储,html5搞了一个叫 manifest 的文件,这个文件就是一个缓存清单,把需要缓存在客户端的文件告诉浏览器。manifest是一个mimetype为 text/cache-manifest 的 纯文本文件。注意,这点很重要。

下面是一个manifest文件的例子:

NETWORK, CACHE, FALLBACK 都是可选的。

manifest文件必须以 CACHE MANIFEST 开头

其后需要下载并缓存的文件使用相对或绝对路径皆可,每个资源一行。

NETWORK段表明一些在线资源所在的域,所有这个域下的资源都不会被缓存,即使客户端处于离线状态,也会尝试去请求基于这些域的资源。

CACHE段还不是很明白

FALLBACK段下面每行都包含两部分内容,用空格分隔。后半部分是当前半部分路径不能访问时的备选路径(很拗),如上图就是,如果demoimages目录不能访问时,尝试访问images目录。

manifest文件介绍就到这里,下面创建我们自己的manifest文件:

我们只需要缓存两个文件即可,nbStyle.css 和 nbScript.js。还有index.html 本身,由于manifest文件会默认缓存引用自己的文件,所以index.html 不能在缓存列表中写出来:

CACHE MANIFEST
# version: 2010-01-20 22:30

nbStyle.css
nbScript.js

就是这么简单了,我们将他保存为 notebook.manifest 文件,并和其它文件一起放在根目录。

最后一个问题,如果将notebook.manifest的mimetype标识为 text/cache-manifest 类型呢?我知道有两种方法:

1. 在站点根目录建立 .htaccess 文件,在其中声明.manifest 的mimetype ,这个需要修改下服务器的配置文件,我没有尝试成功。

2. php环境在apache目录寻找一个为 “mime.types” 的配置文件,在其最后添加一行:

text/cache-manifest            manifest

然后在index.html文件引用它:

搞定了这些东西,你就可以尝试用webkit访问你的应用,然后离线,再尝试使用它,程序应该也可以照常运行。

至此,html5的离线存储基本介绍完了,下面附上打包的代码,代码本身没有什么难度,只是我写的太烂了:

代码下载

其实还远没有完,缓存下来的文件如果被更新了怎么办呢?如何通知客户端更新缓存其实也有api,慢慢的再探索吧。非常期待与大家探讨html5相关的问题。



相关阅读:
PHP基础教程(10):PHP循环
javascript字典探测用户名工具
MVC+Jquery开发B/S系统:③表单提交
Linux下用chmod命令改变权限
预加载css或javascript的js代码
Linux下Tomcat 80端口被占用的解决办法
javascript编程:编程的陷阱(gotcha)
Windows和Linux系统共存 完美解决方案
asp.net 简单实现禁用或启用页面中的某一类型的控件
随鼠标移动的图片或文字特效代码
css2.1如何作出多重背景和边框效果
Linux系统下文件保护与彻底删除技巧
教你通过sql语句获取数据库的基本信息
Cacls 显示或修改任意访问控制列表 (DACL) 文件
快速导航

Copyright © 2016 phpStudy |