开发移动Web应用程序（何时，为什么以及如何） _应用程序

本文概述

行动网路应用程式, 原生应用程式与混合应用程式
移动Web应用程序开发需要详细计划
优化你的移动Web应用程序以提高性能
移动Web应用程序开发工具
调试和测试移动Web应用
本文总结

地球上有68亿人, 其中51亿拥有手机。如今, 这些设备中越来越多的是智能手机。根据皮尤研究中心最近的一项研究, 在过去的5年中, 通过智能手机访问互联网的用户数量增加了一倍以上, 下载和使用移动应用程序的用户数量也增加了两倍。在使用Internet或通过手机发送电子邮件的用户中, 超过三分之一的人主要通过手持设备上网。
确实, 移动计算正变得越来越普遍……而且真棒。
当然, 除非不是。
作为移动设备用户, 几乎没有什么东西像设计不良的移动Web应用程序甚至本机应用程序一样令人沮丧和难以捉摸。
作为移动应用程序开发人员, 几乎没有什么比努力支持尽可能多的移动客户端更令人烦恼了, 每个客户端都有自己令人沮丧的特质。无论你是选择开发移动Web, 本机应用程序还是混合应用程序, 寻求支持多种移动浏览器, 更多奇特的设备以及与各种平台打交道的尝试确实可以让你大吃一惊。

文章图片
作为移动设备用户, 几乎没有什么东西像不良设计的移动网络或本机应用程序一样令人沮丧和难以捉摸。作为移动应用程序开发人员, 除了努力支持尽可能多的移动客户端外, 几乎没有什么比这更令人烦恼的了, 每个客户端都有自己令人沮丧的特质。
当然, 今天并不是每个开发人员都需要担心支持移动客户端。但是, 移动设备和应用程序日趋无所不在的性质强烈表明, 那些今天不需要支持移动客户端的用户在不远的将来很有可能需要这样做。因此, 如果你尚未考虑移动应用程序开发, 则可能应该这样做。
行动网路应用程式, 原生应用程式与混合应用程式与大多数技术选择一样, 要开发的移动应用程序类型没有千篇一律的答案。有许多Web应用程序最佳做法可供考虑, 但并非全部都是技术性的。谁是你的目标受众？他们是否更喜欢移动网络或本机应用程序？本机和混合应用之间有什么区别？你拥有哪些开发资源以及他们最熟悉的移动技术？你为产品设想的许可和销售模式是什么？
一般而言(尽管总是有例外), 移动Web应用程序路由比本机移动应用程序路由更快, 更便宜, 尤其是在目标是支持广泛的设备时。相反, 可能存在移动设备的本机功能(例如运动传感器等), 这些功能对于你的应用程序是必不可少的, 但只能通过本机应用程序访问(因此, 移动网络应用程序将无法选择该功能)入门)。
除了旧版Web应用程序与本机应用程序的问题之外, 混合移动应用程序可能是你的正确选择, 具体取决于你的要求和资源限制。像本机应用程序这样的混合应用程序可以在设备本身上运行(而不是在浏览器内部), 但是是使用网络技术(HTML5, CSS和JavaScript)编写的, 并且通常以混合应用程序框架为基础。更具体地说, 混合应用程序在本地容器中运行, 并利用设备的浏览器引擎(而不是浏览器)来呈现HTML并在本地处理JavaScript。通过Web到本地的抽象层, 可以访问在移动Web应用程序中无法访问的设备功能, 例如加速度计, 相机和本地存储。
但是无论你做出任何选择(无论是移动Web应用程序, 本机应用程序还是混合应用程序), 都必须谨慎进行充分的研究并确认你的假设。例如, 出于本移动Web应用程序开发教程的目的, 你可能已决定开发用于电子商务的本机移动应用程序以销售你的产品。但是, 根据Hubspot的说法, 有73％的智能手机用户表示, 他们使用移动网络购物的次数超过了本机应用程序……因此, 在这种情况下, 你可能下错了赌注。
但是无论你做出任何选择(无论是移动Web, 本机应用程序还是混合应用程序), 都必须谨慎进行充分的研究并确认你的假设。
然后, 当然还有时间和预算的实际考虑。正如我最喜欢的一句话所说：” 更快, 更好, 更便宜……选择任何两个” 。尽管上市时间和成本限制在Web应用程序开发中至关重要, 但至关重要的是, 不要在流程质量上过分妥协。初次体验不佳的用户很难恢复信心。
确实, 移动Web, 本地和混合应用程序都是完全不同的野兽, 每个野兽都有自己独特的好处和挑战。该移动Web开发教程特别侧重于开发功能强大, 直观且易于使用的移动Web应用程序时要采用的方法和工具, 以及避免的陷阱。

文章图片
移动Web应用程序开发需要详细计划识别你(或客户)的需求是移动或其他应用开发中最重要的最佳实践之一。仔细研究目标功能, 以确定它们是否可以在你的移动Web应用程序中实现。当你已经花了时间和资源来设计基于Web的界面和支持的基础架构时, 意识到不支持你的一项或多项重要的客户功能, 这是非常令人沮丧并且毫无成效的。
移动Web应用程序开发人员新手的另一个常见陷阱是, 假定桌面浏览器的基于Web的代码将在移动浏览器中” 按原样” 运行。不。肯定存在差异, 如果你不了解它们, 它们肯定会咬你。例如, HTML5 < video> 标签的自动播放功能不适用于移动浏览器。同样, 当今大多数移动浏览器均不支持(或至少不一直支持CSS过渡和不透明度)属性。你还将在移动平台上使用某些Web API方法时遇到问题, 例如SoundCloud音乐流API需要大多数移动设备不支持的Adobe Flash。
对于移动Web应用程序开发人员新手来说, 一个常见的陷阱是, 让我知道桌面浏览器的基于Web的代码将在移动浏览器中” 按原样” 运行。
移动Web应用程序开发中的一个特别复杂的因素是, 移动设备的寿命往往比台式机的寿命要短得多(美国手机的平均寿命约为21个月)。这些较短的设备使用寿命, 以及不断推出的新移动设备和技术, 可带来不断变化的目标设备。尽管在浏览器中工作确实可以使你免受许多特定于设备的问题的影响, 从而在某种程度上缓解了此问题, 但是你仍然需要设计一个基于浏览器的视图, 该视图支持许多不同的屏幕分辨率(以及针对横向和纵向方向进行适当调整) )。
还需要考虑支持Apple的Retina显示器(液晶显示器的像素密度足够高, 以至于人眼无法在典型的观看距离处辨别单个像素)。几种Apple产品(包括iPhone, iPod Touch, iPad, MacBook Pro, iPad Mini和iPad Air)都提供Retina显示器。特别是对于移动网络应用, 请务必注意, Retina显示屏会使低分辨率图像(通常提供给移动设备使用)看起来模糊并且可能发生像素化。在这些情况下, 最好的应用程序开发解决方案是让服务器识别该请求来自Retina设备, 然后向客户端提供替代的高分辨率图像。
如果你想使用一些很棒的HTML5内容, 请记住事先核实你的客户可能会使用的设备范围是否支持你要查找的功能。例如, 在iOS 6及更高版本中, 不支持导航器getUserMedia功能, 因为只能通过本机应用程序访问相机。 caniuse.com和html5test.com是用于检查特定设备和浏览器支持哪些功能的两种重要资源。
请记住, 要事先确认客户可能正在使用的整个设备格局都支持你要寻找的功能。
CSS3媒体查询还可以帮助你为每个设备提供自定义的内容。以下是一些示例代码, 用于捕获不同的设备特性, 例如像素密度, 屏幕分辨率和方向：

/* For lower than 700px resolutions */ @media (max-width: 700px) { ... } /* Same as last but with the device orientation on land scape */ @media (max-width: 700px) and (orientation: landscape) { ... } /* Including width and orientation you can add a media type clause, in this case 'tv' */ @media tv and (min-width: 700px) and (orientation: landscape) { ... } /* for low resolution display with background-image */ .image { background-image: url(/path/to/my/image.png); background-size: 200px 300px; height: 300px; width: 200px; } /* for high resolution (Retina) display with background-image */ @media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { -repeat; background-size: 200px 400px; /* rest of your styles... */ } }

优化你的移动Web应用程序以提高性能 “ 天哪, 这件事太慢了！” 作为移动Web应用程序开发人员, 这些可能是你想从一个用户那里听到的最后一句话。因此, 你必须仔细考虑如何减少和优化每个字节以及服务器传输, 以减少用户的等待时间。期望总是通过WiFi网络进行传输是不现实的, 并且你应该知道60％的移动网络用户表示他们希望网站在3秒或更短的时间内加载到手机上(来源)。同样, 谷歌发现, 加载时间每增加五秒钟, 流量就会减少20％(而且值得注意的是, 搜索引擎将加载时间视为页面质量得分计算的一部分)。
60％的移动网络用户表示, 他们希望网站在3秒或更短的时间内加载到手机上。
作为此移动Web应用程序开发教程的一部分, 以下是一些技巧, 可以帮助优化移动Web应用程序的性能并最??大程度地减少延迟：

图像优化。众所周知, 图像加载时间是影响移动设备页面加载的最大性能问题之一。使用在线图像优化器(例如smushit.com)可能有助于解决此问题。
代码压缩。根据你拥有的代码量, 压缩JavaScript和CSS文件可能会对性能产生重大影响。
数据库查询。
- 某些移动设备浏览器所接受的Cookie不如桌面浏览器那么多, 这可能导致需要执行比平常更多的查询。因此, 在支持移动Web应用程序客户端时, 服务器端缓存特别重要。
- 切记要使用适当的过滤器来防止SQL查询注入, 否则可能会损害站点和服务器的安全性。
内容交付网络(CDN)。如果你打算提供大量视频, 图像, 音频文件或其他类型的媒体, 则强烈建议使用CDN。一些更常见的商业CDN包括Amazon S3, Microsoft Windows Azure和MaxCDN。使用CDN的优点很多, 包括：
- 改进的下载性能。利用CDN的资源, 你可以分配负载, 节省带宽并提高性能。更好的CDN提供更高的可用性, 更低的网络延迟和更低的数据包丢失。此外, 许多CDN提供了分布在全球的数据中心选择, 从而使下载可以从更靠近用户位置的服务器进行(从而减少了网络跳数并加快了下载速度)。
- 更多并发下载。浏览器通常限制到单个域的并发连接数, 此后, 其他下载将被阻止, 直到先前的下载之一完成为止。从同一站点下载许多大文件时, 通常可以看到此限制在起作用。每个其他CDN(在不同的域上)都允许其他并发下载。
- 增强分析。许多商业CDN提供的使用情况报告可以补充你自己的网站分析, 并且可以更好地量化视频观看和下载。例如, GTmetrix具有出色的网站报告工具, 可用于监视和优化网站上加载的资源。

移动Web应用程序开发工具 “ 正确的工具来完成正确的工作” 是一句古老的谚语, 它适用于软件开发, 就像适用于任何其他领域一样。本教程提供并介绍了一些更流行和广泛使用的用于移动Web应用程序开发的工具, 但请记住, 根据开发工具的不同, 很可能还有其他一些工具是开发移动Web应用程序的” 正确” 工具。你的要求和可用资源。
选择正确的JavaScript移动Web应用程序框架
由于移动Web应用程序的开发往往会带来许多相同的共同挑战, 例如跨浏览器兼容性以及移动浏览器中的HTML和CSS不一致, 因此已经开发了专门设计用于解决这些问题的框架(基于HTML5和CSS3), 在各种各样的智能手机和平板电脑上尽可能完美地工作。这些移动Web应用程序框架中的大多数都是轻量级的, 有助于在不影响网站外观的情况下促进快速的移动Web浏览。
如果有一个值得一提的流行JavaScript框架, 那就是jQuery, 这将使我们的观点超越移动领域。如果你熟悉台式机版本, 建议你将jQuery Mobile用于你的移动网络应用。它具有一个小部件库, 可将语义标记转换为手势友好格式, 从而使在触摸屏上的操作变得容易。最新版本包含一个非常轻量级的代码库, 其中包含许多图形元素, 这些图形元素确实可以改善你的UI。
另一个选择, Sencha Touch, 也在迅速获得市场份额。它在总体上提供了出色的性能, 并有助于产生外观和感觉都像本机的移动Web用户界面。其功能齐全的小部件库基于Sencha的ExtJS JavaScript库。
比较jQuery Mobile和Sencha Touch时, 需要考虑一些关键差异：

外观和感觉。一般而言, Sencha Touch应用程序的外观和感觉要比jQuery移动应用程序更清晰, 更出色, 但请务必记住, 这种反应的确具有高度主观性。
可扩展性。 jQuery Mobile提供了许多第三方扩展, 其固有的设计是高度可扩展的, 而Sencha Touch当前更多地是” 封闭” 框架。
设备支持。 jQuery Mobile目前针对的设备横截面比Sencha Touch大。
HTML” 与” 。 JavaScript。 jQuery在很大程度上以HTML为中心(即在JavaScript中扩展和处理现有HTML), 而Sencha Touch编码完全基于JavaScript。 (顺便说一句, 这是一个示例, 说明开发团队的技能在选择技术时很重要。)
外部依赖性。 jQuery mobile需要jQuery和jQuery UI进行DOM操作, 而Sencha Touch没有外部依赖项。
学习曲线。大多数开发人员发现jQuery的启动时间少于Sencha Touch的启动时间, 这可能是由于已经熟悉标准jQuery库的大量Web开发人员的推动力。

响应框架和移动Web应用程序
近年来, 越来越多的响应框架开始出现, 其中目前最受欢迎的两个是Bootstrap和Foundation。简而言之, 响应式框架简化并简化了基于Web的响应式UI设计和实现, 将最常见的布局和UI范例封装到可重用, 性能优化的框架中。这些框架大多主要基于CSS和JavaScript, 它们是开源的, 免费下载的并且易于定制。除非你有一组非常特殊的要求, 否则使用这些框架之一可能会降低设计和实现移动Web应用程序的工作量。
检查两个主要选项Bootstrap和Foundation, 要考虑的一些关键差异包括：

目标平台。虽然Bootstrap确实支持移动设备, 平板电脑和台式机设备, 但它主要面向台式机使用。另一方面, Foundation实际上是为所有屏幕尺寸和类型设计的。
浏览器兼容性。 Bootstrap与IE7或更高版本兼容, 而Foundation仅与IE9或更高版本兼容。
布局和组件的多样性。 Bootstrap具有比Foundation提供的UI元素大得多的UI元素集合。
自动调整大小。使用Foundation, 网格可以根据当前浏览器的高度和宽度进行缩放, 而Bootstrap仅支持基于标准屏幕尺寸集的预定义网格尺寸集。

调试和测试移动Web应用调试移动Web应用程序可能很棘手, 而且有些令人沮丧, 尤其是在你需要为不同的设备进行测试或为目标客户端平台(通常是不完美的)仿真安装SDK时。
在这种情况下, 移动Web开发(与本地应用程序开发相比)的一个明显优势是, 你可以利用基于标准浏览器的开发人员工具来调试应用程序。根据我个人对远程调试的偏爱, 我在本应用开发教程中推荐的是Chrome及其DevTools。其他标准选项包括带有Firebug的Firefox或Opera的Dragonfly工具。

文章图片
我更喜欢Chrome搭配其DevTools的一些原因包括：

Chrome的DevTools中的移动模拟器。也许这就是选择Chrome调试移动Web应用程序的充分理由。主要功能包括模拟触摸事件, 用户代理欺骗, 网络带宽限制, 地理位置替代, 设备方向替代以及CSS Media Type Emulation。
交互式编辑器。能够即时编辑JavaScript或CSS。
出色的JavaScript调试器。允许DOM断点, 并提供配置JavaScript代码执行时间的功能。
内置的JSON和XML查看器。无需任何插件来检查服务器响应。
直接通过USB支持Android调试桥(ADB)协议。简化远程调试会话的实例化。 (这是Google提供的有关如何在Chrome中启动远程调试的很好的教程。)
动态检查资源。允许你检查应用程序的本地数据源, 包括IndexedDB或Web SQL数据库, 本地和会话存储, Cookie和应用程序缓存资源。你还可以快速检查应用程序的视觉资源, 包括图像, 字体和样式表。

要测试Web应用程序的布局和交叉浏览兼容性, 你还可以使用一些有用的在线工具, 例如Br??owserStack。只需输入应用程序的URL, 选择浏览器, 版本和操作系统, 即可在该环境中获得网站的模拟视图(和加载速度)。另一个用于此目的的有用工具是CrossBrowserTesting。
本文总结随着市场上和当今使用的移动设备的数量, 种类和复杂度的持续快速增长, 对有效, 用户友好, 高性能的移动应用程序的需求可能会大大增加。因此, 能够智能有效地开发这些应用程序将继续至关重要。
在移动设备的Web, 本地和混合移动应用程序选项之间进行选择时, 必须考虑许多因素。每种都有自己的优势, 但是移动Web应用程序通常会代表你最有效的开发(以及上市时间)选项。如果你选择走这条路, 希望此移动Web应用程序开发教程能帮助你更直接和成功地到达目的地。
【开发移动Web应用程序（何时，为什么以及如何）】相关：使你的应用获利—利用移动分析