網(wǎng)頁設(shè)計(jì)是一個(gè)不斷變化的領(lǐng)域，它基于最新的技術(shù)和趨勢而發(fā)展。

PWA或Progressive Web App是最新的技術(shù)，可幫助您將桌面網(wǎng)站的功能與移動(dòng)應(yīng)用程序相結(jié)合。它消除了擁有單獨(dú)的移動(dòng)應(yīng)用程序的需要，并將移動(dòng)應(yīng)用程序可用的所有功能提供給桌面網(wǎng)站。

因此，wordpress網(wǎng)站所有者向您的讀者提供此功能是一個(gè)不錯(cuò)的選擇。如果您有興趣，以下是如何將PWA功能添加到您的WordPress網(wǎng)站。

網(wǎng)站建設(shè)趨勢

以下是網(wǎng)站建設(shè)技術(shù)在過去十年中的發(fā)展歷程。

• 早些時(shí)候，人們曾經(jīng)擁有僅適用于桌面瀏覽器的靜態(tài)桌面網(wǎng)站。
• 后來，當(dāng)智能手機(jī)處于初始階段時(shí)，許多網(wǎng)站所有者曾經(jīng)為他們的網(wǎng)站提供單獨(dú)的移動(dòng)版本。
• 然后響應(yīng)式網(wǎng)站變得流行起來，消除了擁有單獨(dú)的移動(dòng)版本的需要，并幫助節(jié)省了巨大的成本。
• iOS和Android移動(dòng)應(yīng)用再次流行，因?yàn)橥ㄟ^移動(dòng)應(yīng)用商店覆蓋了大量受眾。但是，應(yīng)用程序開發(fā)比擁有單獨(dú)的移動(dòng)版本更昂貴，因此沒有多少網(wǎng)站所有者更愿意為他們的網(wǎng)站安裝應(yīng)用程序。
• 最后，多虧了Google，我們現(xiàn)在有了Progressive Web Apps，可以幫助桌面網(wǎng)站擁有移動(dòng)應(yīng)用功能。

什么是PWA？

您可以在WordPress中使用相同的漸進(jìn)式Web應(yīng)用程序功能，并允許您的用戶將站點(diǎn)安裝為應(yīng)用程序。

• 在桌面上 – 該網(wǎng)站將在瀏覽器的地址欄中顯示提示，用戶可以單擊它來安裝應(yīng)用程序。
• 在手機(jī)上——用戶可以將網(wǎng)站添加到他們的主屏幕并像其他已安裝的應(yīng)用程序一樣訪問該網(wǎng)站。

與從瀏覽器訪問網(wǎng)站相比，PWA有很多優(yōu)勢：

• 它像一個(gè)應(yīng)用程序一樣工作，您可以將通知直接推送到用戶的設(shè)備。
• 無需打開瀏覽器即可訪問站點(diǎn)（盡管它需要瀏覽器）。
• 用戶可以將應(yīng)用程序固定到Windows中的任務(wù)欄或開始菜單，添加到Mac中的停靠，并將應(yīng)用程序圖標(biāo)保留在iOS/Android設(shè)備的主屏幕上。
• 所有訪問過的網(wǎng)頁都可以在設(shè)備上本地訪問，即使沒有互聯(lián)網(wǎng)也可以訪問。
• 與您的普通網(wǎng)站相比，該應(yīng)用程序的打開速度非常快，這在智能手機(jī)上尤其有用。

如果您不相信，請繼續(xù)閱讀以檢查PWA的運(yùn)行情況。

在WordPress中添加PWA功能

您需要從Google安裝PWA插件并配置一個(gè)簡單的設(shè)置來將您的WordPress網(wǎng)站轉(zhuǎn)換為PWA應(yīng)用程序。這是一個(gè)免費(fèi)插件，可用于任何WordPress網(wǎng)站。

請記住，您應(yīng)該有HTTPS連接才能將PWA添加到您的WordPress站點(diǎn)。由于所有WordPress用戶都可以通過Let’s Encrypt使用免費(fèi)SSL，因此我們認(rèn)為這對(duì)大多數(shù)用戶來說應(yīng)該不是問題。

此外，您的服務(wù)器應(yīng)支持為您的站點(diǎn)生成Web清單和服務(wù)人員。您可以在Google官方文檔中查看PWA的完整詳細(xì)信息。

安裝和設(shè)置PWA插件

登錄到您的WordPress管理儀表盤以在您的站點(diǎn)上安裝和激活PWA插件。

在WordPress中安裝PWA應(yīng)用程序

激活插件后，轉(zhuǎn)到“設(shè)置>閱讀”部分，啟用“Offline browsing”選項(xiàng)并保存更改。這將有助于在瀏覽器中緩存訪問過的頁面以供離線使用，并且用戶可以在沒有互聯(lián)網(wǎng)連接的情況下打開應(yīng)用程序訪問頁面。

啟用Offline browsing

僅此而已，該插件沒有其他可用設(shè)置。

在桌面上安裝您的站點(diǎn)

現(xiàn)在您已將PWA功能添加到您的網(wǎng)站，只需在瀏覽器中打開一個(gè)新選項(xiàng)卡并打開您的網(wǎng)站。我們在這個(gè)例子中使用谷歌瀏覽器，請確保使用支持PWA功能的瀏覽器。您將看到一個(gè)小通知，其中會(huì)閃爍“安裝”，然后在瀏覽器地址欄的右端顯示一個(gè)圖標(biāo)。請注意，圖標(biāo)形狀可能會(huì)因您使用的瀏覽器而異。

從瀏覽器安裝PWA

單擊該應(yīng)用程序以查看如下所示的小彈出窗口，然后單擊“Install”按鈕。

選擇安裝

這會(huì)將應(yīng)用程序添加到瀏覽器的文件夾（在Mac中的Google Chrome的“Chrome應(yīng)用程序”下）并以應(yīng)用程序模式啟動(dòng)您的網(wǎng)站。該插件將使用您網(wǎng)站的站點(diǎn)圖標(biāo)作為應(yīng)用程序圖標(biāo)。

PWA添加到Chrome應(yīng)用程序

您將看到如下所示的PWA應(yīng)用程序，它看起來與您計(jì)算機(jī)上任何其他已安裝的應(yīng)用程序相似。

網(wǎng)站以PWA應(yīng)用程序打開

您可以將應(yīng)用程序快捷方式添加到桌面、任務(wù)欄或Dock以便快速訪問。在Chrome中，您可以通過轉(zhuǎn)到“chrome://apps”部分來訪問該應(yīng)用程序。您可以隨時(shí)通過單擊應(yīng)用程序右上角的三個(gè)點(diǎn)圖標(biāo)并選擇“Uninstall …”選項(xiàng)來卸載該應(yīng)用程序。

卸載應(yīng)用

在Android和iOS中安裝PWA應(yīng)用程序

您可以使用與上述相同的方法在Chrome Android中安裝PWA應(yīng)用程序。這將在主屏幕上添加一個(gè)應(yīng)用程序圖標(biāo)，您可以像任何其他應(yīng)用程序一樣點(diǎn)擊和訪問它。如果您不想保留已安裝的應(yīng)用程序，只需刪除該應(yīng)用程序即可將其從手機(jī)中刪除。

不幸的是，iOS上的大多數(shù)瀏覽器，包括Chrome和Safari，都不支持直接安裝PWA。這與Apple存在類似問題，因?yàn)樗恢С謎OS中Safari中的推送通知。您可以做的是使用“Add to Home Screen”（A2HS）功能將書簽像應(yīng)用程序一樣添加到主屏幕上。它的工作原理類似于PWA應(yīng)用程序，因?yàn)?A2HS 被認(rèn)為是 PWA 技術(shù)的一部分。

添加到主屏幕

其他插件

如果你真的想使用PWA功能，那么免費(fèi)的PWA插件可能還不夠。您可以嘗試高級(jí)版Super Progressive Web Apps插件，它具有以下功能。

• 您只需設(shè)置用戶啟動(dòng)應(yīng)用程序時(shí)打開的默認(rèn)頁面。
• 顯示號(hào)召性用語彈出窗口，要求用戶將網(wǎng)站安裝為應(yīng)用程序。
• 自定義外觀、主頁和離線頁面。
• 您還可以將您的網(wǎng)站轉(zhuǎn)換為真正的Android應(yīng)用程序并在Google Play商店中發(fā)布。

超級(jí)PWA插件

如果您使用的是AMP版本，那么您可以嘗試PWA for WP & AMP plugin。此插件的高級(jí)版提供類似Super PWA插件的功能。

小結(jié)

當(dāng)您沒有時(shí)間和金錢來維護(hù)單獨(dú)的移動(dòng)應(yīng)用程序時(shí)，將PWA添加到您的WordPress網(wǎng)站是吸引移動(dòng)用戶的一種選擇。它具有許多優(yōu)點(diǎn)，例如無需額外費(fèi)用，并且可以通過使用OneSignal等流行插件發(fā)送推送通知來輕松留住用戶。雖然，它不適用于iOS設(shè)備，但我們希望很快能提供支持。