Web App vs Hybrid App vs Native App

问题

Web App、Hybrid App、Native App 三种移动应用开发方式有什么区别？移动端前端和 Web 前端有什么不同？

解答

三种应用类型对比

特性	Web App	Hybrid App	Native App
开发语言	HTML/CSS/JS	HTML/CSS/JS + 原生容器	Swift/Kotlin/Java
安装方式	无需安装，浏览器访问	应用商店下载	应用商店下载
更新方式	服务端更新，即时生效	部分热更新	需重新发版
性能	一般	中等	最佳
设备能力	有限（需浏览器支持）	较完整	完整
开发成本	低	中	高
跨平台	天然跨平台	一套代码多端运行	各平台单独开发

Web App

纯浏览器应用，通过 URL 访问。

// PWA 示例 - Service Worker 注册
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('SW registered'))
    .catch(err => console.log('SW registration failed'));
}

优点：开发快、更新即时、无需审核缺点：性能受限、离线能力弱、无法调用部分系统 API

Hybrid App

原生容器 + WebView 加载 H5 页面，通过 JSBridge 调用原生能力。

// JSBridge 调用原生方法示例
// H5 调用原生相机
window.JSBridge.call('openCamera', {
  quality: 0.8
}, function(result) {
  console.log('图片路径:', result.imagePath);
});

// 原生调用 H5 方法
window.onNativeCallback = function(data) {
  console.log('原生返回数据:', data);
};

代表框架：Cordova、Ionic、uni-app、Taro

优点：跨平台、可调用原生能力、支持热更新缺点：性能不如原生、WebView 兼容性问题

Native App

使用平台原生语言开发。

优点：性能最佳、体验流畅、完整系统能力缺点：开发成本高、需要多端维护、更新需审核

移动端前端 vs Web 前端

方面	移动端前端	Web 前端
屏幕适配	rem/vw/vh、响应式	固定宽度或响应式
交互方式	触摸、手势	鼠标、键盘
性能要求	更严格（设备性能有限）	相对宽松
网络环境	弱网、离线场景多	网络相对稳定
调试方式	真机调试、模拟器	浏览器 DevTools

/* 移动端适配示例 */
html {
  /* 以 375px 设计稿为基准 */
  font-size: calc(100vw / 3.75);
}

.container {
  /* 1rem = 100px（设计稿尺寸） */
  width: 3.75rem;
  padding: 0.2rem;
}

如何选择？

Web App：预算有限、快速验证、内容展示类
Hybrid App：需要跨平台、有原生能力需求、允许一定性能损耗
Native App：性能要求高、复杂交互、长期维护的核心产品

关键点

Web App 开发成本最低，但性能和能力受限于浏览器
Hybrid App 通过 JSBridge 连接 H5 和原生，平衡了效率和能力
Native App 性能最佳，但开发维护成本高
移动端前端需要关注触摸交互、弱网优化、屏幕适配
实际项目常采用混合方案：核心功能原生 + 运营页面 H5