• PWA会替代Native App成为未来主流的应用开发模式吗?
  • 发布于 2个月前
  • 358 热度
    0 评论

PWA 这个词已经出现很久了,如果读者做嵌入式开发应该不会很了解,如果是做服务端和前端或多或少了解,最近在聊这方面的话题发现还是有一些人不知道这个 PWA 是什么技术?PWA 是 Progressive Web Apps 的缩写,中文翻译为渐进式网络应用,早在 2014 年,W3C 就公布过 Service Worker 的相关草案。


Service Worker 可以不干扰视图渲染层线程,运行独立于 Web 站点只请求原始数据,而不涉及任何样式或布局信息,但是其在生产环境被 Chrome 支持是在 2015 年,由 Google 工程师 Alex Russell 和 Frances Berriman 共同提出,在他们的一篇文章Progressive Web Apps: Escaping Tabs Without Losing Our Soul 的博文中详细阐述了 PWA 的概念和优势,PWA 旨在将 Web 应用程序与本地应用程序的最佳特性结合起来,提供一种更好的用户体验,包括快速加载、离线访问和与设备功能的集成。


PWA 优点是不需要从应用商店进行安装,而是通过网址 URL 来进行访问,简单的来说就是不用下载,用一个 URL 就能直接打开,将一个传统的网页可以渐进式地变成和本地原生 App 一样来使用,比如被添加到主屏幕、全屏方式运行、离线工作、推送通知消息等,这个和目前腾讯的微信小程序类似的。微信小程序确定是被腾讯锁死在微信里面,只能通过微信的小程序商店和微信内搜索得到,但 PWA 你应用可以被搜索引擎直接搜索得到,搜索引擎就为应用到入口,这和各手机厂商的应用商店是有着明显的差异的。


小程序和 PWA 这种应用开发模式出现比较晚,因为首次打开这种应用需要从服务器端下载各种资源文件,在 2015 年时候如果读者有使用过手机都清楚那个时候大部分还是 3G 和 4G 的时代,部分地区 WIFI 也不是全面的覆盖,这就会带来一个新问题,如果全部采用 Web App 的方式进行开发应用,每次都需要加载。而采用传统的原生方式开发者只需要把应用上传到应用商店,用户去应用商店下载得到一个固定资源的 App 安装到手机上即可,最后动态数据从服务器端通过 HTTP 协议进行交互,减少一部分常用资源的加载过程,但是放到今天 5G 已经慢慢普及,网速越来越快,用户手机几乎不会切断流量或者 WIFI 连接的,所以个人感觉 PWA 更适合现在的应用开发模式。


Native App

在介绍原生应用之前,我想我有必要介绍一下什么 Web2.0 结构互联网,Web2.0 也不仅仅限制于在浏览器交互数据上,有了 HTTP 协议和移动互联网,更多是指基于 Web2.0 异步数据交换方式。Web1.0 是互联网的早期阶段人们上网的方式是查看一些固定死的静态网页内容,网站维护者每更新一次网站就需要重新发布一个新的网页版本,而且缺乏和用户互动性。


Web2.0 是互联网的现代阶段,大约从 2004 年开始至今,在 Web2.0 时代,互联网变得更加互动和社交,用户可以更积极地参与和贡献内容,用户可以把自己的数据通过 HTTP 协议发送到远端服务器上存储,其他用户可以查看,用户之间可以互动,鼓励用户生成内容用户可以创建、编辑和共享各种形式的内容,如博客、社交媒体帖子、视频、评论等。此后移动互联网来了,更多开发者从事开发移动端 App ,而这些 App 和服务器端数据交换大部分也是采用的 HTTP 协议,不管你是使用 Java 还是 Kotlin 还是现在推荐的 Dart 和 Flutter 开发 App,乃至是 Swift 和 SwiftUI 这种,都是属于视图层的开发,最终数据还是存储在远端服务器之上。


上图为一个原生的 App 应用架构,开发者如果是 Apple 开发者需要在 App Store 申请和购买开发者证书,才能把自己开发应用上传到应用商店中,而且还要自己维护复杂 App 服务器端和 App Store 中的应用版本和介绍信息,这就使得开发者开发一个版本 App 需要做很多工作,独立开发者更是要自己设计原型图,在通过代码被 UI 图变成用户软件界面,最后如果开发应用不是单机的应用还需要自己接入 API 服务器,这件使得开发周期很长。

Progressive Web Apps
但是对于现在的 PWA 应用,开发者更关注的实现 PWA 定义的规范和协议即可,就可以将一个网站变成 PWA 应用,当然这里有人会问了 PWA 应用有原生 App 应用性能高吗?或者能和原生 App 一样调用系统 API 实现类似原生应用功能吗?放到过去可能浏览器没有完全支持和提供这方面的 API ,例如你可能要实现一个读取门禁卡的 NFC 功能,那么 PWA 是不支持的,只能使用原生的 Java 去实现;但是今天各个浏览器已经完全提供这方面的 Device API ,提供后台 Service Worker API 允许 service worker 向其 PWA 客户端发送一个消息,还有 Background Synchronization API 运行通过异步的方式执行任务,这些只是列举出来一部分很有很多,具体读者查阅效果的文档。

并且 PWA 应用现在不仅仅是只支持移动设备,只要有浏览器引擎支持的,都可以运行,注意这里的浏览器引擎很重要!至于为什么我会在后面的篇幅中解答。下面是一个 PWA 应用不经可以在手机上运行和在桌面端运行效果图:

下面为桌面端应用的效果图,如下图:

这一看是不是感觉焕然一新?是不是觉得 PWA 应用未来的潜力很大,但是问题是如何解决相比原生应用的性能问题呢?

PWA 性能问题

聊到性能问题,这个就遇到我熟悉的领域了,如果大家都稍微做过一点应用端开发或者前端开发的,都会明白浏览器是一个不可或缺的基础软件,或者你是写 Java ,那么 Java 也是离不开 JVM 运行时支持的,如果你是一个大牛读到这里你应该明白我要说什么了。对的没错,这些技术栈的特点就是需要运行时或者执行引擎的支持。


浏览器中执行引擎和 JVM 设计有类似之处,都属于编程语言虚拟机范畴了,Chrome 中用的是 V8 ,而 Dart 语言也是虚拟机语言也有自己的虚拟机,Kotlin 也是一样的,Koltin 官方乃至都可以通过 K2 编译器将代码编译为 js ,放到浏览器上运行,这些的背后都依靠着虚拟机和执行引擎;例如我比较推崇的 GraalVM 项目,它的应用还是在 Serverless 领域,这个后面我也会把它和 PWA 联系起来,因为 PWA 需要后端支持,例如现在大部分云厂商推荐的 Function as a Service 方式来编写服务程序降低成本。


和原生的性能差的问题如何解决?这里的答案是采用 WebAssembly 的方式进行优化!Wasm 是一个低级编程语言,WebAssembly 是便携式的抽象语法树,被设计来提供比 JavaScript 更快速的编译及执行,WebAssembly 将让开发者能运用自己熟悉的编程语言编译,再借虚拟机引擎在浏览器内执行。这里典型的应用例子是 Google 地球,Google 地球最初使用 C++ 语言在 Windows 平台上开发,后来移植到了 Android 和 iOS 平台中,起到关键技术突破是使用了 Wasm 技术,所以未来如果 PWA 应用性能有问题,完全可以将一些逻辑使用 Wasm 来执行,下图为 Google 地球的截图:

只要能成功连接到服务器加载效果资料,客户端没有丝毫卡顿状况。

PWA 是否能成为主流?
最近几天如果紧跟时事的话,很多开发者肯定会了解到,在中国大陆地区所有的移动应用和小程序、轻应用都需要进行备案,如果没有备案连应用后台服务器都租不到,并且很多应用使用的第三方厂商的推广服务和统计服务(例如友盟统计),广告服务等,都不能被正常接入。服务端备案对应有自己的个人网站或者博客的,朋友应该很熟悉了,服务器备案已经实行很久了,现在大陆地区 App 全部要备案了,不备案就算是个人开发者都不能上架 app 到应用商店,在大陆做一个开发者是真的难 ☹️ ...

我个人还是认为未来 PWA 应用还是会成为主流的,因为 PWA 本质上还是通过网站进行提供服务的,对应 PWA 应用的开发者来说只需要针对网站备案即可,并且不用考虑多个平台的支持,并且目前浏览器已经提供 WebSQL 、IndexedDB 、LocalStorage 本地存储支持,一次加载所需要的资源被缓存到本地,如下图:

另外至关重要的是 PWA 程序应用资源文件和服务端 API 如何做?前面的提到了各个 Cloud 云厂商都提供了 CDN 和 Function as a Service 服务,这就可以让开发者把自己的程序文件放到 CDN 上分发到全球,另外配合 Faas 就可以实现一个完整应用程序和服务端服务,架构如下图:

如果最近注意到目前开发者工具 IDE 动态话,与昨天大陆地区 App 需要备案法颁发的同时,8月 8 日 Google 也推出他们新项目 Project IDX 一个基于 AI 的浏览器开发环境,集成 AI 支持全栈编程语言,跨平台真机预览一键部署,真的云端开发模式,IDX 和 PWA 有什么关系吗?看似表面是没有关系的,但是在我看来背后实质上背后在推动 PWA 这种开发模式,Project IDX 工作空间都具有基于 Linux 的虚拟机的全部功能,配合云中托管的通用访问权限,从 GitHub 导入现有项目,让你继续之前的进度。


还可以创建新项目,预先包含流行框架的模板,包括 Angular、Flutter、Next.js、React、Svelte、Vue 和如 JavaScript、Dart 、 Java 等语言,在最后,将应用推向生产方面的一个常见痛点是部署它,通过集成 Firebase Hosting,通过几次点击就可以部署你的 Web 应用的可共享预览,或通过快速、安全和全球托管平台部署到生产环境。这里的存储空间和函数服务全部都是在 GCP 上的,个人感觉最终目的就是要把程序代码和数据锁定在 GCP 上,开发运维和应用数据都在 GCP 上完成,强依赖关系按照这个项目想法。


目前 Project IDX 还没有开放使用,处于预约阶段,以上是我笔者个人对 PWA 应用和大陆地区要求 App 备案的看法,只代表我本人个人看法,预测未来,或许某个天这种开发模式的真就成为主流,时间会告诉我们答案。
用户评论