离线iOS应用的HTML 5制作指南

你或许已沮丧许久。众多Objective-C开发高手凭借制作iOS应用取得显著成就。你或许尝试阅读iOS应用开发指南,但Objective-C或类似语言确实没那么简单。

我不是说应该放弃目标,你最终定能够实现。但你同时还有其他选择。

凭借已有技术,你完全能够胜任如下内容:HTML 5、CSS、和JavaScript。

作者会详细说明如何制作离线HTML 5 iOS应用。更具体地说,作者将演示《俄罗斯方块》游戏制作过程。

离线应用

所谓离线是什么意思?是指我们拥有定制图标、定制启动屏幕以及原生外观和风格,你能够在手机没连网情况下使用应用。

应用离线功能应保持一致,就像正常原生手机应用。

此开发指南是就iPhone而言,但其实也适用采取HTML5浏览器的手机设备。

是的,不妨参考下图,应用底部没有URL栏和导航图标,看起来就像个原生手机应用。

 

离线iOS应用的HTML 5制作指南_第1张图片

final result html5 iphone from sixrevisions.com

预先准备工作

你要能够访问服务器,以改变文件HTTP Headers信息。原因是我们需充分利用HTML5的离线缓存功能。

Apache在此表现突出,你只需在.htaccess文件中添加内容便能够顺利实现操作。这是使用htaccess修改HTTP标题信息指南。

另一需要完成的任务是确保iPhone 浏览器Safari设有调试栏。进入iPhone Settings.app> Safari >Developer,启动调试控制台。这能够帮你辨识潜在JavaScript错误。

完成应用创建后,应关闭该功能,这样你才能在测试HTML5 iPhone应用过程中获得完整体验。

 

离线iOS应用的HTML 5制作指南_第2张图片

debug console iphone from sixrevisions.com


 

应用方面

图标和启动屏幕

图像大小为57 X 57像数。

iPhone将会绕行图标四角,创造阴影效果,给图标添加光泽。

图标应采用PNG或JPG格式。

以下是我制作俄罗斯方块游戏采用的图标。

iphone icon from sixrevisions.com

iphone icon from sixrevisions.com

启动页面应是320 X 320像数,且需采用PNG或JPG格式。

下面是我采用的启动屏幕。

 

离线iOS应用的HTML 5制作指南_第3张图片

opening screen from sixrevisions.com

项目开始前的几大建议

规模小、数量少和构思简单。

◆ 规模小:这是开发手机应用,所以即便能够缓存内容,压缩文件大小依然是明智之举。

◆ 数量少:应尽量减少处理文件数量。

◆ 构思简单:先从简单想法入手。减少覆盖范围,以便项目能够快速落实。

应用缓存

这是个新标准,我们这里将详细说明。

应用缓存让浏览器能够提前决定网页所需文件,以顺利实现网页运作。

应用会存储这些文件。文件语法很简单:罗列文件在文件清单(/picture.png)中的绝对(游戏邦注:例如http://yourwebserver.com/picture.png)或相对位置。浏览器离线状态也会保存这些文件。

你也可以罗列少量不应保存的URL链接,但这和离线应用无关。

整个操作最关键的部分是清单文件(文件应进行线下保存)需以Header格式传输。这就是为什么你需访问能够设定HTTP标题的网页浏览器。

页面大小

设计应用的一个注意事项:应用模式的页面大小是320X460像数。网页模式的页面大小是320X356像数。这会影响离线HTML5应用的用户界面。

下面我们就来逐一阐述它们不同之处。

 

iphone ui side comp from sixrevisions.com

HTML

这是个真实浏览器,所以HTML完全相同。iPhone浏览器也是处在HTML5前端。接着就来看其中具体要求。

想要获悉更多深入细节,参考Safari Developer的以下两个内容:

◆ Safari HTML Reference

◆ Safari CSS Reference

应用编码

应用首先要定义标记。下面就是我制作的《俄罗斯方块》游戏的标记。 

首先注意文档类型,HTML5表现是否出色?

标签的manifest=”cache.manifest”属性就是浏览器判断我们离线网页存储方式的依据。

以下是苹果在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不过是普通页面。

 

离线iOS应用的HTML 5制作指南_第4张图片

CSS fom sixrevisions.com

这个页面是网页区分元素,确保能够匹配iPhone视口。

JavaScript

我使用DaltonRidenhour修订版JavaScript,我是在Github发现的。JS原本只瞄准标准网页浏览器。我唯一要调整的是让其不再要求具备关键字。

总之,JS功能在iPhone设备运作良好(游戏邦注:虽然有少数例外情况)。不妨看看iPhone设备的鼠标指向功能,但若没有标准定点设备(如鼠标),其功能显然无法实现。

把握所有内容后,你便能够进行测试,打开iPhone设备的index.html文件,便实现运作。

接着就是使用真实网页浏览器(游戏邦注:其能够设置cache.manifest背景)提供服务。

然后你就能把该功能添加至主页面,植入所有附加内容,查看离线模式。



 

离线数据

除具备离线保存功能外,你还要能在离线数据中库存储用户数据。每个用户或页面数据都有两个主要API(游戏邦注:应用程序界面)。首先是localStorage,这是个具备简单API的便捷键值商店。例如,你能够使用其存储用户积分。

 

localStorage from sixrevisions.com

localStorage from sixrevisions.com

其次就是离线SQL引擎,这是网页数据库。其API更先进,以下部分仅供参考。

  1. // Try and get a database object 
  2.  
  3. var db; 
  4.  
  5. try { 
  6.  
  7. if (window.openDatabase) { 
  8.  
  9. db = openDatabase(“NoteTest”, “1.0″, “HTML5 Database API example”, 200000); 
  10.  
  11. if (!db) 
  12.  
  13. alert(“Failed to open the database on disk. This is probably because the version was / 
  14.  
  15. bad or there is not enough space left in this domain’s quota”); 
  16.  
  17. } else 
  18.  
  19. alert(“Couldn’t open the database. Please try with a WebKit nightly with this feature enabled”); 
  20.  
  21. } catch(err) { } 
  22.  
  23. // Check and see if you need to initalize the DB 
  24.  
  25. db.transaction(function(tx) { 
  26.  
  27. tx.executeSql(“SELECT COUNT(◆) FROM WebkitStickyNotes”, [], function(result) { 
  28.  
  29. loadNotes(); 
  30.  
  31. }, function(tx, error) { 
  32.  
  33. tx.executeSql(“CREATE TABLE WebKitStickyNotes (id REAL UNIQUE, note TEXT, timestamp / 
  34.  
  35. REAL, left TEXT, top TEXT, zindex REAL)”, [], function(result) { 
  36.  
  37. loadNotes(); 
  38.  
  39. }); 
  40.  
  41. }); 
  42.  
  43. }); 
  44.  
  45. // Insert a test Note. 
  46.  
  47. var note = { 
  48.  
  49. id: “1″, 
  50.  
  51. text:” This is a test note”, 
  52.  
  53. timestamp: “112123000″, 
  54.  
  55. left:10, 
  56.  
  57. top:10, 
  58.  
  59. zIndex:2 
  60.  
  61. }; 
  62.  
  63. db.transaction(function (tx) 
  64.  
  65.  
  66. tx.executeSql(“INSERT INTO WebKitStickyNotes (id, note, timestamp, left, top, zindex) VALUES / 
  67.  
  68. (?, ?, ?, ?, ?, ?)”, [note.id, note.text, note.timestamp, note.left, note.top, note.zIndex]); 
  69.  
  70. }); 
  71.  
  72. // Get all the notes out of the database. 
  73.  
  74. db.transaction(function(tx) { 
  75.  
  76. tx.executeSql(“SELECT id, note, timestamp, left, top, zindex / 
  77.  
  78. FROM WebKitStickyNotes”, [], function(tx, result) 
  79.  
  80.  
  81. for (var i = 0; i < result.rows.length; ++i) { 
  82.  
  83. var row = result.rows.item(i); 
  84.  
  85. var note = new Note(); 
  86.  
  87. note.id = row['id']; 
  88.  
  89. note.text = row['note']; 
  90.  
  91. note.timestamp = row['timestamp']; 
  92.  
  93. note.left = row['left']; 
  94.  
  95. note.top = row['top']; 
  96.  
  97. note.zIndex = row['zindex']; 
  98.  
  99. if (row['id'] > highestId) 
  100.  
  101. highestId = row['id']; 
  102.  
  103. if (row['zindex'] > highestZ) 
  104.  
  105. highestZ = row['zindex']; 
  106.  
  107.  
  108. if (!result.rows.length) 
  109.  
  110. newNote(); 
  111.  
  112. }, function(tx, error) { 
  113.  
  114. alert(‘Failed to retrieve notes from database – ‘ + error.message); 
  115.  
  116. return; 
  117.  
  118. }); 
  119.  
  120. });


总结

离线HTML应用有很多可供挖掘的空间。诸如《俄罗斯方块》之类的游戏已成为可能。你最好想想自己想要制作的内容,确定其是否适应离线应用模式。《Quake3 Arena》显然是行不通的.


你可能感兴趣的:(离线iOS应用的HTML 5制作指南)