你可以用一些可能已经拥有的技能:HTML5, CSS及 JavaScript。
我会教你如何利用 HTML5创建一个离线的iPhone应用程序。更具体地说,我将带你浏览建设俄罗斯方块游戏的全过程。
本文作者: Alex Kessinger
翻 译: RIA一起学
我的 QQ:908315256
我的邮箱: mayaboy0219@126.com
离线?
我说过“离线”吗?那么,这意味着我们要有自定义 icon 图标、自定义启 动画面、与 系统一致的外观,即使手机没有连接到互联网,你也可以使用该应用程序。
该应用程序的 功能是:它就像普通的本地移动应用程序那样可以脱机使用。
这是一个专门为iPhone编写的教程,但这些技术适用于所有那些带有支持HTML5的 浏览器的手机。
是的,我的意思很明确。看看下面的图片,没有地址栏,没有底部导航看起来就和本地移动应用程序一样。
Prework
你需要访问服务器,在这里你可以更改文件的HTTP 标头。因为我们必须考虑HTML5的脱机缓存优势。
阿帕奇服务器真的很不错,你只需将代码添加到“.htaccess”文件,他就能工作。这里是一篇关于使用htaccess修改HTTP标头的文章。
你要做的另一件事是在iPhone单元里启用Safari浏览器的调试栏。在你的iPhone理依次访问设置> Safari > 开发,拖动调试控制按钮。这将帮助你发现潜在的JavaScript错误。
一旦建立好应用程序,当你测试完基于HTML5的iPhone应用程序并获得充分的经验后,你应该关闭这个功能。
关于应用程序
图标和启动画面
图标必须为57px × 57px。
iPhone会为你的图标添加圆角,创建阴影,并添加光泽。
图标必须是PNG或JPG格式。
一下是我的俄罗斯方块游戏应用程序的图标。
启动画面必须是320px × 460px,也必须是PNG或JPG格式。
以下是我的应用程序的启动画面。
开始前还要知道的小技巧
无非是小巧、疏松和简单
应用程序缓存
这是一个新的标准,你可以在这里阅读规范。
应用程序缓存允许浏览器事先确定需要工作的网页的所有文件。
这将缓存这些文件(有时会有点小故障)。该文件的语法很简单:只要列出文件的绝对地址(例如:http://yourwebserver.com/picture.png)或相对地址(例如:/picture.png),浏览器就可以让这些文件保持脱机。
你可以列出不需要被缓存几个网址,但对于我们的离线应用程序来说没什么关系(如果你有兴趣,可以阅读这篇文章)。
这个工作比较棘手的部分是清单(需要被离线缓存的列表文件)要把通过的文件类型的表头设为text/manifest。这就是为什么你需要访问可以设置HTTP头的Web服务器。
屏幕尺寸
设计应用程序的快速说明:当你在应用程序模式下,你会有一个320px× 460px大小的屏幕空间。而当你在网页模式下,仅有一个320px ×356px大小的屏幕空间。这可能会影响你的HTML5离线应用的用户界面。
下图你可以看到两者的差异。
HTML
这是真正的浏览器,所以HTML的显示同电脑里是完全相同的。iPhone浏览器在支持HTML5方面也走在前列,因此要认真研究规范。
为了更深入细节,这里提供了Safari浏览器开发文档:
让我们来编代码吧
应用程序通过你定义的标记启动。这里的标记是我的俄罗斯方块应用程序。
<!DOCTYPE html>
<htmlmanifest="tetris.manifest">
<head>
</head>
<body>
</body>
</html>
首先,请注意DOCTYPE。HTML5是不是很棒?
<html>标签里的manifest="cache.manifest"属性是告诉浏览器怎样获取我们要缓存的脱机网页。
这里是关于苹果专有的HTML5标记的一个简短说明:
另外请注意,你应该把CSS放在顶部,把JavaScript放在底部(最佳做法在这里仍然适用)。
CSS
几乎与一个正常的网页相同。有一些特定的CSS规则网络工具包,你可以使用它们做一些非常酷的事情,比如动画。但这是速成指南,这些内容不在讨论范围内。
CSS很平常
body {
}
#tetris {
}
样式之应用于网页的div元素,以确保其在iPhone屏幕上的大小合适。
JavaScript我用了DaltonRidenhour的 JavaScript改进版本;我是在Github找到的。这个JS最初是为普通浏览器写的。我不得不为了支持触摸屏而做出修改。
一般情况下,JS在iPhone中的工作不过是优化,但也有例外。想想看一个类似于鼠标悬停的事物,这个事件存在于iPhone中,但当你没有标准的指针设备(如鼠标)时,我不知道是否能有所帮助。Quirksmode发布的一篇关于iPhone事件的文章真的很有帮助。
准备妥当后,你就可以测试了,但我想在iPhone中打开index.html时,你应该能够看到所有的工作。
然后,下一步是从可以正确设置cache.manifest的真正的网络服务器上将其转移到服务器。
然后,你就可以将其添加到主屏幕并以离线模式查看。
你可以看看我做完的版本:
离线数据
为增强保持脱机文件的能力,你可以将用户数据存储在脱机文件数据库中。有两个主要的API用于每个用户数据或每页数据。首先是localStorage.localStorage,这是一个绝对简单易用的键值存储API。
localStorage.dataToStore = 5;
console.log(localStorage.dataToStore); // 5
你可以利用它存储用户得分,例如。
第二个实际上是个脱机SQL引擎,一个网络数据库。该API虽小巧但更加先进。一会你就会见识到。
// Try and get a database object
var db;
try {
} catch(err) { }
// Check and see if you need to initalize the DB
db.transaction(function(tx) {
});
// Insert a test Note.
var note = {
};
db.transaction(function (tx)
{
});
// Get all the notes out of the database.
db.transaction(function(tx) {
});
结语
有很多可以做离线HTML的应用程序。游戏,比如俄罗斯方块,甚至有可能是雷神3。但你需要明确想要做的东西,并确保其是正确的离线应用程序。