WordPress EXP
分享10年建站经验

什么是 Progressive Web Apps(PWA)渐进式 Web 应用程序

早几年就在国内打造无数个内网环境(WX小程序、BD小程序、TT小程序……)且互不相通的时候,谷歌更早的推出了 Progressive Web Apps 渐进式 Web 应用程序,简称 PWA。它们已经存在了几年,但随着 Web 浏览器的发展,它们开始变得越来越普遍。而这个技术是通用的,不会像国内玩家围着自己的圈子转。

缙哥哥的博客(www.dujin.org)已经使用 PWA 一两年了,今天我们就以此来给大家分想下为什么要使用PWA,以及如何在 WordPress 中构建 PWA 这样的 Web 应用程序。

什么是 Progressive Web Apps(PWA)渐进式 Web 应用程序 - WordPress EXP

什么是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插件推荐

  • SuperPWAhttps://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 上找到。
赞(0) 打赏
转载请注明来源及链接:WPEXP » 什么是 Progressive Web Apps(PWA)渐进式 Web 应用程序
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏