WordPress 中的渐进式 Web 应用程序：将 WordPress 网站转变为 PWA 的教程

你好互联网人，

在本教程中，我将向您展示如何通过几个简单的步骤在 WordPress (PWA) 中设置渐进式 Web 应用程序！

渐进式 Web 应用程序已经存在了一段时间，今天制作的许多网站也是 PWA 的。 在深入本文之前，我将花一点时间来解释一下 PWA 是什么。

什么是渐进式 Web 应用程序？

虽然您可能是第一次听到这个词，但您可能已经遇到过一个渐进式网络应用程序，或者被要求在您的手机上安装一个。 如果您以前使用过 Twitter 网站，那么您很可能会遇到这种情况。

渐进式 Web 应用程序是一种使用 Web 技术（HTML、CSS、Javascript）制作的 Web 应用程序，与任何其他 Web 应用程序一样，但外观和行为类似于本机应用程序。 PWA 在您的浏览器上运行，但可以像本地应用程序一样添加到手机的主屏幕。 它有一个图标和一个名称，就像您设备上的任何其他本机应用程序一样。 启动时，没有明显迹象表明它是一个网站。

什么时候应该使用 PWA 插件？

Web 应用程序具有广泛的影响力，因为它们可以通过它们的 URL 从浏览器访问或通过搜索查询发现。 但他们能做的事情往往缺乏。 PWA 通过在不牺牲其覆盖范围的情况下增加您网站的功能，为您提供两全其美的体验（Web 和原生应用程序）。

以下是使您的网站成为 PWA 所带来的一些优势。

• 他们可以离线工作（在一定程度上）。
• 它们可以通过 URL 访问或通过搜索引擎发现。
• 它们允许您向用户发送推送通知。
• 它们比常规 Web 应用程序更快、更轻量。
• 它们可以像常规应用程序一样安装，甚至可以通过应用程序商店分发。
• 他们可以使用多种原生功能，例如地理位置、摄像头、麦克风、屏幕方向等。
• 它们始终是最新的，因为您不必从应用商店更新它们。

如果您发现您的 WordPress 网站需要上述功能，请考虑为 WordPress 安装 PWA 插件。

如何在 WordPress 中设置 PWA？

现在您已经了解了 PWA 是什么以及应该在什么时候使用它，让我们看看如何在 WordPress 中进行设置。 这样做涉及三个步骤。

1. 为 WordPress 安装 PWA 插件。
2. 设置 PWA WordPress 应用程序。
3. 确认我们已成功设置它。

安装 WordPress PWA 插件

要安装 PWA 插件，请确保您已登录 WordPress 帐户，然后转到您的仪表板。

现在将光标悬停在左侧菜单上的插件上，然后从右侧的弹出菜单中单击添加新的。 这应该会将您带到“添加插件”页面。

在“添加插件”页面的搜索栏中，输入“PWA”。 您将看到可用的 PWA 插件列表。 在本教程中，我们将PWA 用于 WP 和 AMP。 这是一个非常好的 WordPress PWA 插件，可以与 AMP 网站一起使用。
现在单击立即安装按钮。 插件安装后，您应该会看到一个激活按钮。 单击它以启用插件。

您现在应该被重定向到PWA for WP & AMP插件页面。 现在，让我们继续设置插件。

设置 PWA WordPress 应用程序

现在插件已安装，让我们进行设置。 从页面上的选项卡中单击常规选项卡。 此选项卡是 PWA 的基本设置所在的位置。

将App Name和App Short Name设置为您的 Web 应用程序的名称。 然后使用App Description给你的应用一个简短的描述。 App Icon和App Splash Screen Icon应该是192 x 192 像素和512 x 512 像素的 PNG。 要设置图标，请单击文本字段旁边的选择图标按钮。

离线页面决定了用户离线时显示的网页。 当您单击下拉菜单时，您将看到可以为离线页面设置的网页列表。

您还可以专门为此场景创建一个网页，并让它显示类似“您当前离线。 您将无法访问该应用程序的某些功能。” 保持其余设置不变。 您可以稍后根据需要调整它们。 完成后单击选项卡底部的保存设置。

这就是常规选项卡的全部内容。 “高级”选项卡下还有一项我们将编辑的项目，尽管是可选的。 单击“高级”选项卡并向下滚动，直到到达“自定义添加到主页横幅” 。

取消选中“显示自定义响应添加到主页横幅”。 横幅不可自定义，默认的也不好看，这就是为什么我更喜欢禁用它。 但保持它为桌面启用。 现在单击保存设置以保存您的更改。 就是这样！ 您已将 WordPress 网站设置为 PWA。 我们现在将检查该网站以确保它已成功设置。

确认 PWA 设置

您有两种方法可以检查您的 WordPress 网站现在是否是 PWA。 第一种方法是使用您的桌面浏览器开发工具检查网站。

在浏览器中启动该网站，然后右键单击它。 单击检查元素或检查（取决于您的浏览器）。 现在单击控制台选项卡。 您应该会看到对“PWA”或“Service Worker”的引用。 Service Worker 是一个 JavaScript 文件或脚本，可为渐进式 Web 应用程序的大部分功能提供支持。

检查您的 WordPress 网站现在是否为 PWA 的第二种方法是在您的手机上启动该网站。 如果您使用的是 Android，您应该会在屏幕底部看到一个弹出窗口，要求您将应用程序添加到主屏幕。 单击它后，您会看到一个对话框以确认您的选择。 确认它会将应用程序添加到手机的主屏幕。

对于 iOS，这个过程就不那么简单了。 iOS 用户在启动 PWA 网站时不会被自动要求“添加到主屏幕”。 要在 iOS 手机上安装 PWA，请在网站加载后单击浏览器底部的共享按钮。 现在从呈现给您的选项列表中选择添加到主屏幕。 您现在应该在主屏幕上看到 PWA。

Uber、Instagram、Twitter 和福布斯等许多公司现在都在使用 PWA。 与原生应用程序相比，它们更擅长吸引和吸引更多用户。 如果这对您很重要（以及上述其他原因），您绝对应该让您的 WordPress 网站成为 PWA WordPress 应用程序。

就是这样。 如果您有任何问题，请给我留言，我会尽快回复。 直到下一次！

我给你的选择和建议：
免费 SSL 证书生成器：https://punchsalad.com/ssl-certificate-generator
我正在使用的主机：Hostpapa（60% 折扣）
我从哪里获得我的域名：Name Cheap
请参阅我在这里使用的 WP 插件。

上述某些链接可能是附属链接。

以下是您可能会感兴趣的文章列表：

• 如何使用插件加速 WordPress
• 创建将您的站点地图提交到 Google Search Console

#sitemapforwordpress #digitalworld #punchsalad