13分钟阅读

开发移动Web应用程序:何时,为什么和如何

Tomas是一个经验丰富的网络开发人员,掌握了PHP的前端和后端开发。他擅长敏感的网页设计。

这个星球上有68亿人,其中有51亿人拥有手机。今天,这些设备的不断增长的百分比是智能手机。据最近 PEW研究中心研究,在智能手机上访问Internet的用户数量在过去的5年中增加了一倍多,与下载和使用的用户数量一样 移动应用程序。在他们手机上使用互联网或电子邮件的人,超过三分之一主要通过他们的手持设备在线。

事实上,移动计算越来越普遍......而且它真是太棒了。

当然,除了它不是。

作为移动设备用户,很少有事情是令人沮丧的,并且难以肥胖,因为设计了不良的移动Web应用程序,甚至是本机应用程序。

和A. 移动应用程序开发人员,很少有事情可以像努力支持尽可能宽敞的移动客户一样强烈刺激,每个都有自己的令人沮丧的特质。无论您是选择开发移动Web,本机或混合应用程序,寻求支持多个移动浏览器,更具异国情调的设备,并带有各种平台的夹具都可能是一个肠道触发体验。

此移动Web应用程序开发教程试图帮助您导航不同的浏览器和平台。

作为移动设备用户,很少有事物是令人沮丧的,并且难以肥胖,因为设计了不良的移动网络或本机应用程序。作为移动应用程序开发人员,很少有事情可以像争取尽可能宽敞的移动客户一样强烈恼火,每个都有自己的令人沮丧的特质。

当然,今天不是每个开发人员都需要担心支持移动客户。但是,移动设备和应用程序的越来越多的无所不在的性质表明,那些不需要支持移动客户的人,这将在不太遥远的未来中不需要这样做。所以,如果你还没有想过 移动应用程序开发,你可能应该是。

移动Web应用程序与原生app与混合应用程序

与大多数技术选择都是如此,当涉及到移动应用程序的类型时,没有单尺寸适合 - 所有答案。有许多Web应用最好的实践需要考虑,并非所有的都是技术性的。谁是你的目标受众?它们更有可能更喜欢移动网络或本机应用程序吗?原生和混合应用程序之间有什么区别?您有哪些开发资源以及它们最熟悉的移动技术?您为您的产品设想的许可和销售模式是什么?

一般来说(虽然总有例外),移动Web应用程序路线比本机移动应用程序速度更快,且较便宜,尤其是当目标是支持各种设备时。相反,可能有能力对您的应用是必不可少的移动设备(如移动传感器等)的能力,但只能通过本机应用程序访问(因此,这将使移动Web应用选择是非 - 初学者)。

除了旧的Web应用程序中,与本机应用程序问题,一个混合移动应用程序可能是您的正确答案,具体取决于您的要求和资源约束。混合应用程序,如本机应用程序,在设备本身上运行(而不是浏览器中的),但是用Web技术(HTML5,CSS和JavaScript)编写,通常由混合应用程序框架耗尽。更具体地说,混合应用程序在本地容器内运行,并利用设备的浏览器引擎(但不是浏览器)来呈现HTML并在本地处理JavaScript。 Web-Native抽象层可以访问无法在移动Web应用程序中访问的设备功能,例如加速度计,相机和本地存储。

但是,无论你做出什么选择 - 无论是移动网络应用程序,原生还是混合应用程序 - 都要小心地研究并确认您的假设。例如,出于此移动Web应用程序开发教程的目的,您可能已决定开发用于电子商务的本机移动应用以销售您的产品。但是,据 HUBSPOT.,73%的智能手机用户表示他们使用移动网站比本土应用程序更多地购买他们的购物......所以,在这种情况下,您可能会在错误的马上下注。

但无论你做出什么选择 - 无论是移动网络,本机或混合应用程序 - 都要小心地研究并确认您的假设。

然后,当然,有时间和预算的实际考虑。作为我最喜欢的谚语之一, “更快,更好,更便宜......选择任何两个”。虽然在Web应用程序开发中,上市时间和成本限制至关重要,但至关重要的是在过程中妥协。恢复有一个糟糕的第一经历的用户的信心很困难。

实际上,移动网络,本地和混合应用程序都是完全不同的野兽,每个野兽都有自己独特的福利和挑战。此移动Web开发教程专注于采用的方法和工具以及避免的缺陷,在高功能性,直观和易于使用的移动Web应用程序中。

确定如何开发移动Web应用程序的关键最佳实践是了解您的客户。

移动网络应用程序开发需要详细的规划

确定您的(或您的客户)要求是应用程序开发,移动或其他方面最重要的习惯之一。仔细研究有针对性的功能,以确定它们是否可以在您的移动Web应用程序中实现。它非常令人沮丧,非常不生产,以意识到您的一个或多个必要的客户函数,当您已经投入了设计基于Web的界面和支持基础架构的时间和资源时,不支持您的一个或多个必要的客户函数。

移动Web App Developer Newbies的另一个常见的Gotcha是假设桌面浏览器的基于Web的代码将在移动浏览器中使用“如”。 不是。 最肯定地 differences and, if you’re not aware of them, they can definitely bite you. The HTML5 <video> tag’s autoplay functionality, for example, doesn’t work on mobile browsers. Similarly, the CSS transitionopacity properties are not supported (or at least are not consistently supported) in most mobile browsers nowadays. You will also have problems with some web API methods on a mobile platform, such as the SoundCloud music streaming API that requires Adobe Flash which is not supported on most mobile devices.

用于移动Web App Developer NewBies的常见Gotcha是ass-u-me,即桌面浏览器的基于Web的代码将在移动浏览器中使用“按原样”。

移动网络应用开发中的特别复杂的因素是移动设备的寿命往往比桌面显示器(美国手机的平均寿命超过21个月)。这些较短的设备寿命跨度,伴随着新的移动设备和技术的恒定版本,产生了更改的往目标设备的变化景观。在浏览器中工作时,通过屏蔽您的一些特定于设备的问题,您仍然需要设计一种基于浏览器的视图,该视图支持许多不同的屏幕分辨率(以及适当调整景观和纵向方向。 )。

思想还需要提供支持苹果的视网膜显示器(具有像素密度足够高的液晶显示器,使人眼不能在典型的观看距离处辨别单个像素)。几种Apple产品 - 包括iPhone,iPod Touch,iPad,MacBook Pro,iPad Mini和iPad Air - 提供视网膜显示器。对于尤其是移动Web应用程序,重要的是要意识到视网膜显示器使低分辨率图像(通常为移动设备提供)看起来模糊和 像素化 可能发生。这些情况下最好的应用程序开发解决方案是让服务器识别该请求来自视网膜设备,然后向客户端提供备用更高分辨率的图像。

If you want to use some of the cool HTML5 stuff, remember to verify in advance that the functionality you’re looking for is supported across the device landscape that your customers are likely to be using. For example, in iOS 6 and above, there is no support for the navigator getUserMedia functionality since the camera is only accessible through native apps. Two great resources for checking what’s supported on specific devices and browsers are 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应用程序进行性能

“omg,这件事是SOOOOO慢!” 作为移动Web应用程序开发人员,这些可能是您希望听到您的一个用户的最后一句话。因此,您必须仔细考虑如何减少和优化每个字节和服务器传输以减少用户的等待时间。预计转移将永远在WiFi网络上完成,这是不现实的,你应该知道 60%的移动网络用户 假设他们希望一个站点在3秒或更短时间(来源)在手机上加载。同样,谷歌发现,对于负载时间的每次额外五秒钟,流量下降了20%(并且还值得注意的是,搜索引擎看起来作为页面质量得分计算的一部分。

60%的移动网络用户表示,他们希望在3秒或更短的时间内将网站加载到其手机上。

作为此移动Web应用程序开发教程的一部分,这里有一些提示,可以帮助优化移动Web应用程序的性能并最​​大限度地减少延迟:

  • 图像优化。 图像加载时间是众所周知的,是影响移动设备上页面负载的最大性能问题之一。使用在线图像优化器,如 smushit.com.,可以有助于解决此问题。
  • 代码压缩。 压缩您的JavaScript和CSS文件,具体取决于您所拥有的代码量,可能会对性能产生重大影响。
  • 数据库查询。
    • 某些移动设备浏览器不接受桌面浏览器的许多cookie,这可能导致需要比平常更多查询。因此,在支持移动Web App客户端时,服务器端缓存尤其至关重要。
    • 请记住使用适当的过滤器来排除SQL查询注入,否则可能会损害您的站点和服务器的安全性。
  • 内容交付网络(CDN)。 如果您计划提供大量的视频,图像,音频文件或其他类型的介质,强烈建议使用CDN。一些更常见的商业CDN包括 亚马逊S3, Microsoft Windows Azure., 和 maxcdn.。使用CDN的优点是众多,包括:
    • 改进了下载性能。 利用CDN的资源使您可以分发负载,节省带宽和提升性能。更好的CDN提供更高的可用性,更低的网络延迟和较低的数据包丢失。此外,许多CDN提供了全局分布式的数据中心选择,使得从更靠近用户位置的服务器发生下载(导致网络跳跃较少,下载更快)。
    • 更多并发下载。 浏览器通常将并发连接数限制到单个域,之后阻止额外的下载,直到上一个下载完成。在从同一站点下载许多大文件时,您通常可以看到此限制。每个附加CDN(在不同的域上)允许额外的并发下载。
    • 增强的分析。 许多商业CDN提供了可以补充您自己的网站分析的使用报告,并且可以提供更好的视频视图和下载量化。 gtmetrix.例如,有一个很好的网站报告工具,用于监控和优化您网站上加载的源。

移动Web应用程序开发工具

“正确的工作的正确工具” 是一个古老的古老格言,适用于对任何其他域的软件开发。本教程提供和介绍了一些更流行的移动Web应用程序开发的工具,但请记住,可能很好地是用于开发移动Web应用程序的“正确”的工具,具体取决于您的要求和可用资源。

选择合适的JavaScript Mobile Web应用程序框架

由于移动Web应用程序开发倾向于创造许多相同的共同挑战 - 例如移动浏览器中的跨浏览器兼容性和不一致的HTML和CSS - 已经开发了专门用于解决这些问题的HTML5和CSS3)(基于HTML5和CSS3)在各种智能手机和平板电脑上尽可能完美地工作。这些移动Web应用程序框架中的大多数都是轻量级的,这有助于促进快速移动网络浏览,而不会影响您网站的外观和感受。

扩大我们的观点超越了移动景观,如果有一个人流行的JavaScript框架值得一提,则是 jquery.。如果您熟悉桌面版本,我建议尝试 jquery mobile 对于您的移动Web应用程序。它有一个小部件库,将语义标记转换为手势友好格式,在触摸屏上轻松进行操作。最新版本由一个真正轻量级的代码库组成,可以用很多图形元素包装一个真正可以改善您的UI的打孔。

另一种选择, Sencha Touch.,正在迅速获得市场份额。它提供了出色的性能,并帮助生产了一个大部分外观和感觉的移动Web用户界面。它的全功能窗口小部件库是基于Sencha的 extjs. javascript. library.

以下是在比较JQuery Mobile和Sencha Touch时考虑的一些关键差异:

  • 看起来和觉得。 一般来说,一个Sencha Touch应用程序的外观和感觉是更加清晰,优于jQuery移动应用程序,但重要的是要记住,这种反应往往是高度主观的。
  • 可扩展性。 jQuery Mobile提供了许多第三方扩展,并且本质上设计为高度可扩展,而Sencha Touch目前的更多“关闭”框架。
  • 设备支持。 jQuery Mobile目前针对的是设备的较大横截面而不是Sencha触摸。
  • HTML“与” JavaScript。 jQuery主要是HTML的中心(即,在JavaScript中扩展和操作现有的HTML),而Sencha Touch编码是基于JavaScript的。 (这是一个例句,您的开发团队的技能集在制作技术选择时非常重要。)
  • 外部依赖性。 jQuery Mobile需要jQuery和JQuery UI进行DOM操作,而Sencha Touch没有外部依赖性。
  • 学习曲线。 大多数开发人员发现jQuery的增速时间低于Sencha Touch的时间,也许是由已经熟悉标准jQuery库的大量的Web开发人员推动。

响应框架和移动Web应用程序

近年来,越来越多的响应框架已经开始播种,目前最受欢迎的两个 引导基础。简而言之,敏感框架简化和简化 基于Web的响应式UI设计 和实现,将最常见的布局和UI范例封装到可重用的性能优化的框架中。主要基于CSS和JavaScript,许多这些框架是开源的,免费下载,轻松自定义。除非您有一个高度特殊的要求集,否则可能使用其中一个框架将降低设计和实现移动Web应用程序的水平。

检查两个领先的选项,引导和基础,考虑的一些关键差异包括:

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

调试和测试移动Web应用程序

调试移动Web应用程序可能是棘手的,有点令人沮丧,特别是如果您需要扫描不同的设备以进行测试,或者为(通常是不完美)的仿真安装SDK,或者为目标客户端平台的仿真安装。

在此上下文中,移动Web开发的一个清晰优势(与本机应用程序开发相比)是您可以利用基于标准的浏览器的开发人员工具来调试应用程序。根据我对远程调试的个人偏好,我推荐在这个应用程序开发教程中的那个是Chrome,它具有其DevTools。其他标准选项包括Firefox,带有Firebug或Opera蜻蜓工具。

学习如何开发Web应用程序时,请查看Chrome及其DevTools。

我更喜欢的一些原因 铬与它的devtools include:

  • Chrome vidtools中的移动模拟器。 这可能是选择Chrome用于调试移动Web应用程序的Chrome。关键功能包括触摸事件的仿真,用户代理欺骗,网络带宽限制,地理位置覆盖,设备方向覆盖和CSS媒体类型仿真。
  • 互动编辑器。 能够在一起编辑JavaScript或CSS。
  • 卓越的JavaScript调试器。 允许DOM断点并提供配置JavaScript代码执行时间的能力。
  • 内置JSON和XML查看器。 避免需要任何插件来检查服务器响应。
  • 支持Android Debug Bridge(adb)协议直接通过USB。 促进轻松实例化远程调试会话。 (这里 谷歌是如何在Chrome中开始远程调试的良好教程。)
  • 资源动态检验。 允许您检查应用程序的本地数据源,包括IndexedDB或Web SQL数据库,本地和会话存储,cookie和应用程序缓存资源。您还可以快速检查您的应用程序的可视资源,包括图像,字体和样式表。

要测试Web应用程序的布局和交叉浏览兼容性,您还可以使用一些有用的在线工具,例如 browserstack.。只需输入您的应用程序的URL,选择浏览器,版本和操作系统,并且您将获得该环境中网站的模拟视图(和负载速度)。此目的的另一个有用工具是 横梁.

包起来

随着持续快速扩大的数量,移动设备在市场上的多样性和复杂性,在今天使用的需求,有效,用户友好,高性能的移动应用可能会大幅增加。因此,能够智能地和有效地开发这些应用程序将继续是至关重要的。

在选择移动设备的Web,Native和Hybrid移动应用程序选项时,必须考虑许多因素。每个都有自己的优势,但是移动网络应用程序通常代表您最有效的开发(以及因此上市)选项。如果您选择下降那条路,我希望这个移动网络应用程序开发教程有助于您更直接地且成功地到达目的地。

理解基础知识

什么是移动网络应用程序?

移动网络应用程序是用于良好手机体验的Web应用程序。它们不是移动应用程序,而是用HTML / CSS编写的网站并由浏览器运行。虽然它们可能被设计成类似于智能手机应用的感觉,但它们没有太多共同之处。

什么是本机应用程序?

本机应用程序是为特定平台编写的应用程序,利用特定于平台的API。

什么是混合应用程序?

混合应用程序是使用Web技术编写的应用程序,并在瘦身Web浏览器中包装。混合应用程序可以快速移植到它们共享相同的底层代码库的各种平台。

原生和混合应用程序之间的技术区别是什么?

使用Platform API,像Java或Kotlin for Android,Object C或iOS的Levice C或Swift for iOS的平台特定语言编写了本机应用程序。混合应用程序是使用HTML5 / CSS和JavaScript这样的Web技术编写的

原生应用程序与Web应用程序:什么'对用户体验的影响?

A mobile web application is a website optimized to be used on a mobile. If done well, the experience is remarkably like a native or hybrid application. As an example, see //paperplanes.world/.

为什么原生应用程序通常会提供卓越的性能?

混合应用程序通常比原生应用程序慢,因为本机应用程序不会经过箍和容器层工作。本机应用程序更加表现。但是,原生已经设法改变了游戏。