使用 PhoneGap 创建应用程序： 经验教训
创建日期
17 September 2012
页面工具 |
乍看上去，PhoneGap 提供了一个非常简单的工具，可以帮助 Web 和移动开发人员使用一个代码库迅速让他们的应用程序进入应用程序商店。 在本文中，我将深入介绍如何通过 PhoneGap 来利用一些技巧，帮助您更快地开发和生成更好的应用程序。 在本文中，我会分享在使用 PhoneGap 为 Android 和 iOS 设备开发流行的社交饮酒应用程序，Untappd 时所学习到的经验。
让我们面对现实吧，我们都知道自己为什么要使用 PhoneGap： 这是市场上最好的工具之一，无需学习新的语言，就可以将移动和基于 Web 设计的应用程序传输到原生的应用程序商店。 与 HTML5 函数相比，PhoneGap API 简单且易于使用。 PhoneGap API 使开发变得更简单，但是，功能强大就意味着责任巨大。
在开发不需要数据连接和提供静态信息的简单应用程序时，PhoneGap 解决方案总是会获得成功。 它做了自己应该做的工作： 它使 Web 开发人员可以使用 HTML5、CSS 或 JavaScript 构建原生应用程序。 但是，当您添加更复杂的 CSS3 元素、大量转换和支持的多种设备（比如 iOS 和 Android）时，它就会让您意识到，您必须消除一些步骤以避免压力过大。
通过 PhoneGap 的开发，我学到了很多技巧，可以让 PhoneGap 应用程序良好执行，甚至优于其原生应用程序。 在开发 PhoneGap 应用程序时，有些 Web 开发人员忽略了一个重要的问题： 我们忘记了，我们的应用程序将在 CPU 和内存能力远低于桌面的设备上运行。
当您第一次看到 PhoneGap 网站时，它向您展示的最强大的功能是，能够将一个代码库发布到多达七个不同的应用程序商店。 虽然这是千真万确的，但了解您打算作为原生应用程序支持的这些设备的设计和开发原则，这是很重要的。
首先且最重要的是，PhoneGap 应用程序的操作和感觉必须与用户对原生应用程序（而不是 Web 应用程序）的期望类似。 例如，不需要用户“等待”执行操作，比如好友请求，或“关注”某种东西。 理想情况下，让用户在您的应用程序中执行他们的业务，而不会显示可怕的“正在加载符号”。 Instagram 在这方面做得很棒，尤其是在发布照片方面。 一旦用户选择了筛选器，Instagram 就开始将照片上传到其服务器。 用户仍然必须输入标题、位置和共享选项，但照片有一个良好的开始。 这使得用户的体验快速且简单。 如果用户决定更改自己的选择， Instagram会在稍后删除照片。 使用这种开发模式，可以帮助让应用程序更像原生应用程序，并且让它工作得更快。
在设计方面，要遵循非常重要的布局模式。 例如，让我们来看看一个名为 foursquare 的流行 Android 和 iOS 应用程序。
图 1. iPhone 和 Android 上的 foursquare 应用程序界面
尽管从内容的角度而言，这两个界面看起来非常相似，但在导航和操作栏方面，两者有一个关键的区别。 在 iOS 上，导航栏位于界面底部，而在 Android 上，导航栏位于 foursquare 横幅下面。 该设计模式在许多其他应用程序（包括 Twitter）中都很常见。
在这些平台上改变导航栏位置的主要原因是，在 Android 上，物理或软按钮均位于设备底部。 在底部添加导航栏，可能会导致用户误按到物理或软按钮，并打断他们的体验。
虽然这可能看起来是一个小变化，但设备“持有人”的眼睛真正看到了美观。 作为开发人员，您希望自己的应用程序与该平台上的其他应用程序契合，而不希望自己的应用程序看起来像是为另一个平台构建的应用程序的克隆。 了解目标平台的设计原则，有助于您的应用程序吸引该平台的用户。 您不会希望 Android 用户重新学习如何使用您的应用程序，因为它不符合常见的 Android 设计模式。 虽然这可能需要创建多个代码库，但真正需要改变的只有标题和页脚，而不是内部的内容（内容应该始终保持不变）。 这些类型的用户界面调整可以使您的 PhoneGap 应用程序感觉更像原生应用程序，并向用户提供更好的体验。
DOM，也被称为 Document Object Model，在构建 PhoneGap 应用程序时并不是最好的选择。 制作大量丰富的过渡和特效的缺点之一是必须修改 DOM 的次数。 例如，单击一个按钮并希望在页面上出现一个叠加时，您必须修改 DOM 以显示该元素。 在台式机上，这个过程是无缝的，因为浏览器拥有更多的资源可以使用，并且 Javacsript 渲染引擎也更好。 移动浏览器通常缺乏这些资源。
更让人担心的是，通过移动浏览器（Safari for iOS、Browser/Chrome for Android）和通过其原生 Web View 组件（即所谓的 UIWebView for iOS 和 WebView for Android）运行 Web 应用程序之间的差异。 使用 PhoneGap，将这两个对象组合成一个名为 Cordova WebView 的实体。 在 iOS5 中，Apple 引入了一个 JavaScript 渲染系统，名为 Nitro，它使用 JIT (Just-In-Time) 处理来编译 JavaScript。 这有助于浏览器仅在需要时快速地加载 JavaScript，以加快页面加载速度。 其缺点是，在 UIWebView 中运行的任何第三方应用程序（比如 PhoneGap）都不能够使用此功能，因为它已被禁用。 考虑到这一点，您的 Web 应用程序在原生的 Safari for iOS 浏览器中比在 PhoneGap Embedded WebView 中运行得更快。 这将为大量使用 JavaScript 的应用程序带来一个独特的问题。
此外，开始添加更复杂的 CSS3 元素，或隐藏和显示带有复杂 HTML 结构的页面时，您可能会遇到应用程序变得缓慢的情况。 页面过渡可能会导致屏幕闪烁，并且以不连贯的方式加载内容。 这些类型的操作使用户体验下降，使您的应用程序感觉就像是 Web 应用程序，而不是原生应用程序。
虽然有很多解决方案可以克服这些问题，但我发现有一些解决方案可以帮助您最大限度地减少不连贯的加载，并提高性能：
1. 为浏览器实现硬件加速
由于目标 Web 浏览器必须支持 WebKit（特别是在 iOS 上），因此必须指定浏览器，以便对某些元素添加硬件加速。 要做到这一点，您可以使用 CSS 属性translate3d
<div id=”content-area”>
<div id=”page-1” class=”page”>
…
</div>
<div id=”page-2” class=”page”>
…
</div>
</div>
您必须将 translate3ddiv.class
div.page {
-webkit-transform: translate3d(0,0,0);
}
上面的代码触发 CSS 被硬件加速，这使得 iOS 设备上的滚动和过渡更流畅。 在 Android 上，我看到在使用该技术时有一些奇怪的副作用；我不建议在该平台上使用这个属性。 但是，在 Android WebView（尤其是在较大的设备上）进行渲染，显得比在 iOS 上的渲染更好一些。
注意：该代码只在 WebKit 浏览器中工作。 删除 –webkit-
2. 渐变与框架阴影不适合开发人员使用
随着 CSS3 的推出，使用渐变和框架阴影让大部分 Web 开发人员可以创建非常好的视觉元素。 但是，这些属性在移动浏览器上造成了很重的负担。 在我的体验中，我已经看到，从项目行中删除渐变可以显著提高性能。 以“新闻提要样式”谨慎地使用这些属性，不要在您的结构中多次应用它们。 对于按钮和其他一次性元素，您仍然可以使用这些样式，但在提要或您需要经常更改 DOM 结构的区域中不要使用它们。
3. 使用模板并预编译它们！
在构建 Untappd 版本 2 时，我们以 JSON 格式从服务器获取数据，希望建立可重用的模板来快速格式化数据，并将它显示给用户。 我们最终使用了 HandlebarsJS，因为它让我们可以将逻辑添加到模板中，并且将 HTML 模板预编译为 JavaScript 优化的版本，以获得更好的性能。 通过编译，与渲染没有经过预编译的页面所花费的时间相比，我们能够将页面渲染性能提高两倍。
4. 最小化 DOM 结构
在构建 HTML 结构时，大部分 Web 开发人员不需要担心达到 HTML 结构中子节点的数量限制。 但是，在使用移动设备时，您会受到分配给 WebView 的最大内存限制。 不管您相信与否，过大的 HTML 结构可能会导致 WebView 崩溃。 为了减少 HTML 占用空间，一种非常好的方式是在主要结构中减少子元素。
例如，如果您的 HTML 结构如下所示：
<ul>
<li>
<a onclick=”doSomething();”>Stuff</a>
</li>
</ul>
您总是可以将结构修改如下：
<ul>
<li onclick=”doSomething();i>
Stuff
</li>
</ul>
这样可以节省额外的层次，当然，您可以随时将 onclick换成 ontouchend 让您的代码在移动设备上执行得更好。
当然，这并非您可以对 PhoneGap 应用程序进行改进的完整列表，但这些技巧肯定可以帮助您提高应用程序的性能和可用性。
在构建 PhoneGap 应用程序时，最复杂的任务之一是调试和测试。 使用专门针对移动设计的 Web 应用程序，您能够迅速将补丁推送给用户，但是，在将您的应用程序提交给商店时，更新需要经过审批流程，这可能需要一些时间。 因此，您必须在启动应用程序之前对它进行广泛测试。
考虑到这一点，要测试在手机上运行的应用程序可能会非常困难。 在网络上，Web Insepector 和 Firebug 等工具让您可以看到 XHR 请求，并检查 DOM 元素，但是，在手机上进行测试则有一些挑战性。 幸运的是，PhoneGap 提供了一种很好的工具，可以使调试这些恼人的问题轻松许多。
DOM 和 XHR 检查程序 Weinre，是一个可用于对 PhoneGap 应用程序进行远程调试的工具。 使用 Weinre，您可以看到 XHR 请求，检查 DOM，并执行 JavaScript 分析，以查看何时在应用程序的什么位置出现了重复流程。 为了开始使用 Weinre，只需添加一行简单的 JavaScript 代码到您的 index.html 文件，如下所示：
<script src="http://debug.phonegap.com/target/target-script-min.js#anonymous"></script>
要确保将默认的哈希值（在本例中是 #anonymous）修改为唯一和秘密的某个值，使其他人无法访问该页面，这是非常重要的。 如果您不这样做，可能有未经授权的用户通过 Web 控制台访问您的代码。
一旦您完成了该操作，请浏览到 PhoneGap Debug page。 遵循所列出的步骤，确保包括您之前在文本框中使用的唯一哈希值。 一旦您完成了这步操作，现在就可以使用 Web Inspector 和 XHR 工具，更好地了解 PhoneGap 应用程序到底发生了什么事。 这可以帮助您更快、更高效地解决问题。
我所讨论的一些挑战可能使构建 PhoneGap 应用程序看起来有些艰巨，但我希望我的经验能帮助您避免一些困难。 事实上，如果遵循设计和开发模式，并使用一些 DOM 性能技巧，很多人甚至不会注意到您使用了 PhoneGap；但很多人会认为它们使用的是原生应用程序，而这正是该平台的目标之一。 当然，专注于构建出色的应用程序，而不是构建出色的 iOS 或 Android 应用程序，这始终是最重要的一点。
为了获得有关 PhoneGap 的更多信息，以及 HTML5 性能技巧，请查看下面的链接：