从 PWA 到 TWA：Web 应用的未来
前言
Web 技术一直是前端工程师们的重心，如今它们的足迹已经延伸到了移动设备端，不仅能够通过网页形式实现各种功能，还能够以 PWA（Progressive Web Application）和 TWA（Trusted Web Activity）等新型技术形式扩大移动平台的覆盖面。本文将会详细讲解这两种技术的内部机制以及对于前端工程师的学习和指导意义。
PWA 的概述
Progressive Web Application, 简称 PWA，是一种可以被添加到设备主屏幕并像原生应用般使用的 Web 应用。它是在应用程序体验方面结合了 Web 应用的优点和组成部分，可以实现更快的加载、即时更新和缓存数据等优势。早期的 PWA 技术大致有以下几个方面：
- Web Service Worker
Web Service Worker 是 PWA 中的一个非常重要的技术，不仅能够隔离 Web 页面和 JavaScript 运行环境，还能够在后台处理推送通知、缓存页面和操作 DOM 树等功能。
-- -------------------- ---- -------
-- ---------------- -- ---------- -
------------------------------- -- -- -
------------------------------------------------------------------------ -- -
-------------------------- ------------ ---------- ---- ------ -- --------------------
-- --- -- -
-------------------------- ------------ ------- -- -----
---
---
-- Web Manifest
Web Manifest 是 PWA 另外一个非常重要的技术，它是一个 JSON 文件，用于提供 Web 与主屏幕之间的联系。通过 Web Manifest 能够让 Web 应用实现离线缓存、主屏幕启动和推送通知等功能。
{
"name": "My Progressive Web App",
"short_name": "MyPWA",
"start_url": ".",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#ffffff"
}- HTTPS
HTTPS 在诸多方面是 Web 安全的关键所在，而且在浏览器中访问 PWA 时也需要使用 HTTPS 来保证安全。
TWA 的概述
Trusted Web Activity, 简称 TWA，是目前 Android 平台基于 Chrome Custom Tabs 的一种新型技术，它可以帮助 Web 应用以标准的 Android 应用的形式运行，包括界面、许可、通知等功能。TWA 技术的本质需要 Chrome 浏览器的支持，相关概念如下：
- Chrome Custom Tabs
Chrome Custom Tabs 是 Android Native 阶段的一种 Web 内置浏览器，它与 Chrome 浏览器共享登录和信息存储状态，并能够让开发者更好的与用户交互。
val builder = CustomTabsIntent.Builder() builder.setToolbarColor(getResources().getColor(R.color.colorPrimary)) val customTabsIntent = builder.build() customTabsIntent.launchUrl(this, Uri.parse(url))
- Web Apps Manifest
与 PWA 类似，TWA 也需要使用 Web Apps Manifest 来描述它的各个方面，如名称、图标、描述、作者等等。
-- -------------------- ---- -------
-
------- ---------------------
------------- ------
-------------- ----------
------------------- ----------
------------ --------------
---------- -------------
-------- --
------ -----------------------
-------- --------
------- -----------
-- -
------ -----------------------
-------- --------
------- -----------
--
-PWA 与 TWA 的区别
- 运行环境
PWA 支持 iOS、Android 等操作系统和各种浏览器，而 TWA 只能在 Android 平台上使用 Chrome Custom Tabs 运行。
- 对比性能
PWA 能够在大部分场景下与原生应用程序媲美，但对于一些复杂的程序则会有性能低下的问题。TWA 平台是基于 Chrome Custom Tabs 的，其性能取决于 Android 系统和浏览器设置，通过零延迟加载，TWA 提高了 Android 用户对于网页内容的体验并且表现出不错的性能。
- 开发难度
PWA 基本上仍然是 Web 技术的延伸，因此很多 Web 开发者会很快熟悉它。而 TWA 技术需要比 PWA 技术更多的 Android 平台和本机应用程序的知识来完成。
总结
在本文中，我们讨论了 PWA 和 TWA 两种 Web 应用程序的新技术，并且介绍了它们的工作原理、关键技术以及对于前端工程师的学习和指导意义，更在最后总结了两种技术的异同点。对于想要开发移动端 Web 应用程序的前端工程师来说，无疑将使用 PWA 和 TWA 技术成为未来的发展方向。
参考链接
[1] https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps
[2] https://developer.chrome.com/docs/android/trusted-web-activity/overview/
[3] https://mozilla.github.io/standards-positions/what-is-a-progressive-web-app/
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6477f155968c7c53b043c884