引言
随着移动互联网的发展，移动端应用的需求越来越大，由此引发的问题便是应用的安装和更新问题。在这种情况下，PWA 技术应运而生。PWA（Progressive Web App） 是一种使用 web 技术编写的应用程序，能够在网页中实现类似于原生应用的功能和体验，让用户在不需要安装应用的情况下，即可在手机上使用。那么，PWA 和原生应用都有哪些优劣呢？
优劣对比
1. 安装使用
PWA
PWA 不需要从应用商店下载安装，只需要访问 App 网站即可使用，用户只需将 App 网站添加到主屏幕，便可实现一键打开。
原生应用
原生应用则需要从应用商店下载安装，下载和安装的过程相对较为繁琐，而且安装过程可能会受到网络环境等限制。
2. 用户留存率
PWA
PWA 的留存率相对较高，因为不需要下载安装，用户进入网站后就可以使用应用，而且不需要占用手机存储空间，用户相对更乐于使用。
原生应用
原生应用的留存率相对较低，因为很多用户不会长时间地保留所有应用，卸载也相对容易，空间有限制或者应用太多，某些应用很容易被遗忘或替代。
3. 应用体验
PWA
PWA 通常具有极佳的交互体验，虽然该技术受限于 web 技术，但是当前的框架和技术已经能够支持多种富应用。
原生应用
原生应用则在体验方面具有更高的优势，原生应用可以在不同操作系统平台下开发，在基础功能的支持上远远超过了 PWA。
4. 数据流量和网速
PWA
PWA 通常不是在 web 页面中直接加载的，它们通常使用离线应用程序的方式进行访问，因此不会受到网络状态的影响，所以它通常使用较少的数据流量。
原生应用
原生应用则需要从应用商店下载，受到网络状态和版本等因素的影响，而且使用的数据流量相对更大。
示例代码
PWA
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------------------------
---------- ----------
----- -------------- ----------------------
----- ---------- --------------------
----- ------------------ ------------------
-------
------
-------- --- -------
--------
-- ---------------- -- ---------- -
---------------------------------------------------------------------------------- -
-------------------- ------ ------- --------------
------------------------ -
-------------------------- -------
---
-
---------
-------
-------原生应用
-- -------------------- ---- -------
------ ---------------------
------ -----------------------
------ ------------------
------ ----- ------------ ------- -------- -
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
------ ------ - --- ------------ -----------------
-------------------------------
-
-总结
综合来看，PWA 技术相对比较轻量级，适合移动端应用开发，可以大大节省用户的流量和手机的存储空间，也具有良好的用户留存率和优秀的应用体验。而原生应用在性能、体验和 API 支持上都有更高的优势，比较适合开发具有高复杂度和大量计算的应用。针对具体需求，可以根据实际情况选择技术方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645c49e6968c7c53b0e98dc3