我知道你已经抑郁一年了。所有的Objective-C核心开发人员都在为iPhone编写应用程序。你甚至可能尝试过阅读一两个关于iPhone开发的教程，但它的c -或它的一种形式——真的很难学。
我并不是说你应该放弃这个目标:你最终可以得到它。但与此同时，你还可以做点别的事。开发一款应用程序看起来很复杂，但花钱请人帮你做似乎更容易。
然而，你可以避免成本只要按照我提供的说明去做就可以了。你可以创建一个与所有其他应用共存的原生应用，在大多数情况下，它将是一个完美的模仿。你只需要跟着我的设计指导方针你很快就会拥有一个功能完整的HTML5 iPhone应用程序!
您可以使用您可能已经拥有的技能集:HTML(5)、CSS和JavaScript来完成此任务。我会向你展示如何创建一个离线HTML5 iPhone应用程序．更具体地说，我将带领你体验设计《俄罗斯方块》游戏的过程。
离线?
当我说“离线”时，我在说什么?嗯，这意味着我们有一个自定义的图标，一个自定义的启动屏幕，一个本地的外观和感觉，你可以使用应用程序，即使手机没有连接到互联网。当离线时，应用程序应该像正常的本地移动应用程序一样，尽可能地发挥功能。
你的应用的主要目标是创造它尽可能的移动友好．这是一个专门针对iphone的教程，但这些技术中的大多数适用于所有拥有支持html5的浏览器的手机。是的，我是认真的，看看下面的图片。
它没有URL栏，底部也没有导航。它看起来就像一个原生移动应用程序。
Prework
您需要访问一个服务器，在那里您可以更改HTTP头信息看你的档案。
这是因为我们需要利用HTML5的离线缓存(后面会详细介绍)。Apache在这方面做得很好，你可以在。htaccess文件中添加一些东西，它就可以工作了。这是一个使用htaccess修改HTTP头的教程。
你需要做的另一件事是在iPhone上打开Safari浏览器中的调试栏。进入设置。app > Safari > Developer，然后打开调试控制台。这将帮助您发现潜在的JavaScript错误。
一旦你构建了自己的应用，你就应该关闭这一功能，以便在测试HTML5 iPhone应用时获得完整的体验。
关于应用程序
图标和启动界面
图标的尺寸为57px * 57px。iPhone会使你的图标圆角，创建投影，并为你使用的任何图标增添光泽。
它应该是PNG或JPG格式。这是我在俄罗斯方块游戏中使用的工具。
启动屏幕需要320px x 460px，也应该是PNG或JPG格式。
下面是我用于启动屏幕的内容。
在你开始之前有一些建议
保持小、稀疏和简单。
- 小:这是一种移动应用程序开发，所以即使你要缓存你的东西，保持你的文件大小精简仍然是一个聪明的主意。
- 稀疏:你应该尽量减少你要处理的文件数量。
- 简单:从一些简单的想法开始，然后执行。
通过保持小范围，你可以更快地完成工作。
应用程序缓存
这是一个新标准，你可以在这里阅读规范。应用程序缓存允许浏览器提前确定网页工作所需的所有文件。它将缓存这些文件(有时会出错)。
这个文件的语法很简单:只要列出你的文件的位置在任何绝对(例如。)或相对于清单文件(/ picture.png)．浏览器将使这些文件处于离线状态。
您还可以列出一些不应该被缓存的url，但这与我们的离线应用程序无关(如果您感兴趣，请阅读文档)。整个过程中一个棘手的部分是清单(需要离线缓存的文件列表)必须通过文件类型标头设置为文本/清单．这就是为什么你需要访问一个可以设置HTTP头的web服务器。
屏幕大小
在设计应用程序时需要注意:当你处于应用程序模式时，你的屏幕尺寸是320px x 460px。当你在web模式下，它的屏幕大小是320px x 356px。这可能会影响离线HTML5应用的用户界面。
在这里你可以看到两者的区别。
超文本标记语言
这是一个真正的浏览器，所以你的HTML是完全一样的。iPhone浏览器也是HTML5的前沿，所以要深入研究规范。
欲了解更多详细信息，请查看Safari开发者的角落:
- Safari HTML参考
- Safari CSS参考
让我们开始编码
应用程序从定义标记开始。这是我的《俄罗斯方块》应用的标记。
<！DOCTYPE html>offline俄罗斯方块 < script type="text/javascript" src="tetris.js">
首先，注意文档类型．
HTML5不是很棒吗?的manifest = " cache.manifest "上的物业< html >标记是浏览器如何知道我们想要离线缓存这个网页。在我们的HTML5页面上有苹果的专有标记。
每一项的简要说明:
apple-mobile-web-app-capable:这是另一个提示，我们想成为一个离线应用程序。apple-mobile-web-app-status-bar-style:当应用程序离线时，隐藏状态栏和导航栏。apple-touch-icon:这是指向想要成为图标的图像的指针。apple-touch-startup-image:这是一个指向启动映像的url。
还要注意，应该把CSS放在顶部，JavaScript放在底部(最佳实践在这里仍然适用)。
CSS
它和普通的网页几乎一样。有一些具体的webkitCSS规则可以用来做一些很酷的事情，如动画，但这是一个快速和肮脏的指南，这超出了本文的范围。
CSS只是简单的简。
体{溢出:隐藏;背景:# d7d7d7;保证金:0;填充:0;} #俄罗斯方块{宽度:320px;身高:460 px;背景:# 000;｝
风格真的很好div元素，以确保它适合iPhone的视口。
JavaScript
我使用了一个修改过的JavaScript版本道尔顿Ridenhour；我发现它开着Github．
JS最初是为一个普通的web浏览器编写的。我需要做的唯一修改就是支持没有键盘。一般来说，JS函数在iphone上运行得很好——当然也有例外。
想想像鼠标悬停这样的事件，它存在于iPhone上，但我不确定当你没有标准的指向设备(如鼠标)时，它是否有帮助。Quirksmode发表了一篇文章iPhone上的事件这真的很有帮助。当你有了所有这些，你可以通过打开你的index . html在iPhone上，你应该可以看到所有东西都在工作。
然后，下一步是服务器它从一个实际的web服务器可以设置正确的设置cache.manifest．然后你就可以把它添加到主屏幕上，拥有所有的附加功能，并看到离线模式。你可以在下面看到我设置的工作版本:
- http://tetris.alexkessinger.net
奖励部分:离线数据
除了能够将需要的文件保持离线之外，还可以将用户数据存储在离线数据库中。
针对每个用户和/或每个页面数据有两种主要的api。第一个是localStorage．localStorage，是一个非常简单的API，易于使用的键值存储。
localStorage。dataToStore = 5;console.log (localStorage.dataToStore);/ / 5
例如，您可以使用它来存储用户的分数。第二个实际上是一个离线SQL引擎webdatabase．api稍微高级一些。
这里有一点你们会看到。
//尝试获取一个数据库对象var db;try {if (window.openDatabase) {db = openDatabase("NoteTest"， "1.0"， "HTML5数据库API示例"，200000);if (!db) alert("打开磁盘上的数据库失败。这可能是因为版本是/坏的，或者这个域的配额中没有足够的空间”);} else警报("无法打开数据库。请在启用此功能的情况下每晚尝试WebKit”);} catch(err){} //查看是否需要初始化DB DB .transaction(function(tx) {tx. executesql ("SELECT COUNT(*) FROM WebkitStickyNotes"， []， function(result) {loadNotes();}，函数(tx，错误){tx. executesql ("CREATE TABLE WebKitStickyNotes (id REAL UNIQUE, note TEXT, timestamp / REAL, left TEXT, top TEXT, zindex REAL)"，[]，函数(结果){loadNotes();});});});//插入一个测试注释。var note = {id: "1"， text:" This is a test note"， timestamp: "112123000"， left:10, top:10, zIndex:2};db。transaction(function (tx) {tx. executesql ("INSERT INTO WebKitStickyNotes (id, note, timestamp, left, top, zindex) VALUES / (?， ?， ?， ?， ?， ?)”，[注意。id,请注意。text, note.timestamp, note.left, note.top, note.zIndex]); }); // Get all the notes out of the database. db.transaction(function(tx) { tx.executeSql("SELECT id, note, timestamp, left, top, zindex / FROM WebKitStickyNotes", [], function(tx, result) { for (var i = 0; i < result.rows.length; ++i) { var row = result.rows.item(i); var note = new Note(); note.id = row['id']; note.text = row['note']; note.timestamp = row['timestamp']; note.left = row['left']; note.top = row['top']; note.zIndex = row['zindex']; if (row['id'] > highestId) highestId = row['id']; if (row['zindex'] > highestZ) highestZ = row['zindex']; } if (!result.rows.length) newNote(); }, function(tx, error) { alert('Failed to retrieve notes from database - ' + error.message); return; }); });
总结
离线HTML应用程序可以做很多事情。
《俄罗斯方块》之类的游戏甚至是可行的，但你可能需要考虑你想做什么，并确保它适合离线应用。《雷神之锤3竞技场》可能不适合。绝对是一个待办事项列表应用。
让成千上万的应用程序绽放!
资源
- W3C离线应用程序缓存文档
- 如何在iPhone上创建离线web应用程序
- HTML5离线缓存safari
- Backchannel: iPhone的离线Web应用程序
- iPhone离线网络应用-一个iPhone应用程序的办公桌。
- John Resig对离线事件的讨论
- 开始使用iPhone Web应用程序
相关内容
- 10个有用的移动计算小工具
- 快速浏览手机网页设计
- 远程设计师:如何在路上工作
- 相关类别：Web开发而且用户界面
