首先简单介绍一下什么是原生app和webapp:
原生app是基于平台开发的一个应用程序,webapp则是一个web应用(和pc端的web应用没有本质区别,唯一的区别是一个在pc端的浏览器中访问,一个在移动端的浏览器中访问)。
再举一个例子:原生app类似于安装在电脑上的微信应用程序,webapp则类似于电脑上在浏览器中运行的网页版微信。
不过实际情况是目前已经很少有纯的原生app或webapp,绝大多数的情况是两者混合使用——即外面套原生app的外壳,在应用内部嵌入或多或少的web页面。然而我们在决定开发一个app后,仍然需要考虑哪些功能以原生app的方式开发,哪些功能以webapp的方式开发。下面我们来看看两者的区别:
开发成本:
对比特性 | 原生app | webapp | 对比结果 |
---|---|---|---|
工作量 | 基于平台的应用开发,需要在每个平台(IOS、android)都开发一套应用。 | 基于浏览器的web开发,需要兼容各个不同类型的浏览器及浏览器各个版本之间的差异。 | 原生app工作量高于webapp。 |
开发技能 | IOS平台:object-c、c或swift(apple官方推荐);android:java、kotlin(google官方推荐)或reactNative。 | javascript+html+css(且业界有通用模版供下载使用)。 | 原生app技能要求高于webapp。 |
维护成本:
对比特性 | 原生app | webapp | 对比结果 |
---|---|---|---|
更新方式 | IOS需由apple审核后在appstore发布,然后用户从appstore处更新;android需要用户下载新版本安装包或更新包重装应用或更新应用。 | 直接在服务端更新,用户直接刷新页面即可。 | 原生app更新方式不如webapp便捷(且由于apple的审核机制,可能发生IOS和android平台版本不同步的问题)。 |
用户体验:
对比特性 | 原生app | webapp | 对比结果 |
---|---|---|---|
性能 | 大多数资源已经在用户手机内,加载速度快。 | 所有资源均需向服务器请求获取,且css动画在移动端过于消耗资源,导致性能有所下降。 | 原生app性能优于webapp。 |
可支持行为 | 可调用系统底层api(如调用摄像头、陀螺仪接口等)。 | 只能通过浏览器调用系统底层api(部分浏览器当前已支持部分底层api的调用,但中转必然会损耗性能)。 | 原生app相比webapp可支持行为更完整,性能也更好。 |
网络依赖性 | 可以缓存部分数据,无网络部分功能也能正常使用(如微信仍然可以查看缓存的聊天记录)。 | 完全依赖网络,离线后无法使用。 | 原生app优于webapp。 |
综合上面的对比来看,我们可以得出这样的结论:
app内的固定功能(不频繁变更的功能,包括功能本身调用方式的变更和功能包含内容的变更)以原生app的方式开发(如调用摄像头执行人脸识别)——开发成本较高,但维护成本(不轻易更新)和用户体验都可以得到改善;而可能频繁变更的功能(功能本身要一直迭代优化或功能包含内容频繁变更)则以webapp的方式开发(如外卖app内展示商家列表信息)——开发维护成本都较低,且不涉及需要调用底层api的场景(且由于数据实时性的要求,必须获取最新的数据资源——即无法大量使用缓存)。
另外要注意一点,在IOS平台上,如果混合应用中原生内容过少而web内容过多时,有可能审核不过。