Web 和 App 谁才是王者?

本文首发于公众号:设计新手村

翻译自 Medium,原文链接

原文标题:What is the best platform: Web or Apps?

原文作者:Phoomparin Mano

文章翻译:村长道哥

PS:文中提到的其他文章在原文中都是有链接的,感兴趣的各位请点击底部的「阅读原文」

现今阶段,从用户和开发者的角度来看,渐进式网络应用(PWA)和移动应用的体验是怎么样的?让我们在两个不同的平台上做一些比较,探寻真相!


在开始之前,我首先要说明的是,这篇文章将讲述的是目前的发展状况,而不是未来的前景,原因很简单:关我鸟事。虽然应用的开发形式很快就会过时,但悲哀的是,我现在需要即刻发布我的产品,你也一样。

这篇文章将会很长,而且充满了极客的味道,因为文章总结了我所有对正在进行的 Web 应用和移动应用之间论战的看法。请小忍一下,让我们一起结束这些折磨开发者已久的痛苦。

2017年技术的简介

话虽如此,在做深入比较之前先对所有读者一碗水端平。如果你对这两个平台已经有所了解的话,那可以跳过介绍的部分。

Web 平台说:我有渐进式网络应用!

在开放的网络平台上,谷歌最近推出了渐进式网络应用程序,简称为 PWA。

PWA 整合了网页应用和移动应用的精髓。PWA 不需要安装,从用户打开的第一个浏览器标签开始它就开始工作了,随着用户逐步地深入使用,PWA 的功能也会变得越来越丰富。


Progressive Web Apps


PWA 是一种更现代的 Web 应用,使用现代的 Web 技术来提供不输于原生应用的功能和用户体验。我认为这相对于典型的单页应用(SPA)PWA 无疑是一个巨大的进步。

PWA 的加载速度很快,即使是在网速不佳的网络上,它能够发送推送通知,在主屏幕上有自己的图标,并以全屏的方式独立运行。

互联网开放的倡导者们说,这就是 Web 的未来,并且有几家巨头公司已经实现了 PWA,用来为旗下的产品服务提供轻量级的 Web 版本支持。其中最引人注目的是 Flipkart Lite、Twitter Lite、Housing Go、阿里巴巴和华盛顿邮报。

Flipkart Lite 的 PWA

下面是 PWA 的10个特性

* 渐进式(这不废话嘛):通过渐进式增强的方法适用于所有的浏览器,一方面尽可能采用最先进的技术,另一方面也会适配所有的浏览器。

* 自适应:适合任何机型:桌面设备、移动设备、平板电脑。

* 连接无关性:能够借助于服务工作线程在离线或低质量网络状况下工作。

* 类似应用:通过使用 App Shell 模型来实现原生应用一样的导航和交互。

* 持续更新:在服务工作线程更新进程的作用下时刻保持最新状态。

* 安全:通过 HTTPS 防止窥探和确保内容不被篡改。

* 可发现:能够被搜索引擎发现,并通过服务工作线程描述文件从而将其识别为“应用”。

* 可再互动:通过推送通知之重新吸引用户。

* 可从主屏访问:允许用户在不使用应用商店的情况下,在主屏上添加经常使用的 PWA。

* 可链接:可通过网址轻松分享,并且不需要其他用户安装任何应用。

附注:如果你感兴趣的话,这是埃里克艾略特的关于 PWA 的文章。他似乎是网络平台的死忠粉,认为 Web 才是未来,这就是为什么文章的名字是《原生应用已死》的原因。以下是他文章的第一段:

从现在开始,我不会再开发任何原生应用了。我今后所有的应用都将 PWA。PWA 尽管是 Web应用程序,但它们甚至可以在移动设备上比原生应用更好地无缝工作。

尽管 Eric 在 PWA 上的文章是有可取之处的,他的确提出了一些不错的观点,但我并不完全同意他关于 Web 平台的观点。下面我会说说为什么。

谷歌音乐的移动应用

移动平台阵营说:我有移动应用!

另一方面,移动应用领域也不甘示弱。移动应用平台拥有自移动时代诞生以来就已经期完善的生态系统和开发的最佳实践了。苹果的 iOS 和谷歌的 Android 这两个生态系统就是移动领域的两个霸主。

接下来,我想讨论三个重要的创新产品。

React Native:它是什么?与 Android 开发相比有什么优劣?

第一个是 Facebook 的 React Native,这个框架利用了 React 和 JavaScript 让开发者可以同时开发 Android 和 iOS 应用。因为我从未拥有过一个苹果设备,所以我无法就 iOS 开发的角度发表看法。


React 的性能非常棒,你甚至不会察觉出用它开发的应用居然不是原生的,因为使用了JS Bridge 在底层渲染原生的视图。如果确实需要用原生代码来进行性能优化或实现原生功能的话,React 与 Java 的集成也非常简单。

你完全可以使用平台一致性的用户界面,这样看起来和用起来会更像原生应用,但是这需要大量的细节处理。我强烈推荐阅读各个平台的用户界面指南,比如苹果的人机界面指南,以及谷歌的 Material Design 指南。

就我个人而言,我更喜欢原生的 Android 开发,因为原生的开发体验更好,我强烈建议每个Android开发人员阅读这篇文章《作为 Android 开发者我在搞了一些 Web 开发后才知道的5件事》。

当有人提到 Java 和 Android 开发我脑中就浮现出了这张图

Android 的 XML+Java 这样的方式,可以提供许多的样板来制作一个简单的自定义视图,而整个 React 组件可以写成一个单独的函数,这些函数都可以组合在一起。Kotlin 似乎解决了一些 Java 的样板问题,但一些根本的问题仍未解决。

另外,与 React Native 应用中经常使用的 Flux 架构不同的是,Android 并不经常使用这种“单一可信来源”的方法途径,开发人员可以“以各种方式传递数据”,比如 intents、消息总线和数据库,这样就在应用程序的每个传输部分数据都是处于可变状态的。

但是,如果你的开发团队已经适应了 Android 开发工作流程,那么所有的这些就都不重要了。请不要强迫所有的开发人员使用 React Native,因为“开发者体验”关乎于开发人员在工作时的舒适程度。

其他著名的使用原生视图的跨平台解决方案有 NativeScript、Weex、Titanium Appcelerator 和 Xamarin。



混合型应用和 Android 即时应用

第二个是混合应用,利用 Webview 来实现跨平台的应用。我一般不推荐这种方法,因为它们的用户体验大部分都很糟糕,究其原因是性能很差,而且用户界面也不一致。话虽如此,你的用户是否关心这一点取决于他们的定位。

最后是 Android 即时应用,它允许 Android 应用可以在不安装的情况下立即使用。这使得 Android 应用与 PWA 一样,都可以立即使用。

我对这一点的担忧是,它只适用于 Android 平台,而苹果似乎并没有对这种想法有任何动向。另外,在移动网络上下载 4MB 的东西还是有点大。基于这个原因,轻量级的 PWA 对我来说似乎是更好的选择。

当然,我还不确定 React Native 将来能否做到快速加载,既满足 4MB 下载包大小的限制,又可以实现增量模块加载。如果确实能做到这种程度的话,那么 React Native 就可以使用代码分割来将新功能以增量的方式加载到应用中。

潜在的问题有哪些

让我们继续深入挖掘每个平台并找出潜在的问题有哪些。

UI 性能在用户体验方面至关重要

不管你信不信,即使是最细微的性能问题许多用户也能注意到。我在某篇文章的评论中看到了一个典型的喷贴,是关于 PWA 是否应该出现在 Google Play 商店。

天哪,千万别。Play Store 里已经充斥着许多“垃圾应用”了,这些应用基本上是花一个下午从 iOS 那里移植过来的。我至今还没有看到过一个能用的过去的 Web 应用,它们都是些丑到爆的垃圾,根本谈不上什么用户体验。不,不,不,千千万万不要。

Wow,这可是一个引战的声明,很可能会冒犯到一些开发人员。然而,由于我们不仅仅关注技术方面的东西,同时也在关注用户体验,所以下面的喷贴也是完全合理的了:

虽然 Twitter 的 PWA 已经不错了,但它仍然有明显的滚动延迟,没有滑动手势,没有动画,也没有逻辑性的后退按钮等等,等等,等等,等等。和原生应用比起来,它并不是特别烂,只是有点烂而已。这个锅不能只甩给 Twitter——他们的开发者还是很棒的——而是移动网络还有其自身的局限性。

尽管许多开放网络的倡导者都在宣传移动平台可以如何完美地处理每秒60帧的动画,但现实是大部分 Web 应用的动画都不流畅,尤其是在低端移动设备上。

开发一个还不错的应用是完全有可能的,但是 90% 的应用都是彻彻底底的垃圾。你能想起来哪个是用 Cordova 开发的而且还不烂的移动应用吗?Play Store 提供这些半成品的垃圾,只能拉低自己的下限。


上面的言论对 Web 开发者来说有点伤人,我妈妈说绿色的东西可以让人平静

与往常一样,虽然这绝对是一个有效的关注点,但你还是首先要考虑一下用户的定位。许多人已经对 Flipkart Lite 、Facebook Lite、Twitter Lite 以及这些在线服务的精简版感到满意了。

相反,想得到最好体验的那些用户还是大有人在的。如果不能正确地研究用户的定位,可能就会只能满足少数用户的需求,从而掉入80:20的陷阱。

应用安装的阻力和用户发展

不过,原生应用也有自己的问题。最常见的一个,也是开放网络倡导者似乎经常说的就是,应用安装的阻力是非常大的。你知道一个典型的用户每年只会下载9个移动应用吗?

App Store 的阻力是一个主要的障碍。安装一个原生应用需要6次点击,而每次点击你就会损失20%的用户。决定安装一个移动应用比决定使用一个网页应用要困难得多。

你必须点击“安装”,等待应用下载,还要担心它需要多少空间,担心它需要的可怕权限。原生应用在用户点击“安装”之前就会失去很多潜在的用户。

尽管 Android 现在使用的是运行时权限,用户无需那些担心可怕的权限,还会提示你删除从未使用的应用,但潜在的问题仍然存在。

每一个台阶都有可能让人跌倒

在用户的获取和转化中,潜在用户必须要做的每个任务都会降低实际用户的数量。简单地说,一些用户会在任意一个任务中退出。

以下是一些有趣的统计数据,摘录于 Eric Elliot 的《为什么原生应用已死》。

在 Google Play 的应用商店中,60%的应用从未被下载过。

绝大多数用户每月下载的应用程序不会超过3个。有一半的美国智能手机用户每月根本不会下载任何应用。

手机用户大部分时间都花在了移动应用上,但94%的应用收入只来自于1%的发行商,而用户80%的时间都只花在5款应用上。

与此同时,超过一半的网络流量来自移动端。换句话说,用户不会下载你的应用,而是只使用 Facebook、Instagram 和 Snapchat 等热门应用,或者浏览网页。

OMG,看到这些数据我都都惊呆了!

一个应用的用户中,80%的人都不是活跃用户。

安装的应用中有25%从未使用过,然后在3天内就失去了77%的用户,并且在一个月内最终会流失90%。


就像在 App Store 中找寻一个目标用户

虽然应用程序商店优化(ASO)非常重要,但在应用商店的海洋中被发现变得日趋困难。即使你的应用是通过其他媒体被发现的,比如谷歌搜索或 Facebook 的帖子,用户也很可能不会马上安装你如视珍宝的小应用。

这背后的原因是,用户还没有看到你的应用的价值。他们无法先试用一下,所以他们不会轻易地就将这款应用下载到他们的设备上,而且还会占用他们本来就捉襟见肘的设备空间。

开放的网络可能是未来,但并不是现在。

我希望所有的 Web 开发人员都能读一下这篇命名优雅的文章,《去他妈的开放网络》。里面介绍了一个开放网络的倡导者,同时也是一个初创公司的创始人,他说出了开发 Web 的痛苦,包括浏览器的碎片化、兼容性问题以及 Web 技术普及的缓慢。以下是他原话的节选:

PWA 可能是未来的发展趋势,但如果你是一家初创公司,还想提供全新的用户体验的话,那么前端开发者很有可能不会赞同你的想法。移动版的 Safari 也不过就是另一个 IE6 而已。我们拥有比以往各个时候都更令人惊叹的技术,但我们也有如此多的平台、浏览器和屏幕尺寸,因此打造一种一致的体验几乎没有任何意义。

正如所看到的,在 Web 开发领域中碎片化问题也一直存在,甚至可能比 Android 生态系统还要糟糕。

你想要移动端通知?可以,但不能是在移动版的 Safari 上。想要多行的省略号?可以,但只能在 WebKit 上。想要跨浏览器的统一大小?做梦吧你。我们在 Safari 上修复的一个布局 bug,但在 Edge 上就不能用了。我们在 Chrome 上改变字体大小,但你在 Firefox 上看到的就是屎。那隐藏地址栏或控制屏幕缘的滑动呢?别傻了好吗。还有,别让我碰那些新的自定义的移动端键盘,以及输入框和自动补全的那些糟心事。

一句话总结碎片化的问题:

是的,你现在可以更好地开发2007年风格的网站了。这些网站可以在不同的平台上保持一致性,而且表现出色。但我家12岁的孩子不想要2007年的网站,他们想要2016年的应用程序。


Twitter 的移动应用


别误会我,Web 还是很棒的

另一方面,你也应该阅读这篇文章,《iOS 不支持 PWA,那又怎样?》,文章指出尽管 iOS 还不支持服务进程等前沿的功能,但由于 PWA 改善了用户体验,转化率仍然有很大的提升。

旁注:大多数用户对“添加到主屏”并不习惯

在用户体验方面,PWA的添加到主屏的功能(A2HS)对终端用户来说就好像这个应用不是官方版的。就这个问题我问了很多用户,他们中的大多数人都不习惯这么做,还会问我为什么不在 Play Store 里安装呢。

用户需要一段时间才能适应这一模式,这也是我不完全依赖 A2HS 的原因,现在我还是会选择实际的移动应用来安装。尽管开放网络是一条更好的道路,但是一条大多数人似乎还不接受的道路。

一个有趣的观察是,在 Android Launcher 中,从主屏中删除一个 PWA 快捷方式比从 Launcher 中删除应用更容易。对此我没有任何看法,虽然这是意料之中的,但对我来说有点意思。


你马上就要到达隧道的终点了。有时候最好的选择就是不去选择。

解决方案

最后我们可以看到,两个平台都有各自的优缺点。那么,哪一个才是最好的平台呢?

事实证明,我们不需要回答这个问题。我们只是需要实践。

发现之于轻量的 PWA,留存之于移动应用

我的方案是提供一个服务的 lite 版本作为一个轻量级的 PWA,和一个提供完整体验的 React Native 的移动应用。许多初创公司和大型公司已经利用这种方法尝到了甜头,本文的最终目标是向你解释为什么这条路走得通。

PWA 可以通过谷歌搜索被快速地访问、发现和使用。如果这样不能吸引你的话,更典型的是在Facebook 上,通过信息流中的一个帖子或者 Messenger 分享的一个 URL 就可以让你使用一个轻量级的 PWA。

这些用户可以立即使用提供的服务,在一次性的交互中使用这个 PWA,进行一个简短的操作,或者立即收集他们所需要的信息。之后,如果他们需要更好的或更丰富的体验,或者精简版对他们来说是不够用的话,就可以去下载完整的移动应用。

移动应用附带了更好的性能、更简单的支付方式、平台一致的用户界面,以及用户对开发人员的期望。

因为这个了不起的未来 Web 还没有成为现实(抱歉了,Eric),现在完全依赖它就不是一个好主意。我们应该先使用手头上有的技术在 Web 上提供最好的轻量级体验,然后通过原生应用来补全整个用户体验。


非常感谢你的阅读!

我非常高兴你能读到这!我是 Phoomparin Mano,一个来自泰国的15岁的全栈开发者。这是人生中的第一篇博客,如果言辞不妥还请包涵。如果你喜欢这篇文章,请向其他人推荐这篇文章,因为这对我来说意义非常重大。谢谢!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,236评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,867评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,715评论 0 340
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,899评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,895评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,733评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,085评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,722评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,025评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,696评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,816评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,447评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,057评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,009评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,254评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,204评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,561评论 2 343

推荐阅读更多精彩内容