将您的 WordPress 网站转换为 PWA：顺应潮流

已发表: 2021-02-17

目录

PWA 运动是如此具有变革性和纪念意义的运动，以至于它已成为一股巨浪，席卷整个科技世界，将其发展道路上的一切都变得更好。

世界上一些最有影响力的品牌，例如拥有著名的Twitter Lite的 Twitter，现在已经正式将 PWA 作为其未来发展的基础。

 推荐阅读：12 个渐进式 Web 应用示例，为您提供灵感

WordPress，或者更具体地说，Automattic——WordPress 背后的人，也在 2017 年 Chrome 开发峰会上发起了 WordPress PWA 运动，宣布他们正在将 Progressive Technologies 集成到 WordPress 等平台的工作流程中。

从那时起，WordPress 环境发生了很大变化，以至于不将WordPress 转换为 PWA 几乎肯定会降低观众的满意度。

了解 PWA

正如 Google 所说，Progressive Web Apps 是

  • 可靠——即使在不确定的网络条件下，也能立即加载，从不显示 downasaur。
  • 快速– 使用丝般流畅的动画快速响应用户交互，并且没有卡顿的滚动。
  • 引人入胜——感觉就像设备上的自然应用程序，具有身临其境的用户体验。

简而言之，PWA 是 Web 浏览体验的未来。 有关 PWA 的更多信息，请查看我们的文章：什么是 PWA？。

为什么选择 WordPress 的 PWA？

除非您希望您的观众因等待您的网页加载而感到无聊，否则具有更高站点性能、功能和 UX 的解决方案始终是更好的选择。

Jetpack 中的 PWA 实验
PWA 优化前后的 WordPress

以著名的 Twitter Lite 为例。 一个案例研究表明，随着 Twitter Lite 的发布，Twitter 的用户行为发生了巨大变化。

Twitter Lite 的工程主管 Nicolas Gallagher 指出：

Twitter Lite 现在是使用 Twitter 的最快、最便宜和最可靠的方式。 该网络应用程序的性能可与我们的本地应用程序相媲美，但与 Android 版 Twitter 相比，它所需的设备存储空间不到 3% 。

不仅Twitter 加入了这场运动，Spotify 等大品牌也通过他们最近开发的 Spotify PWA 做到了这一点。 有关 PWA 带来的变化的统计数据和新闻无处不在，几乎不容忽视，因此，PWA 驱动的 Web 未来的主张似乎比以往任何时候都更加现实。

PWA 统计
资料来源：PWAstats

在 WordPress 中设置 PWA 的先决条件

  • Progressive Web Apps 要求您的 WordPress 网站从安全的来源提供服务，即您的网站应该是 HTTPS而不是 HTTP 。
  • WordPress 版本：高于 3.5.0
  • PHP版本：高于5.3

如何将您的 WordPress 网站转换为 PWA

满足上述先决条件后，WordPress 网站所有者可以选择使用以下两种方式之一转换为 PWA：手动或使用插件。

1. 手动开发你的 PWA

PWA 的开发——尽管成本低于其他类型的开发——仍然需要大量的编码知识和开发人员来了解他或她如何处理流行的 Javascript 框架和库，尤其是 Angular 和 React。 这就是为什么经常建议没有经验的网站所有者尝试插件（免费和/或付费插件）或聘请专业开发人员的原因，因为构建 PWA 的过程并不容易。

在尝试手动构建 PWA 时，请记住遵循 Google 的 Progressive Web App Checklist 并针对 Lighthouse 工具测试您的网页，以获得最佳的用户体验。

2. 带插件

不要担心，非开发者网站所有者！ WordPress 提供了各种各样的插件，这些插件可以完成大部分繁重的工作，供用户选择。 这些插件有 2 种类型：免费和付费插件。

免费插件

1.超级PWA

SuperPWA 横幅

WordPress 的免费 PWA 插件的顶部是 SuperPWA，它具有优良的服务和质量的悠久传统。

SuperPWA 易于配置，只需不到一分钟即可设置您的 Progressive Web App。 SuperPWA 通过删除它创建的每个数据库条目和文件来进行干净卸载。 事实上，在您第一次手动保存之前，所有默认设置都不会保存到数据库中。

活跃安装： 30000+
星级：★★★★★

2. PWA

PWA 横幅

PWA 旨在为主题和插件提供 PWA 构建块和协调机制，以免重新发明轮子，也不会相互冲突。

如果您正在开发包含服务工作者的插件或主题，请考虑依赖此 PWA 插件，或者至少仅使用内置实现作为 PWA 插件不可用时的后备。

最后更新： 5 个月前
活跃安装： 20,000+
星级：★★★★

3. WP & AMP 的 PWA

WP 横幅的 PWA

对于免费产品，WP & AMP 的 PWA 非常擅长它的功能。 它很好，易于使用，并提供卓越的客户服务； 然而，它的文档感觉有点缺乏，这可能导致更难让一切正常工作。
活跃安装： 8,000+
星级：★★★★★

4. WebSuite PWA

WebSuit WordPress PWA 插件

WebSuite PWA 是一个完整的插件，可将您的网站变成具有集成 AMP 支持的 PWA。 该插件带有各种主题，可为您的 PWA 提供类似应用程序的外观，以及许多功能，例如添加到主屏幕、推送通知、CDN、分析集成等。

活跃安装： 30+

星级： ★★★★★

5. Webkul 为 WordPress 提供的简单 PWA

用于 WordPress 的 Webkul PWA

只需 49 美元，您就可以将您的 WordPress 网站转换为一个功能齐全的 PWA，并拥有其所有功能和特权——这还不是全部。 该插件与所有 WordPress 主题兼容，此外，您可以从管理后端更改主题、应用程序名称以及应用程序图标，而无需太多努力或技术知识。

活动安装：信息不可用

星级：资料不详

如何安装 PWA 插件

WordPress PWA 插件的安装过程非常简单明了。 下面我们将以SuperPWA为例：

WordPress 安装：

  • 访问WordPress 管理员 > 插件 > 添加新的
  • 搜索“ Super Progressive Web Apps ”
  • 单击“立即安装”，然后单击“激活” Super Progressive Web Apps

手动安装：

  • 将 super-progressive-web-apps文件夹上传到 /wp-content/plugins/服务器上的目录
  • 转到WordPress 管理员 > 插件
  • 从列表中激活Super Progressive Web Apps插件。

结论

这种 PWA 运动似乎不会很快放缓，最好的选择是在发现自己落后之前立即采取行动。

如果您精通技术并希望为您和您的网站提供更多自由，那么手动开发 PWA 应该是您的首选。 但是，对于经验不足但想要一种更安全、久经考验的方法的网站所有者来说，适用于 WordPress 的 PWA 插件并不是一个坏主意。 在处理构建 PWA 的过程时，插件可以节省您的时间和偶尔的头痛，从而允许更好的资源分配。

延伸阅读：

  • Magento PWA Studio：与 Vue Storefront 的详细比较
  • Magento WordPress 集成：分步指南