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

渐进式网络应用程序正在改变用户使用网站的方式。从技术上讲，它们融合了移动应用程序和传统网站的优点。从零开始使用 WordPress 中的 PWA 技术，不仅能让您的游戏更上一层楼，还能让您创建一个更吸引人、更易访问、加载更快的网站版本。

这意味着企业、博主和数字创作者可以更好地与他们的用户群建立联系，并提供比以往更多的内容。

如果您准备将 WordPress 网站转换为 PWA，那您就来对地方了。我们将准确解释如何构建和优化这些网络应用程序，确保您的下一个项目取得成功。

什么是 PWA？

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

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

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

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

这三种技术的结合带来了快速、免安装的体验，并将 PWA 完全集成到主页中。

通过 Cafe Javas 网站和应用程序，您可以看到所有这些元素完美地结合在一起。

Cafe Javas 在桌面和移动设备上提供类似应用程序的体验。

该 PWA 由 TechAhead 开发，可在网站和移动应用程序版本之间提供无缝体验。这样，客户就可以轻松地在网页浏览器中下单，而不会像传统网站那样在用户体验方面令人沮丧。

为什么将 WordPress 网站转变为 PWA 是个好主意

将 WordPress 网站转变为渐进式网络应用程序可以显著提升您的数字形象和用户体验。以下是进行转换的原因：

1. 用户参与度更高

PWA 的众多优势之一是可以发送推送通知。这使您可以向受众告知最新消息和公告，确保网站访问者不会忘记您。这一特性鼓励定期访问和更多互动。

2. 提高网站速度

PWA 的速度也非常快。大部分资产都已缓存，服务人员可帮助快速加载这些资产。即使您的网站访问者没有最快、最可靠的网络提供商，他们使用 WordPress 的 PWA 也能立即加载。这种速度提升不仅改善了用户体验，还对搜索引擎排名起到了积极作用，因为网站速度是 Google 的一个排名因素。

3. 离线功能

PWA 最引人注目的优势之一可能是其离线或在劣质网络上运行的能力。这是通过缓存关键资源的服务工作者实现的，允许用户在没有互联网连接的情况下访问以前访问过的页面。

4. 传统限制不适用

传统网站和移动应用程序各有其局限性。例如，网站在很大程度上依赖于网络质量，无法提供推送通知或离线访问等本地应用程序功能。另一方面，移动应用程序要求用户定期下载和安装更新。

而 PWA 则没有这些缺点。

将您的 WordPress 网站转换为 PWA 不仅仅是改进您的网站。它通过一个更快、更吸引人的平台，改变了受众与网站的互动方式，该平台在任何设备和任何网络上都能正常运行，而且看起来很不错。

在 WordPress 中开发 PWA 的先决条件

任何希望为 WordPress 构建 PWA 的人都需要了解以下内容：

• 用户体验设计。以用户体验设计原则为出发点，使您的 PWA 具有用户友好性，让人们愿意使用和参与。
• HTML 和 CSS 技能。您必须对页面进行编排，使其具有视觉吸引力和响应性。这就需要掌握网页设计的基础知识–HTML 和 CSS。
• PHP 知识。WordPress 基于 PHP 构建，因此您必须掌握这种服务器端脚本语言，以便调整主题和插件，并为您的 PWA 添加其他动态内容功能。
• 精通 JavaScript。需要使用 JavaScript 来处理 PWA 的交互性、与服务工作者合作实现离线功能，以及添加推送通知等更复杂的功能。
• 熟悉 WordPress。如果您了解 WordPress 各方面的工作原理、API、主题和插件定制、内容管理以及您可以使用的 WordPress 专用 PHP 函数，那么开发过程将变得更加轻松。

适用于 WordPress 的最佳 PWA 插件

如果您快速搜索一下 WordPress 的最佳 PWA 插件，您很快就会发现有一系列工具可以通过类似应用程序的功能、更快的加载时间和其他令人印象深刻的功能来增强您的网站。

对于那些希望快速构建 PWA 的人来说，以下是目前可用于 WordPress 的几个顶级 PWA 插件，它们可以加快您的工作流程。

1. Super Progressive Web Apps

Super Progressive Web Apps 插件功能丰富。

Super Progressive Web Apps 插件由 SuperPWA 开发，为 WordPress 用户提供了一种简单的方法，将他们的网站转变为 Progressive Web Apps（PWA）。它融合了网络和移动应用技术的优点，可实现离线使用、近乎即时的加载时间，并可通过主屏幕上的快捷方式访问。

优点

• 增加类似于应用程序的功能，以及在离线状态下提供内容的能力，可提高网站访问量、参与度和其他关键绩效指标。
• 通过减少加载时间和减轻设备负载来提高性能，还能提升网站的搜索引擎优化价值。
• 用户友好的设置，易于设置和配置。

缺点

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

价格

SuperPWA 采用免费模式，这意味着核心功能是免费提供的，额外功能可通过升级获得。SuperPWA 的第一套升级起价为 99 美元。

2. PWA for WP & AMP

PWA for WP & AMP 包括一个一键式应用程序生成器。

PWA for WP & AMP 插件具有类似应用程序的界面、与 AMP PWA 完全兼容、多站点支持、UTM 跟踪以及离线工作的可能性，从而丰富了用户体验。它还支持服务人员开发、应用横幅、网络应用清单和自定义闪屏。

优点

• 允许在主屏幕上安装网站，提高参与度。
• 支持 AMP
• 包含用于离线交互的缓存和分析功能

缺点

• 由于集成了 AMP，设置较为复杂

3. PWA

PWA 是一种创建 PWA 的简化方法。

PWA 插件侧重于 PWA 的基本要素，如服务工作者、Web 应用程序清单和 HTTPS 支持。PWA 的目标是加快加载时间，并在移动设备上提供类似应用程序的体验。

优点

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

缺点

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

4. Instantify

Instantify 支持 PWA、AMP 和 FBIA。

Instantify 将三个关键功能整合到一个平台中，使自己与众不同： Progressive Web Apps (PWA)、Google 的 Accelerated Mobile Pages (AMP) 和 Facebook Instant Articles (FBIA)。有了这一组合，该工具可以转换网站，使其具有类似应用程序的感觉，加快移动网页加载时间，并将网站内容开放到社交平台。

优点

• 将 PWA、AMP 和 FBIA 结合使用，意味着您不必担心要处理不同的插件。
• AMP 网页在搜索中会优先显示，因此有可能提高网站在搜索引擎中的可见度。
• 通过推送通知等方式吸引用户，并通过优化广告和 Facebook Instant Articles 更有效地实现内容盈利。

缺点

• 没有免费试用版或计划，这可能会让想在付费前测试该插件的用户望而却步。
• 如果设置不当，提供的大量功能可能导致该插件无法与某些主题很好地配合使用。

定价

Instantify 的价格为 29 美元，一次性收费，终身授权。该产品不提供免费试用或退款保证，因此最好在购买前仔细考虑您当前的需求和兼容性要求。

如何使用 WordPress 插件构建 PWA：

使用 WordPress 构建 PWA 是增强网站移动体验的一种令人兴奋的方式，可以使网站更快、更可靠、更吸引人。正如我们已经讨论过的，PWA 使用现代网络功能直接从浏览器向用户提供类似应用程序的体验。

下面是如何使用我们讨论过的插件之一将 WordPress 网站转变为 PWA 的分步迷你指南。

步骤 1：规划您的 PWA

在深入研究技术方面的问题之前，您应该规划好 PWA 的功能和目标。考虑网站的哪些部分可以从离线访问中受益，用户应该能够在没有网络连接的情况下执行哪些操作，以及您希望 PWA 在主屏幕上的外观如何。规划有助于确保您的 PWA 以有意义的方式增强用户体验。

步骤 2：选择合适的插件

正如我们所讨论的，有多种插件可用于将 WordPress 网站转化为 PWA。

请根据您的具体需求对每种插件进行评估。如果您正在寻找一个简单、直接的解决方案，Super Progressive Web Apps 可提供简单的设置。对于需要整合多个工具的用户，Instantify 可能是更好的选择。

在今天的示例中，我们将使用 Super Progressive Web Apps。

步骤 3：安装所选插件

选择好插件后，将其安装到 WordPress 网站上。您可以进入 WordPress 面板，导航到插件 > 添加新插件，搜索插件名称，然后点击立即安装。安装完成后，点击启用。

从 WordPress 仪表盘安装 Super Progressive Web Apps 插件。

步骤 4：配置设置

激活后，您可以在 WordPress 面板的 “设置” 菜单下找到插件的设置。

Super Progressive Web Apps 插件设置。

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

• App name. PWA 在主屏幕上显示的名称。
• Description. 应用程序的简要说明。
• Start page. PWA 将首先加载的页面。
• Theme color. 工具栏的颜色。
• Background color. 闪屏背景颜色。
• Icon.选择一张图片作为 PWA 的图标。

完成修改后，单击 Save Settings。

步骤 5：测试您的新 PWA

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

例如，如果您使用的是 iOS 设备，您需要在访问网站前清除移动浏览器的缓存。

单击 “Share” 按钮，然后单击 “Options“。单击 Add to Homescreen。关闭浏览器，然后点击刚刚添加到主屏幕的应用图标。浏览网站上的几个页面，断开网络连接，然后尝试再次访问这些页面。

如果能加载，说明您的 PWA 已经启动并运行！

如何使用 WordPress 从零开始创建 PWA

对于那些寻求更多控制和定制的人来说，手动将 WordPress 网站转换为 PWA 可能是首选途径。

这种方法技术性较强，需要充分了解网站开发原理，因此请务必查看前面列出的先决条件，以确认您是否有能力完成该步骤。

第 1 步：确保 HTTPS

使用 HTTPS 确保网站安全对于 PWA 来说是不可或缺的。HTTPS 可加密网站与访问者之间的数据，防止数据泄露等。

如果您的主机套餐中还没有 SSL 证书，您可以从 Let’s Encrypt 获取免费的 SSL 证书。

安装过程因托管服务提供商而异。许多提供简单的一键式 SSL 安装选项。具体说明请查看主机提供商的支持文档。

安装 SSL 证书后，通过从 HTTP 重定向到 HTTPS，确保所有网站流量都使用 HTTPS。这可以通过WordPress插件（如Really Simple SSL）或修改网站的 .htaccess 文件（如果你愿意手动编辑的话）来实现。

第 2 步：创建网络应用程序清单

网络应用程序清单是一个 JSON 文件，用于控制 PWA 如何显示给用户以及如何启动。它包括应用程序的名称、图标和启动 URL 等设置。

首先，创建一个名为 manifest.json 的 JSON 文件。该文件应包含应用程序的关键信息，如名称（ name ）、简称（ short_name ）、启动 URL（ start_url ）、显示类型（ display ）、背景颜色（ background_color ）、主题颜色（ theme_color ）和图标（ icons ）。

以下是 MDN Web Docs 提供的代码大致内容。

{
"name": "Your App Name",
"short_name": "AppShortName",
"start_url": "/",
"display": "standalone",
"background_color": "#FFFFFF",
"theme_color": "#000000",
"icons": [
{
"src": "path/to/icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}

在 WordPress 网站模板的 head 添加一个指向 manifest.json 文件的链接。

然后，使用 Google 的 Lighthouse 等工具测试并验证网络应用程序清单的实现。

第 3 步：实施服务工作者

Service workers 是网络应用程序与外部世界之间的代理。它们对于离线功能、推送通知和资源缓存至关重要。

要创建服务工作者，您需要创建一个新的 JavaScript 文件。文件名为 service-worker.js，并将其放在 WordPress 主题的根目录下。该文件将包含缓存资源、拦截网络请求和管理离线功能的逻辑。

您需要从网络应用程序的 JavaScript 中注册服务 Worker。通常，这需要在网页上运行的主 JavaScript 文件中完成。

下面是一个如何从 Borstch 注册服务 Worker 的示例：

if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}

在您的 service-worker.js 文件中，实现缓存静态资产、拦截获取请求以及离线时从缓存中提供内容的逻辑。

下面是一个缓存一些资产的基本示例：

const CACHE_NAME = 'your-app-cache';
const urlsToCache = [
'/',
'/styles/main.css',
'/script/main.js'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
return cache.addAll(urlsToCache);
})
);
});

要确保服务工作者的行为符合预期，必须进行测试。使用 Chrome DevTools 中的 Application 面板来检查已注册的服务工作者、缓存资产等。

优化 WordPress PWA

优化 WordPress PWA 是确保速度、可靠性和功能性的最后一项工作。让我们深入了解一些高级优化技术，重点是缓存策略、资源优先级和针对不同连接速度的自适应加载。

缓存策略

根据 Smashing Magazine 的说法，缓存是 PWA 优化的关键因素。它通过存储资源副本，使您的应用程序加载速度更快。实施缓存优先策略可确保您的应用程序在尝试使用网络之前从缓存中获取资源。这种方法对于不经常变化的静态资产尤其有效。

在安装阶段使用服务工作者缓存重要资产。这包括应用程序的外壳（HTML、CSS、JavaScript）和任何静态资源。

对于动态内容，可考虑使用 stale-while-revalidate 等策略，先提供缓存内容，然后再用服务器上的新内容更新缓存。

确定资源的优先级

并非所有资源都一样。有些资源对于初始呈现至关重要，而其他资源则可以通过懒加载来呈现。分析应用程序的加载性能，确定哪些资源是必要的，应首先加载。您可以使用预加载和预取指令来告知浏览器这些优先级：

• Preload（预加载）. 用于当前页面所需的资源。它会告诉浏览器在加载过程中尽早获取这些资源。
• Prefetch（预取）. 用于未来导航中可能需要的资源。它建议浏览器在空闲时获取这些资源。

自适应加载

自适应加载可根据用户的设备能力和网络条件定制应用程序的内容和功能。这种技术可确保您的 PWA 提供良好的体验，即使在缓慢或不稳定的网络中也是如此。

实施功能检测，根据用户的设备提供不同的资产。例如，您可以向连接速度快的用户提供高分辨率图片，而向连接速度慢的用户提供较小的压缩图片。

您可以使用网络信息 API（ Network Information API ） 来检测用户的连接速度，并相应调整应用程序的行为。例如，您可以选择在连接速度较慢的情况下只加载必要的内容，将非关键资源推迟到连接速度提高时再加载。

保持谷歌标准

将 WordPress 网站转化为 PWA 是提升移动用户体验的明智之举。但是，您需要遵守 Google 的 PWA 标准，这样才能取得成效。

Google 的 PWA 标准强调安全性、用户体验和可访问性：

• 网站必须使用 HTTPS 并在移动设备上具有响应性
• 允许离线访问应用 URL，并包含 “添加到主屏幕 “功能的元数据。
• 它们应能快速加载，在不同浏览器上都能正常运行，并确保页面转换流畅，不依赖网络。
• 所有页面都应保持唯一的 URL。

小结

渐进式网络应用程序在提高用户参与度和网络可访问性方面实现了重大飞跃。PWA 将传统网站的功能与移动应用程序的高级功能整合在一起，提供了类似应用程序的无缝体验，而无需在应用程序商店下载。

有鉴于此，我们今天在此探讨了 PWA 对于 WordPress 网站的变革潜力，强调了它们的优势，并就如何使用 WordPress 插件或通过手动编码创建自己的 PWA 提供了指导。希望对您有所帮助。

如果您还没有这样做，您会很快将您的 WordPress 网站变成 PWA 吗？