WordPress 站点很有必要借助渐进式 Web 应用（PWA）提升用户体验与 SEO 优化

说起渐进式 Web 应用（PWA）可能很多人比较陌生，其实国内的微信小程序就比较类似。从技术手段上来说，两者都是基于现阶段 Web 技术的，但是又不同：PWA 是 Web 的父集，通过提供更多的外部接口和规范来让网页应用获得原生应用才有的特点；微信小程序是 Web 的子集，通过简化 Web 开发过程和提供封闭完善的空间，使得原先的公众号用户以成本低于原生应用开发、体验高于网页应用 的伪原生应用。

其实，严格意义上来说 PWA 属于技术行业的战略范畴，小程序是的业务战略范畴。短期内小程序会得到局域性的快速响应和增长，但长远来说也是一种过渡技术，尤其是这种带有明显的产品特性的开发平台，会不会长久关键是其能否给其他企业带来足够的用户转化率。而 PWA 是为了彻底将前端开发打造成一个完整的客户端应用的开发体系。看似相近的技术理念，但格局不同的话，也没有太大的可比性。腾讯的小程序是个封闭的系统，Google 的 PWA 是个半开放的框架。系统的推广需要用户基数，这点腾讯不缺，所以小程序火爆是必定的，只不过不知道会多久。Google 的 PWA 框架现在规模不大，但的确是未来趋势，可是说不定半路杀出另一个移动网站标准框架抢过风头。PWA 其实已经铺垫了好几年，Chrome 只是把之前推出的一系列 feature 再次优化整合，带来更统一的体验。PWA 更面向未来，也是 Web 的发展趋势。

渐进式 Web 应用（PWA）有哪些特点？

• 启动速度快，且运行速度快

性能对于任何在线体验的成功都起着至关重要的作用，因为与性能不佳的网站相比，效果较好的网站能更好地吸引并留住用户。网站应专注于针对以用户为中心的性能指标进行优化。速度对于让用户使用您的网站应用至关重要。事实上，随着网页加载时间从 1 秒增加到 10 秒，用户跳出的概率会增加 123%。发生 load 事件后，性能并不止如此。用户绝不应当想知道他们的互动（例如点击按钮）是否已注册。滚动和动画播放时应该感觉流畅。 性能会影响您的整个体验，从用户对应用的看法到应用的实际性能。

• 适用于任何浏览器（国内浏览器除外）

在安装您的 Web 应用之前，用户可以使用任何浏览器来访问该应用。

渐进式 Web 应用首先是 Web 应用，这意味着它们需要跨浏览器运行，而不仅仅是在某一种浏览器中运行。

用 Resilient Web Design 中的 Jeremy Keith 的话来说，实现这一目标的一种有效方法是，确定核心功能，使用尽可能简单的技术提供该功能，然后尽可能增强用户体验。在许多情况下，这意味着只需从 HTML 开始创建核心功能，然后使用 CSS 和 JavaScript 增强用户体验，即可打造更具吸引力的体验。

以提交表单为例。最简单的实现方法是提交 POST 请求的 HTML 表单。构建完成后，您可以使用 JavaScript 进行表单验证并使用 AJAX 提交表单，从而提升支持该表单的用户的体验。

请考虑到您的用户将会在各种设备和浏览器中浏览您的网站。您不能定位频谱的上端。通过使用功能检测，您将能够为最广泛的潜在用户提供实用的体验，包括那些使用目前尚不存在的浏览器和设备的用户。

• 适应任何屏幕尺寸

用户可以在任何尺寸的屏幕上使用您的 PWA，并且所有内容在任何视口尺寸下都可以显示。

设备有各种尺寸，用户甚至可能在同一部设备上以各种尺寸使用您的应用。因此，务必要确保您的内容不仅适合视口，而且网站的所有功能和内容在任意视口尺寸下均可使用。

用户想要完成的任务和他们想要访问的内容不会随着视口大小而改变。可以按照不同的视口大小重新排列内容，并且所有内容都应该以某种方式呈现。事实上，正如 Luke Wroblewski 在他的一本书“移动优先”中那样，从小处着手，从大处着手可以真正改进网站的设计

• 提供自定义离线页面

当用户离线时，将其保留在 PWA 中可提供比退回默认浏览器离线页面更加顺畅的体验。

用户希望安装的应用无论连接状态如何都能正常运行。平台专用应用离线时绝不会显示空白页面，渐进式 Web 应用也绝不应显示浏览器默认离线页面。在用户导航到尚未缓存的网址时以及当用户尝试使用需要连接的功能时，提供自定义离线体验有助于让您的网络体验感觉就像是在运行它的设备的一部分。

近几年发现浏览器对 PWA 的支持好像日趋成熟了，Chrome 就不说了，Edge、Firefox、Safari 对都已经完美的支持 PWA 了，特别是 Edge 里浏览油管的时候使用 PWA 后明显能感觉到打开 YouTube 的 PWA 速度提升了很多。所以就马上给自己的博客也启用了渐进式 Web 应用（PWA）支持。

现在 WordPress 支持渐进式 Web 应用（PWA）非常简单，有很多专门的插件供选择，我们只需要安装一个 PWA 插件简单的配置一下就可以让站点支持 PWA 了，目前比较推荐的WordPress PWA 插件如要有：

1、PWA

PWA 是一款简单易用的插件（这是谷歌发布的一款 WordPress 的 PWA 插件），可以帮助您将 WordPress 网站转换为 PWA。它具有以下特点：

易于使用：只需激活插件即可启用 PWA 功能。

免费：免费版本。

功能齐全：支持离线访问、Web 应用程序清单等功能。

2、Super Progressive Web Apps（SuperPWA）

Super Progressive Web Apps 是一款功能强大且易于使用的插件，可以帮助您将 WordPress 网站转换为 PWA。它具有以下特点：

易于使用：只需几分钟即可设置您的 PWA。

免费：提供免费版本和付费版本。

功能强大：支持所有 PWA 功能，包括离线访问、推送通知、Web 应用程序清单等。

可定制：可以自定义 PWA 的名称、图标、启动画面等。

安装上述任一个插件启用并简单的配置以后，再有访客浏览在 Edge 浏览器的应用里就可以安装网站应用了。

启用 PWA 可以为您的WordPress 站点带来许多重要好处。它可以提高用户体验、提高网站访问量、提高转化率、降低运营成本和增强品牌形象。因此，明月建议大家认真考虑为您的 WordPress 站点启用 PWA。要说明你的是 PWA 的消息推送一般是需要第三方支撑的，Super Progressive Web Apps 插件里免费扩展（需要注册获取 KEY 使用）支持，但建议大家慎用，并且最好要做好用户引导。

转自：https://www.imydl.com/wp/18001.html