最近弄HybridApp的一些心得

SDK的项目折腾了一个月,终于快到收获的时候,把这过程中的一些心得体会记录一下吧~

manifest并不是很好用

资源文件的更新,是在浏览器下次刷新的时候才会生效。

包含manifest的Html主文件默认会被缓存,类型是Master Explicit。

在测试的时候,我还发现,Master Explicit的更新机制,和其他资源文件并不完全相同,有时候修改manifest文件,浏览器不更新主Html文件。所以我平时都干脆把主Html文件,也放入到manifest的cache列表中,保证最多两次刷新浏览器,主Html文件可以得到更新。

建议:

如果想用好manifest机制来做离线缓存功能,最好手动把applicationCache对象中的缓存更新、刷新浏览器的功能实现,便于日后文件更新,相关信息可以看以前的文章

Hybrid App的离线功能,还可以配合localStorage、WebViewCache等搭配实现,可控性更佳。

Hybrid App测试不容易

因为我没做个原生App的开发,对Eclipse不熟练,App底层的那套测试方法我都不懂,就自己琢磨出一种测试的方法。

JS解耦测试:

把JS流程中的很多判断条件,统统写在js的公共变量里面,这样的话,js脱离native环境,可以通过浏览器来修改每个公共变量,来模拟App的各种事件。

善用浏览器中的中端、单步、Profiles等测试功能,做到在与Native整合的之前,就测试好大部分的js代码。

20120903215940.png

JavaScript,一切皆对象

估计说出来也没多少人相信,在项目开始之前,我几乎没有写原生JS的经验。不过,人的潜能总是被逼出来的,一个月下来,我从最简单的写过程JS,到现在掌握了对象的继承等。

在JavaScript的世界中,一切皆对象(请允许我装13一下),但是,这里的对象,并不是我们平常所说的类的实例化后的对象。

20120903220537.png

从上面的截图可以看到,定义一个空对象obj,它的prototype是Object。JavaScript的继承都是通过对象的prototype来实现的。

Private Methods的实现:

在一个闭包空间里面,通过 function __privateFunc() {}来定义私有方法。公共方法使用上面的方法暴露给window。

对于JavaScript的感触,还有很多很多,下次再开篇文章来写写吧。

Html5之离线Web应用程序

2013-05-03更新:采用事件监听来优化二次刷新问题。

Html5一大新特性、同时也是非常吸引人的特性,就是其离线功能。它让Web从online延伸到了offline领域。

通过浏览器兼容性检查我们可以看到,除了IE9,几乎是全平台兼容此特性,让我们放开手脚去实现。

三部曲

1、准备manifest文件,格式如下。需注意里面的路径为相对manifest文件的路径

manifest编辑好后,保存为manifest.appcache。(很多老教程让我们保存成cache.manifest格式,不过我最近尝试过,要保存成appcache才能生效)

2、给HTML文档头部添加manifest清单支持

3、添加MIME类型,让服务器支持.appcache的文件类型

网上Apache的修改方式一大堆,我给来个nginx的,环境是Ubuntu 12.04

一些注意事项

上述三步之后,你就可以给你的应用添加离线功能,但是你会觉得用起来很别扭(起码一开始我是这样觉得的),有下面一些情况需要注意:

1、本地缓存更新时刻

浏览器第一次打开html文件的时候,访问manifest,下载所有缓存文件。

第二次打开html文件的时候,不论该html是否被添加到manifest的CACHE选项中,该html实际上已经被缓存,故此次打开,是加载的本地html。浏览器检查网络manifest是否有更新,如果有,下载新的manifest文件,并重新下载所有缓存内容。此时,新的本地缓存不会被显示,而是等待下次刷新页面后,才会显示。

2、使用Location.reload()来手动刷新页面

旧方案(不推荐):

每5s检查一次,并询问用户时候刷新页面,刷新页面后,新的本地缓存被显示出来。

新方案,监听updateready事件(推荐使用):

资料来源:http://www.html5rocks.com/zh/tutorials/appcache/beginner/

3、FALLBACK中的URL遵循同源规则,必须与manifest文件同源

我被这个问题纠结了好几天,一直搜索都找不到原因,一开始还怀疑是FALLBACK不支持ajax请求。

今天终于找到问题的原因:

Important All FALLBACK URLs must have the same origin as the manifest file. That is, they must be in the same domain and use the same access scheme.

参考资料