【转（阮⼀峰）】H5⼿机APP开发⼊门（概念篇）
H5 ⼿机 App 开发⼊门：概念篇
作者： 阮⼀峰
⽇期： <abbr class="published" title="2019-12-10T09:13:31+08:00" >2019年12⽉10⽇</abbr>
毫不奇怪，⼿机应⽤软件（mobile application，简称 mobile App）的开发⼯程师供不应求，⼀直是 IT 招聘的热门。
image
如果你开始学习⼿机 App 开发，就⼀定会听到 H5 这个词。它是⽬前的主流开发技术之⼀，容易上⼿，开发周期短、成本低、兼容传统 Web 开发。但是，很少有⽂章详细介绍，H5 到底是什么技术，有什么原理，跟其他技术的差异在哪⾥。
本⽂就是 H5 的⼊门教程，今天是第⼀篇，介绍基本概念。内容尽量通俗，不过本来也没有太复杂的东西。我希望这篇⽂章可以帮助新⼿⼊门，也可以供熟练开发者回顾和整理知识点。
image
image
image
2.2 优点
原⽣ App 的优点主要是两个：（1）较好的性能和体验；（2）可以使⽤系统的所有硬件和软件 API，
⽐如 GPS、摄像头、麦克风、加速计、通知推送等等，能充分发挥系统的潜⼒。
2.3 缺点
原⽣ App 的缺点主要是成本，每个⼿机平台都要建⽴⼀个独⽴的开发团队，⼤公司⼀般都有 iOS 和安卓两个开发团队。如果出现第三个平台（以前的 Windows Phone，也许将来的华为鸿蒙 OS），就要组建第三个团队，成本就更⾼。
第⼆个缺点是，原⽣ App 使⽤底层操作系统的语⾔，都是很重的编译型语⾔，开发和调试成本相对较⾼，时间周期长。
第三个缺点是，原⽣ App 必须下载安装才能使⽤，只要升级版本，就必须重新下载安装。⽤户往往不愿意更新版本，⼚商被迫不得不长期⽀持很久以前的旧版本。
三、Web 应⽤
3.1 概念
Web App 是使⽤⽹页做的应⽤程序，必须在浏览器中使⽤。 ⽐如，你在浏览器中收发邮件，就是在使⽤ Web App。
Web App 主要使⽤⽹页技术，即 HTML、JavaScript 和 CSS。2008年，w3c 组织发布了 HTML 第5版，简称 HTML 5，该版本⼤⼤增强了⽹页的功能，使得⽹页可以当作应⽤程序使⽤，⽽不仅仅是展⽰⽂字和图⽚，这就是 Web App 的由来。
image
3.2 优点和缺点
Web App 的优点是：（1）不需要下载安装，打开浏览器就能使⽤，⽽且总是使⽤最新版本；（2）对于开发者来说，Web App 写起来⽐较快，调试容易，不需要应⽤商店的批准就能发布。
Web App 的主要缺点有两个。⾸先，浏览器提供的 API（即 Web API）很有限（⽬前只有相机、GPS、电池等少数⼏个），⼤部分系统硬件都不能通过⽹页访问，也⽆法直接读取硬盘⽂件，所以 Web App ⽆法充分利⽤平台的硬件。
第⼆个缺点是，⽹页通过浏览器渲染，性能不如原⽣ App，不适合做性能要求较⾼的页⾯。
3.3 Web App 的劣势
Web App 需要打开浏览器才能使⽤，这意味着，⽤户必须记住如何导航到它，要么直接输⼊⽹址，要么翻书签。这使得进⼊ Web App，远不如原⽣ App ⽅便。这点很致命，事实表明，⽤户偏好原⽣ App。
⾕歌曾经调查了原⽣ App 和 Web App 各⼀千个，发现 Web App 可以覆盖更多的⽤户（1100万 vs 400万），但是原⽣ App 的⽤户使⽤时间（188分钟）远超 Web App（9分钟）。
image
image
另⼀项调查发现，⽤户87％的时间⽤在原⽣ App，13％的时间⽤在 Web App。由于这个原因，企业很少开发 Web App，都把原⽣ App 当作⾸选。
web浏览器在哪里打开但是，Web App 也不是毫⽆竞争⼒。根据调查，普通⽤户每⽉平均使⽤27个原⽣ App，但访问了100多个⼿机⽹站。这意味着，⽤户的 App 使⽤时间都被头部 App 占据了，⼩公司的 App 使⽤频率⾮常低，获客成本极⾼，最终变成僵⼫ App。因此，⼩公司开发 Web App 更划算，不仅成本低，⽽且可以服务更多的⽤户，以及更好地宣传⾃⼰（可以被搜索引擎收⼊）。
3.4 PWA
为了推⼴ Web App，⾕歌公司的 Chrome 浏览器团队做了很多努⼒。他们认为，Web App ⾜以满⾜⼤多数 App 的需求，但是三⼤缺陷阻碍它的推⼴。
1. 不能从⼿机的⾸屏直接进⼊。
2. 缺乏⼿机状态栏和锁屏时的通知推送能⼒。
3. 不⽀持脱机访问（即断⽹也能使⽤）。
image
为了解决这些问题，Chrome 团队开发了新技术"渐进式 Web App"（Progressive Web App，缩写 PWA）。它可以把⽹站缓存在⼿机⾥⾯，供离线时使⽤，还能在⼿机⾸屏⽣成图标，直接点击进⼊，并且有通知推送能⼒，也不带有浏览器的地址栏和状态栏，跟原⽣ App 的使⽤体验⾮

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。