早几年就在国内打造无数个内网环境（WX小程序、BD小程序、TT小程序……）且互不相通的时候，谷歌更早的推出了 Progressive Web Apps 渐进式 Web 应用程序，简称 PWA。它们已经存在了几年，但随着 Web 浏览器的发展，它们开始变得越来越普遍。而这个技术是通用的，不会像国内玩家围着自己的圈子转。
缙哥哥的博客（www.dujin.org）已经使用 PWA 一两年了，今天我们就以此来给大家分想下为什么要使用PWA，以及如何在 WordPress 中构建 PWA 这样的 Web 应用程序。
什么是PWA？
简而言之，PWA 就是 Progressive Web Apps 的缩写，翻译过来就是渐进式 Web 应用程序，由于名称太长，我们往往称其为 PWA。这是使用最新 Web 编程技术的软件。通常，PWA 可能会使用 JavaScript 提供推送通知。这样可以更轻松地保持最新状态，并且不需要任何复杂的安装步骤。此外，无论浏览器类型如何，它都应该对每个用户都有效，并且被认为是安全的（通过安全的 HTTPS 交付）。
PWA 还消除了用户从应用程序商店中查找、下载和安装应用程序的需求。它们将在任何浏览器中运行，并且可以从用户的主屏幕上访问。此外，Google 最近宣布，Chrome Web 浏览器的更新将包括与 PWA 的兼容性。这意味着用户可以在 Chrome 操作系统和台式机上获得 PWA 的好处，并且您不仅可以在移动设备上享受增强的体验。
PWA有什么优势？
WordPress EXP 简而言之就是 PWA 能够对网站提速、并加强推送通知， 提高网站的用户参与度和转换率。
咱们细说，在比较网站，Web 应用程序和移动应用程序时，要考虑的元素之一是推送通知。研究表明，启用推送的用户的参与度提高了88％。传统网站通常不提供此选项，但是通过创建 PWA，您可以合并此功能，而无需移动应用程序可能涉及的繁琐过程。
网站加载速度是考虑使用 PWA 的另一个原因。如果您的网站加载缓慢，则可能会损失大量流量。如果您将网站转换为 PWA，则可以不再担心速度。即使用户处于脱机状态，您的内容仍然可用，并且可以快速可靠地加载。
还有谷歌支持的研究表明，当您为网站创建模仿本地移动应用界面的 PWA 时，您的参与度和转换率可能会更高。与传统的“移动友好”网站设计相比，甚至是这样。
WordPress 构建 PWA
尽管 PWA 的开发成本比其他类型的开发便宜，但仍需要大量的编码知识，并且其开发人员必须了解其流行的 Javascript 框架和库（尤其是 Angular 和 React）的方法。例如，您将需要确定 jQuery 请求的细节，测试代码片段并开发分段的数据库返回值。此外，您将需要集成用于不同平台变体（以及样式元素）的变量，然后将其全部包装到看上去美观且功能良好的代码框架中。
尝试手动构建 PWA 时，请记住遵循 Google 的渐进式 Web 应用程序清单，并对照 Lighthouse 工具测试您的网页，以获得最佳的用户体验。
- 渐进式 Web 应用清单：渐进式Web应用程序清单描述了使用户能够安装和使用应用程序的原因，无论大小或输入类型如何。
- Lighthouse：用于提高网页质量的开源自动工具。您可以在公开或需要身份验证的任何网页上运行它。它对性能，可访问性，渐进式 Web 应用程序，SEO 等进行审核。
而使用 WordPress 的小伙伴，又不想更多的投入研发成本的情况，可以使用 WordPress Web Apps 插件来帮助您创建 PWA，尽管它们的规模较小。它们通常只允许实现一两个功能。但是，这仍然可以对 WordPress 网站做出重大改变。
PWA插件推荐
- SuperPWA：https://wordpress.org/plugins/super-progressive-web-apps/
SuperPWA 插件是把你的网站变成一个 PWA 一个快速简便的方法，只需不到一分钟即可设置您的 PWA。在支持的设备上访问您的网站时，您的网站用户将收到一条消息，提示他们进入“添加到主屏幕”。当他们单击此提示时，您的站点将作为PWA“安装”在其设备上，并在主屏幕上带有一个图标。之后，他们查看的任何页面都将被缓存并脱机使用。而且根据 WPEXP 的实际使用发现该插件可以控制您的 PWA 图标（类似APP程序）和其他样式功能，还可以通过搜索引擎访问 PWA 图标。 - PWA：https://wordpress.org/plugins/pwa/
这个是由谷歌贡献的 WordPress PWA 插件，但是功能相对较少。该插件旨在为这些主题和插件提供 PWA 构建块和协调机制，也不会彼此冲突。该插件的文档可以在 GitHub 项目 Wiki 上找到。
来源：
https://www.wpdaxue.com/wordpress-progressive-web-apps.html
