HTML5、Hybrid APP、Native APP对比和技术选型
HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能,搞出来一些混合APP的解决方案。
比如Apache的Cordova(也就是以前的PhoneGap),其软件架构如下:
Cordova的工作原理是生成一个内置webview控件的容器app(这是个本地app),然后在webview中运行html/css/js的代码,
如需调用本地服务如相机/传感器,则通过JS本地桥接器来执行。
这种方式的混合APP本地化的比例很小,本质上和Web程序更为接近,因此性能不佳。
为了追求更好的性能和本地化体验,有些框架扔掉了WebView,而直接提供了UI组件的JS接口,架构如下:
这种混合APP本质上更接近移动本地应用,也因此需要针对不同的平台做定制开发。
后面这种解决方案主流的有微软的Xamarin、Facebook的React Native、Google的NativeScript。
那么在客户想要移动应用的时候,究竟该怎么选择呢?
基本上我们要准备一些问题,来帮助客户搞清楚实际想要的是什么,然后提出自己的建议。
1. 是否需要发布到应用商店
如果是,那么应该选择移动本地应用或Hybrid APP。
2. 是否要给APP定价
如果是,同上,只有应用商店才支持下载付费。
3. 是否需要调用传感器、相机等底层本地接口
如果是,同上,因为纯HTML5无法访问这些接口。
4. 性能是否是第一考虑要素
如果是,同上,因为用HTML5开发一个FPS游戏,操作响应会比较糟糕。
5. 项目预算
如果预算有限,那么可以优先选择使用HTML5开发。如果预算不限,希望通过更多的渠道接触用户,则可同时招iOS、Android和HTML5。
6. 是否想开放应用程序中的内容以提高SEO
如果是,建议选择使用HTML5开发。
7. 是否是“通用”应用程序
比如外卖、项目管理、电商、博客这些,建议使用Hybrid APP或HTML5。
8. 是否想设计个性化
如果是,建议使用HTML5和本地应用,Hybrid APP通常是长相雷同的。
最后,我个人认为Hybrid APP就像是特色社会主义,是和现状妥协的产物,将在HTML5初级阶段长期存在。
远方依然在纯HTML5应用,而本地应用无论现在还是将来都仍会占据需要更多底层设备支持的领域(但也意味着空间将缩小)。
最新评论
- 相关文章
2019年开源WebRTC媒体服务器选型比较
什么是WebRTC服务器?在WebRTC的早期开始,该技术的主要卖点之一是它允许点对点(浏览器到浏览器)通信,几乎没有服务器的干预,服务器通常仅用于信令(比如用于...
增强现实引擎ARToolKit工作原理简介
ARToolkit是一个基于CV(计算机视觉)和Marker(标识)的开源增强现实引擎。其具备如下功能特性:A. 鲁棒跟踪,包括基于标记的跟踪与基于特征的跟踪;
HTML5 And Canvas 2D Specs Are Now Feature Complete, First HTML 5.1 Working Draft Published
We’ve been writing about HTML5 for quite a while, but, until today, the actual HTML5 specs and standards were still moving targets. Now, however, the...
谷歌ARCore技术特性简介
谷歌美国时间2017.8.29号刚发布了ARCore预览版,这是一个类似于苹果ARKit的增强现实SDK,在此之前,谷歌虽然已投资AR平台Tango,但由于需要特定的硬件和传感器,...
踏得网精选2016年度10大最佳HTML5动画
踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。使用一些在线H5生成工具的作品,因其主要使用图片和CSS3套路动画,...
CSS3原生变量(Native Variables)新特性简介
对Web开发者来说,一个盼望已久的特性是CSS终于支持原生变量了!
变量是程序语言中用来解决代码重复和进行表达式计算的关键概念(想想数学方程式中的x)。...常见面试题JavaScript闭包(ES5语法)
JavaScript闭包(Closure)是常见的JS面试题,是否理解闭包是一个简单的区分JS初级和高级程序员的判例。几乎每个JS程序员都在使用闭包,有意或无意间。比如编写一个jQuery鼠标点击处理函数:$(function()
如何使用CSS3合成模式(blend-mode)和滤镜(filter)实现彩色蜡笔(时光机)照片特效
在之前的文章中我们已经详细讲解过CSS3滤镜(filter,也可称之为过滤器)的工作方式,本文将实现一个当下流行的时光机相片特效实例来说明其实际用途。
我们...Blender2.7 快捷键一览表
通用操作
停止当前操作:ESC
快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
单选:鼠标右键(RMB)全选:A
框选:B
刷选:...S3TC(S3 Texture Compression)纹理压缩格式详解
使用S3TC格式存储的压缩纹理是以4X4的纹理单元块(texel blocks)为基本单位存储的,每纹理单元块(texel blocks)有64bit或者128bit的纹理单元数据(texel data)。这...
WebGL入门教程3 - Canvas、Context、API和绘制一个矩形
如何基于Canvas来模拟真实雨景Part1:预备知识和创建基本对象
使用CSS3实现流星雨动画教程
很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...
更多...