網頁設計是一個不斷變化的領域，它基於最新的技術和趨勢而發展。
PWA或Progressive Web App是最新的技術，可幫助您將桌面網站的功能與移動應用程式相結合。它消除了擁有單獨的移動應用程式的需要，並將移動應用程式可用的所有功能提供給桌面網站。
因此，WordPress網站所有者向您的讀者提供此功能是一個不錯的選擇。如果您有興趣，以下是如何將PWA功能新增到您的WordPress網站。
網站建設趨勢
以下是網站建設技術在過去十年中的發展歷程。
- 早些時候，人們曾經擁有僅適用於桌面瀏覽器的靜態桌面網站。
- 後來，當智慧手機處於初始階段時，許多網站所有者曾經為他們的網站提供單獨的移動版本。
- 然後響應式網站變得流行起來，消除了擁有單獨的移動版本的需要，並幫助節省了巨大的成本。
- iOS和Android移動應用再次流行，因為通過移動應用商店覆蓋了大量受眾。但是，應用程式開發比擁有單獨的移動版本更昂貴，因此沒有多少網站所有者更願意為他們的網站安裝應用程式。
- 最後，多虧了Google，我們現在有了Progressive Web Apps，可以幫助桌面網站擁有移動應用功能。
什麼是PWA？
您可以在WordPress中使用相同的漸進式Web應用程式功能，並允許您的使用者將站點安裝為應用程式。
- 在桌面上 – 該網站將在瀏覽器的位址列中顯示提示，使用者可以單擊它來安裝應用程式。
- 在手機上——使用者可以將網站新增到他們的主螢幕並像其他已安裝的應用程式一樣訪問該網站。
與從瀏覽器訪問網站相比，PWA有很多優勢：
- 它像一個應用程式一樣工作，您可以將通知直接推送到使用者的裝置。
- 無需開啟瀏覽器即可訪問站點（儘管它需要瀏覽器）。
- 使用者可以將應用程式固定到Windows中的工作列或開始選單，新增到Mac中的停靠，並將應用程式圖示保留在iOS/Android裝置的主螢幕上。
- 所有訪問過的網頁都可以在裝置上本地訪問，即使沒有網際網路也可以訪問。
- 與您的普通網站相比，該應用程式的開啟速度非常快，這在智慧手機上尤其有用。
如果您不相信，請繼續閱讀以檢查PWA的執行情況。
在WordPress中新增PWA功能
您需要從Google安裝PWA外掛並配置一個簡單的設定來將您的WordPress網站轉換為PWA應用程式。這是一個免費外掛，可用於任何WordPress網站。
請記住，您應該有HTTPS連線才能將PWA新增到您的WordPress站點。由於所有WordPress使用者都可以通過Let’s Encrypt使用免費SSL，因此我們認為這對大多數使用者來說應該不是問題。
此外，您的伺服器應支援為您的站點生成Web清單和服務人員。您可以在Google官方文件中檢視PWA的完整詳細資訊。
安裝和設定PWA外掛
登入到您的WordPress管理儀表盤以在您的站點上安裝和啟用PWA外掛。
在WordPress中安裝PWA應用程式
啟用外掛後，轉到“設定>閱讀”部分，啟用“Offline browsing”選項並儲存更改。這將有助於在瀏覽器中快取訪問過的頁面以供離線使用，並且使用者可以在沒有網際網路連線的情況下開啟應用程式訪問頁面。
啟用Offline browsing
僅此而已，該外掛沒有其他可用設定。
在桌面上安裝您的站點
現在您已將PWA功能新增到您的網站，只需在瀏覽器中開啟一個新選項卡並開啟您的網站。我們在這個例子中使用谷歌瀏覽器，請確保使用支援PWA功能的瀏覽器。您將看到一個小通知，其中會閃爍“安裝”，然後在瀏覽器位址列的右端顯示一個圖示。請注意，圖示形狀可能會因您使用的瀏覽器而異。
從瀏覽器安裝PWA
單擊該應用程式以檢視如下所示的小彈出視窗，然後單擊“Install”按鈕。
選擇安裝
這會將應用程式新增到瀏覽器的資料夾（在Mac中的Google Chrome的“Chrome應用程式”下）並以應用程式模式啟動您的網站。該外掛將使用您網站的站點圖示作為應用程式圖示。
PWA新增到Chrome應用程式
您將看到如下所示的PWA應用程式，它看起來與您計算機上任何其他已安裝的應用程式相似。
網站以PWA應用程式開啟
您可以將應用程式快捷方式新增到桌面、工作列或Dock以便快速訪問。在Chrome中，您可以通過轉到“chrome://apps”部分來訪問該應用程式。您可以隨時通過單擊應用程式右上角的三個點圖示並選擇“Uninstall …”選項來解除安裝該應用程式。
解除安裝應用
在Android和iOS中安裝PWA應用程式
您可以使用與上述相同的方法在Chrome Android中安裝PWA應用程式。這將在主螢幕上新增一個應用程式圖示，您可以像任何其他應用程式一樣點選和訪問它。如果您不想保留已安裝的應用程式，只需刪除該應用程式即可將其從手機中刪除。
不幸的是，iOS上的大多數瀏覽器，包括Chrome和Safari，都不支援直接安裝PWA。這與Apple存在類似問題，因為它不支援iOS中Safari中的推送通知。您可以做的是使用“Add to Home Screen”（A2HS）功能將書籤像應用程式一樣新增到主螢幕上。它的工作原理類似於PWA應用程式，因為 A2HS 被認為是 PWA 技術的一部分。
新增到主螢幕
其他外掛
如果你真的想使用PWA功能，那麼免費的PWA外掛可能還不夠。您可以嘗試高階版Super Progressive Web Apps外掛，它具有以下功能。
- 您只需設定使用者啟動應用程式時開啟的預設頁面。
- 顯示號召性用語彈出視窗，要求使用者將網站安裝為應用程式。
- 自定義外觀、主頁和離線頁面。
- 您還可以將您的網站轉換為真正的Android應用程式並在Google Play商店中釋出。
超級PWA外掛
如果您使用的是AMP版本，那麼您可以嘗試PWA for WP & AMP plugin。此外掛的高階版提供類似Super PWA外掛的功能。
小結
當您沒有時間和金錢來維護單獨的移動應用程式時，將PWA新增到您的WordPress網站是吸引移動使用者的一種選擇。它具有許多優點，例如無需額外費用，並且可以通過使用OneSignal等流行外掛傳送推送通知來輕鬆留住使用者。雖然，它不適用於iOS裝置，但我們希望很快能提供支援。
評論留言