使用 WordPress 构建和优化渐进式 Web 应用程序 (PWA)

渐进式 Web 应用程序正在改变用户与网站互动的方式。从技术上讲，它们融合了移动应用程序和传统网站所能提供的最佳功能。从零开始，使用 WordPress 中的 PWA 技术不仅可以提高您的游戏水平，还可以让创建更具吸引力、更易于访问且加载速度更快的网站版本。意味着企业、博主和数字创作者可以更好地与他们的用户群建立联系，并提供比以往更多的内容。

什么是 PWA？

渐进式 Web 应用程序是一种将传统响应式网站的功能与功能丰富的移动应用程序的功能相结合的技术。

根据Mozilla 的说法，PWA 使用现代网络功能来提供类似应用程序的网络界面，可以通过网络浏览器访问。

PWA 背后的三个关键技术组件包括：

1. 服务人员。 PWA 使用独立于网站运行的脚本，并执行只能在网页上运行的类似操作。例如，服务工作人员允许推送通知、启用后台同步和离线可用性。后者是可能的，因为服务工作人员充当代理网络。 PWA 可以缓存内容并在没有连接时传送内容，即使在不确定的网络条件下也能提供卓越的可靠性。
2. Web 应用程序清单。清单是一个描述应用程序的 JSON 文件，允许应用程序将自身呈现为智能手机上的“添加到主页”图标。该文件旨在创建与用户系统的交互，包括起始 URL、显示设置、描述性名称和图标。
3. HTTPS。最后一个组成部分是最关键的组成部分之一。虽然HTTPS不直接提升用户体验，但它提高了安全性，并且通过数据加密和信息匿名来保护访问者的隐私。

这三种技术的结合提供了快速、免安装的体验，并且 PWA 完全集成到主页中。可以看到所有这些部分与Cafe Javas网站和应用程序完美地结合在一起。

该 PWA 由TechAhead开发，在其网站和移动应用程序版本之间提供无缝体验。这使得客户可以轻松地在网络浏览器中下订单，而不会出现传统网站那种不好的用户体验。

适用于 WordPress 的最佳 PWA 插件

1. 超级渐进式网络应用程序（Super Progressive Web Apps）

Super Progressive Web Apps插件由 SuperPWA 开发，为 WordPress 用户提供了一种将其网站转变为渐进式 Web 应用程序 (PWA) 的简单方法。这种网络和移动应用程序技术最佳方面的融合实现了离线使用、几乎即时的加载时间以及通过主屏幕上的快捷方式进行访问。

优点

• 添加类似应用程序的功能以及即使在离线状态下也能提供内容的能力，可以增加网站访问量、参与度和其他 KPI。
• 通过减少加载时间和减轻设备负载，卓越的性能还可以提高网站的 SEO 价值。
• 通过用户友好的设置轻松设置和配置。

缺点

• 可能与某些主题或插件不兼容，需要进一步调整才能正常工作。
• 可用的高级选项需要对网络技术有更深入的了解才能利用它们。

2.WP & AMP 的 PWA

适用于 WP 和 AMP 的 PWA插件通过类似应用程序的界面、完整的 AMP PWA 兼容性、多站点支持、UTM 跟踪以及离线工作的可能性丰富了用户体验。它还为 Service Worker 开发、应用横幅、Web 应用清单和自定义启动屏幕提供支持。

优点

• 通过允许您的网站安装在主屏幕上来提高参与度。
• 支持AMP
• 包括离线交互的缓存和分析

缺点

• 由于 AMP 集成，设置有点复杂

3. 渐进式网页应用

PWA 插件专注于 PWA 的基本元素，例如服务工作人员、Web 应用程序清单和 HTTPS 支持。 PWA 旨在加快加载时间并在移动设备上提供类似应用程序的体验。

优点

• 由于该插件的目标是最终成为 WordPress 核心的一部分，因此可以期待高质量的编码和兼容性。
• 它提供了一种采用 PWA 功能的简单方法，从而提高网站的可靠性、速度和参与度。

缺点

• 高级功能不包含在插件中，需要额外的插件或自定义开发才能实现。

4. 实例化（Instantify）

Instantify通过将三个关键功能整合到一个平台中而脱颖而出：渐进式 Web 应用程序 (PWA)、Google 的加速移动页面 (AMP) 和 Facebook Instant Articles (FBIA)。通过这种组合，这个工具可以改变你的网站，使其具有类似应用程序的感觉，加快移动网络加载时间，并向社交平台开放你的网站内容。

优点

• 结合 PWA、AMP 和 FBIA 意味着不必担心处理不同的插件。
• AMP 页面在搜索中受到优先考虑，这可能会提高你的网站在搜索引擎上的可见性性能。
• 通过推送通知等方式吸引用户，并通过优化的广告和 Facebook 即阅文更有效地通过你的内容获利。

缺点

• 没有免费试用或计划，这可能会阻止想要在付费之前测试该插件的用户。
• 如果设置不当，提供的广泛功能可能会导致该插件无法与某些主题很好地配合。

如何使用 WordPress 插件构建 PWA：分步

使用WordPress来构建PWA真的是个很不错的主意！它能大大提升你网站的移动浏览体验，让网站加载得更快、更稳定，同时看起来也更加吸引人。PWA利用了很多最新的网络技术，让我们可以直接在浏览器中享受到和使用应用程序一样流畅的体验。简而言之，它能让你的网站变得像手机APP一样好用。

第 1 步：规划你的 PWA

在动手搭建PWA之前，你得先好好想想这个PWA需要哪些功能，还有你想达到什么目标。比如说，你希望网站的哪些内容能让用户在没有网络的情况下也能看；用户在没网的时候能做哪些事情；还有，你想让这个PWA在手机桌面上看起来是什么样子。这些规划都非常重要，因为它们能确保你的PWA能真正提升用户的体验，让他们用起来更方便。

第 2 步：选择正确的插件

要将你的WordPress网站打造成PWA，可以选择几个插件来帮忙。每个插件都有自己的特点，所以得根据自己的需求来挑。如果想找一个简单、好上手的方案，那么Super Progressive Web Apps插件可能正合适。但如果想让网站能和其他工具更好地配合，那Instantify插件可能更适合。选择哪个插件，关键是要看具体的需求。

第 3 步：安装你选择的插件

选择插件后，将其安装在你的 WordPress 网站上。可以通过转到 WordPress 仪表盘，导航到插件 > 添加新插件，按名称搜索插件，然后单击立即安装来完成此操作。安装完成后，点击激活。

步骤 4：配置设置

激活后，将在 WordPress 仪表盘的“设置”菜单下找到该插件的设置。

在这里，可以配置 PWA 的各个方面，例如：

• 应用程序名称：主屏幕上显示的 PWA 名称。
• 描述：应用程序的简短描述。
• 首页：PWA 将首先加载的页面。
• 主题色：工具栏的颜色。
• 背景颜色：启动画面背景颜色。
• 图标：选择一个图像作为 PWA 的图标。

完成修改后，单击“保存设置”。

第 5 步：测试新 PWA

置完设置后，在不同设备上测试 PWA 至关重要。使用 Chrome DevTools 或类似工具来模拟各种设备，或通过将网站添加到主屏幕来直接在移动设备上进行测试。

例如，如果使用的是 iOS 设备，则需要在访问网站之前清除移动浏览器的缓存。单击“共享”按钮，然后单击“选项”。单击“添加到主屏幕”。关闭浏览器，然后单击刚刚添加到主屏幕的应用程序图标。浏览网站上的几个页面，断开与互联网的连接，然后尝试再次访问这些相同的页面。如果它们加载，则 PWA 已启动并正在运行！

优化 WordPress PWA

想要让WordPress PWA跑得更快、更稳定、更好用，那优化工作少不了。有一些高级的优化技巧，比如怎么制定合适的缓存策略、如何给网站资源排个优先级，还有怎样根据不同的网络速度来加载内容。这些都是让PWA表现更出色的关键。

缓存策略

据Smashing Magazine称，缓存是 PWA 优化的关键要素。它允许应用程序通过存储资源副本来更快地加载。实施缓存优先策略可确保应用程序在尝试网络之前从缓存中获取资源。这种方法对于不经常更改的静态资产特别有效。

在安装阶段使用 Service Worker 缓存重要资产。这包括应用程序的 shell（HTML、CSS、JavaScript）和任何静态资源。

对于动态内容，请考虑诸如stale-while-revalidate之类的策略，该策略首先提供缓存的内容，然后使用来自服务器的新内容更新缓存。

确定资源的优先顺序

并非所有资源都是相同的。有些对于初始渲染至关重要，而另一些则可以通过延迟加载进行渲染。分析应用程序的加载性能，以确定哪些资源是必需的并且应该首先加载。可以使用 preload 和 prefetch 指令来通知浏览器这些优先级：

• 预加载。将此用于当前页面所需的资源。它告诉浏览器在加载过程的早期获取这些资源。
• 预取。这是为了将来导航中可能需要的资源。它建议浏览器在空闲时获取这些资源。

自适应加载

自适应加载可以根据用户的设备和网络情况来调整应用程序的内容和功能。这样，即使在网络不好或者设备性能不高的情况下，用户也能获得良好的体验。你可以通过检测用户设备的性能来提供不同的资源。比如，如果用户的网络连接很快，就可以给他们提供高清的图像；如果网络较慢，就可以提供小一点的压缩图像。

你还可以使用网络信息API来检查用户的网络连接速度，并根据这个速度来调整应用程序的运作方式。比如，当网络较慢时，你可以先加载最重要的内容，把不那么重要的内容放到后面加载，等到网络变好了再加载。这样，无论用户的网络情况如何，都能获得流畅的使用体验。

总结

渐进式网络应用程序是个很大的进步，它让网络用户能更积极地参与进来，也更容易访问网站。PWA把传统网站的功能和移动应用的高级功能结合在一起，让你可以像使用应用一样流畅地浏览网站，而且还不用在应用商店里下载它。这样一来，就能给大家带来更加流畅和方便的网络体验啦！