大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!
今天给大家带来的主题是“Flutter vs PWA:跨平台移动应用程序开发的未来是什么?”。这篇文章大部分内容来自于 Jane Vyshnova 的文章《Flutter vs PWA: What Is the Future of Cross-Platform Mobile App Development?》,但是高级前端进阶对内容有大量修改和补充,同时对部分已经过时的内容进行了重新组织。
话不多说,直接进入正题!
如今,有很多机会可以降低移动应用程序开发的成本, 而十年前唯一能做的就是构建一个原生应用程序。 但是原生应用程序的缺点很明显,就是必须花费两倍的开发成本来适配 iOS 和 Android 平台差异。 随着诸多跨平台方案的兴起,通过单个代码库开发适配多端的应用程序变得越来越流行。
Flutter 和 PWA 的出现和流行都旨在快速构建跨平台应用程,同时提供诸如原生移动应用程序的用户体验。 但是,Flutter 和 PWA 哪一个是开发项目的最佳解决方案? 本文将尝试解答这个问题。
Flutter 是一个 SDK,用于创建快速执行和具有吸引力的跨平台移动应用程序,由 Google 提供。 截止 2023 年,Flutter 可以用于构建 Flutter 网络应用程序和 Flutter 桌面应用程序(适用于 macOS)等等。 此外,随着相关库的出现,Flutter 可能会在未来几年用于构建 PWA。
下面为著名公司开发的 Flutter 应用示例:
在国内 Flutter 也是大放异彩,比如腾讯:微信、QQ、QQ邮箱;阿里:闲鱼、淘宝、菜鸟、UC、盒马、饿了么;百度:百度网盘;头条:火山引擎;美团:美团商家版;京东:京东;其它:B站、微博、快手、链家等等都是通过 Flutter 开发的。
那么 Flutter 适合 Web 开发吗? Flutter 是一种全新的跨平台工具,提供了比上一代框架(如 PhoneGap 或 Ionic)更好的用户体验,使得 Flutter 移动应用程序具有与原生应用程序接近的性能。这是因为 PhoneGap 和 Ionic 等使用中间组件连接到设备功能,如相机或蓝牙,而 Flutter 省去了组件通信的桥梁。
PhoneGap: 是一款 HTML5 平台,开发人员可以使用 HTML、CSS 及 JavaScript 来开发本地移动应用程序。同时只需编写一次代码,然后在 7 个主流的移动平台和应用程序商店 (app store) 里进行发布,这些移动平台和应用程序商店包括:iOS、Android、BlackBerry、webOS、bada、Winodws Phone 以及 Symbian。
Ionic Framework: 是一个移动 UI 工具包,用于构建高质量,跨平台的本机和 Web 应用程序体验。只需一个代码库就可以更快开发代码,在 JavaScript 和 Web 上随处运行。
Flutter 的另一个强项是 UI 设计的优势, 它包含大量内置的 Flutter 小部件,用于创建 Material Design 和 Cupertino 风格的 UI。 因此,开发人员无需额外努力就能够快速、方便地构建前端的外部小部件。
任何一种技术的出现都有自己的优势和劣势,使用 Flutter 开发应用程序有以下诸多好处:
除了上面介绍的 Flutter 诸多优势外,Flutter 应用开发也有自己的诸多不足,主要可以概括为以下几个点:
比如下面是 Dart 语言的一个简单示例,和前端熟悉的JavaScript开发语言还是有比较大的差异,从这点来看在一定程度上会对 Flutter 的普及有一定的影响。但是值得一提的是,前端领域技术的发展实在太快,从而造就了前端开发超强的学习能力(鼓励下大家,哈哈)。所以,这都不算是什么大问题!
// 定义函数void printInteger(int aNumber) { print('The number is $aNumber.'); // 打印到控制台}// 应用开始执行入口void main() { var number = 42; // 定义和实例化一个变量 printInteger(number); // 调用一个函数}
由谷歌开源的 Flutter 于 2017 年 5 月首次发布 beta 版本,并于 2018 年发布第一个正式版本,近年来 Flutter 在开发者中广受欢迎。 目前,Flutter GitHub 仓库已经收到了超过 153k 的 star(超过 React Native 的 109k),25.3k 的 fork、贡献者超过 1.2k+, 超过 30% 的程序员使用 Flutter。
PWA(Progressive Web Application ,渐进式网络应用程序)是跨平台开发的另一种解决方案。 PWA 是一种 Web 应用程序,可以在任何设备上的 Web 浏览器中打开,包括:台式机、笔记本电脑、智能手机、平板电脑等。当在移动设备上打开 PWA 时,PWA应用会努力提供接近原生应用程序的体验,而且也可以访问设备硬件(推送通知、摄像头、GPS 等)并在主屏幕上安装等。
如上图所示,根据 Google Trends 的数据,从 2018 年到 2023 年,Flutter 相对于 PWA 的搜索热度指数有明显的增长(平均热度 59),而相比之下 PWA 一直处于不温不火的处境(平均热度 7)。从这两年前端 Flutter 的热度来看也能可见一斑。
Flutter 提供集成到用户体验中的高质量 PWA,包括:安装、离线支持和自定义用户体验。
Flutter Web Support 使开发者能够构建复杂的独立 Web 应用程序,其中包含丰富的图形和交互式内容,以覆盖各种设备的终端用户。
Flutter Web Support 为现有的 Flutter 移动应用程序提供基于浏览器的交付模型。
目前,并非所有 HTML 脚本都适合 Flutter。 例如:基于文本的、流式的、静态的内容(如博客文章)受益于构建互联网的以文档为中心的模型,而不是 Flutter 等 UI 框架可以提供的以应用程序为中心的服务。 但是,开发者可使用 Flutter 将交互式体验嵌入到这些网站中。
PWA 与 Flutter 相比属于完全不同的应用类别,PWA也可以在手机上打开,其本质上是可以在浏览器中运行的 Web 应用程序。 因此,PWA 天生就是跨平台的,用户几乎可以在任何设备(包括台式机和手机)上打开。
PWA(Progressive Web Apps,渐进式 Web 应用)运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富,使其具有与原生应用相同的用户体验优势。
技术上来看,PWA 是使用 HTML+CSS+JavaScript(以及 Angular 或 Vue 等 JS 框架)等 Web 技术开发的。 而开发者将 Google 的 Flutter 与 PWA 进行比较并非巧合。 如果您在手机上打开后者,PWA 也会提供类似于本机应用程序的体验。
用户无法在常规应用商店中找到 PWA,因为它们不被视为移动应用程序。 相反,它们可以使用 SEO 推广为常规网站,并具有易于共享的 URL。 需要注意的是,从 2019 年开始,PWA 可以上传到 Play Store。 Twitter Lite 和 Uber 是很好的 PWA 例子。 因此,PWA 现在似乎比常规原生应用有更多的推广渠道。下面时候最著名的 PWA 示例:
Native 应用程序通常可以访问移动设备功能,例如:通知、蓝牙、记录媒体等,而 PWA 使用现代浏览器的功能来实现,但是这样做的缺点是 PWA 严重依赖于浏览器。
和Flutter一样,PWA技术也有自己独特的优势和缺点,而优势主要包括以下几个点:
Service Worker :本质上充当代理服务器,位于 Web 应用程序、浏览器和网络(如果可用)之间。 它们旨在实现有效的离线体验的创建、拦截网络请求并根据网络是否可用采取适当的操作,以及更新驻留在服务器上的资产。 Service Worker 还允许访问推送通知和后台同步 API。
和 Flutter 一样,PWA技术也有自己的缺点,而缺点主要包括以下几个点:
下图选择了一些最重要的参数来对比 Flutter、PWA 与原生 Android 和 iOS 应用程序。 请记住,原生应用程序需要开发两次,Flutter 和 PWA 等技术提供了相当可观的成本优势。
PWA 的典型适用场景:
Flutter 的典型适用场景:
虽然,Flutter 和 PWA 可能看起来像是两个完全不同的选择。 但是,它们都可以在移动设备上访问,在某种程度上可以被认为是相互可替代的。 两者都在变得越来越受欢迎,但是很难预测一个是否会取代另一个。 无论哪种方式,它们都有自己的独特适用场景。
因为篇幅有限,文章并没有过多展开,如果有兴趣,可以在我的主页继续阅读,同时文末的参考资料提供了大量优秀文档以供学习。最后,欢迎大家点赞、评论、转发、收藏!
https://github.com/facebook/react-native
https://github.com/flutter/flutter
https://dinarys.com/blog/flutter-vs-pwa-what-is-the-future-of-cross-platform-mobile-app-development
https://pub.dev/packages/pwa
https://trends.google.com/trends/explore?date=today%205-y&geo=US&q=Flutter,PWA
https://www.zhihu.com/question/485232734
https://www.oschina.net/p/ionic?hmsr=aladdin1e1
https://www.oschina.net/p/phonegap?hmsr=aladdin1e1
https://dart.cn/guides/language/language-tour
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps
an