如何在你的WordPress网站上添加PWA？

网页设计是一个不断变化的领域，它基于最新的技术和趋势而发展。

PWA或Progressive Web App是一种最新的技术，可以帮助您将桌面网站的功能与移动应用程序结合起来。它不再需要单独的移动应用程序，并为桌面网站的移动应用程序提供了所有可用的功能。

所以WordPress网站主提供这个功能给你的读者是一个不错的选择。如果你感兴趣，这里有一些如何在你的WordPress网站上添加PWA功能的方法。

网站建设趋势

以下是近十年来网站建设技术的发展历程。

更早的时候，人们习惯拥有只适合桌面浏览器的静态桌面网站。

后来，当智能手机处于初级阶段时，许多网站所有者习惯于提供单独的移动版本的网站。

然后，响应式网站开始流行，不再需要单独的移动版本，有助于节省巨额成本。

IOS和Android移动应用再次流行，是因为通过移动应用商店覆盖了大量受众。然而，应用程序开发比拥有单独的移动版本更昂贵，因此没有多少网站所有者更愿意为他们的网站安装应用程序。

最后，感谢谷歌，我们现在有了渐进式的网络应用，可以帮助桌面网站拥有移动应用功能。

什么是PWA？

你可以在WordPress中使用同样的渐进式网络应用功能，并允许你的用户将网站作为应用程序来安装。

在桌面上——这个网站会在浏览器的地址栏显示提示，用户可以点击它来安装应用程序。

在手机上-用户可以将网站添加到他们的主屏幕上，并像其他安装的应用程序一样访问它。

与从浏览器访问网站相比，PWA有许多优势:

它像一个应用程序一样工作，你可以直接将通知推送到用户的设备上。

您可以在不打开浏览器的情况下访问该站点(尽管它需要浏览器)。

用户可以在Windows中将应用固定在任务栏或开始菜单，在Mac中将其添加到dock，并在iOS/Android设备的主屏幕上保留应用图标。

所有访问过的网页都可以在设备上本地访问，即使没有互联网。

与你的普通网站相比，应用程序打开速度非常快，这在智能手机上特别有用。

如果你不相信我，请继续阅读，检查PWA的运作。

在WordPress中添加PWA功能

你需要安装谷歌的PWA插件，并配置一个简单的设置来将你的WordPress网站转换成PWA应用程序。这是一个免费插件，可以用于任何WordPress网站。

记住，你应该有一个HTTPS连接来添加PWA到你的WordPress站点。由于所有WordPress用户都可以通过Let’s Encrypt使用免费的SSL，我们认为这对大多数用户来说应该不是问题。

此外，您的服务器应该支持为您的站点生成Web列表和服务人员。你可以在谷歌官方文档中查看PWA的完整细节。

并设置PWA插件。

登录你的WordPress管理仪表板，在你的站点上安装并激活PWA插件。

在WordPress安装PWA应用程序

激活插件后，进入“设置>阅读”部分，启用“离线浏览”选项并保存更改。这将有助于在浏览器中缓存访问过的页面以供脱机使用，并且用户可以在没有互联网连接的情况下打开应用程序访问页面。

启用脱机浏览

仅此而已，插件没有其他设置可用。

在桌面上安装您的站点

现在您已经在网站中添加了PWA功能，只需在浏览器中打开一个新标签，然后打开您的网站。我们在这个例子中使用谷歌浏览器，请确保使用支持PWA功能的浏览器。你会看到一个小通知，其中“安装”将闪烁，然后一个图标将显示在浏览器地址栏的右端。请注意，图标形状可能因您使用的浏览器而异。

从浏览器安装PWA

单击应用程序以查看如下所示的小弹出窗口，然后单击“安装”按钮。

选择安装

这将把应用程序添加到你的浏览器文件夹中(在Mac上的谷歌浏览器中的“Chrome应用程序”下),并以应用程序模式启动你的网站。该插件将使用您网站的站点图标作为应用程序图标。

将PWA添加到Chrome应用程序

您将看到下面显示的PWA应用程序，它看起来与您计算机上安装的任何其他应用程序相似。

用PWA应用程序打开网站。

您可以将应用程序快捷方式添加到桌面、任务栏或Dock，以便快速访问。在Chrome中，你可以通过进入“chrome://apps”部分来访问该应用程序。您可以随时卸载该应用程序，方法是单击该应用程序右上角的三个点图标，然后选择“卸载…”选项。

卸载应用程序

在Android和iOS中安装PWA应用程序

你可以用和上面一样的方法在Chrome Android中安装PWA应用。这将在主屏幕上添加一个应用程序图标，您可以像任何其他应用程序一样单击并访问它。如果不想保留已安装的应用程序，只需删除即可将其从手机中删除。

遗憾的是，iOS上的大部分浏览器，包括Chrome和Safari，都不支持直接安装PWA。这和苹果类似，因为它不支持iOS中Safari的推送通知。你可以做的是使用“添加到主屏幕”(A2HS)功能，像应用程序一样将书签添加到主屏幕。其工作原理类似于PWA应用，因为A2HS被认为是PWA技术的一部分。

添加到主屏幕

其他插件

如果你真的想用PWA功能，那么免费的PWA插件可能不够用。你可以试试高级超级累进网络应用插件，它有以下功能。

您只需要设置用户启动应用程序时打开的默认页面。

显示呼叫弹出窗口，要求用户将网站安装为应用程序。

自定义外观、主页和脱机页。

你也可以将你的网站转换成一个真正的Android应用程序，并在谷歌Play商店发布。

超级PWA插件

如果你用的是AMP版本，那么你可以试试wpa插件。该插件的高级版本提供了类似于Super PWA插件的功能。

总结

当你没有时间和金钱去维护一个单独的移动应用时，在你的WordPress网站上添加PWA是吸引移动用户的一个选择。它有很多优点，比如没有额外的成本，使用OneSignal等流行插件发送推送通知，可以轻松留住用户。虽然，它不适用于iOS设备，但我们希望尽快提供支持。