將您的 WordPress 網站轉換為 PWA：順應潮流

已發表: 2021-02-17

目錄

PWA 運動是如此具有變革性和紀念意義的運動，以至於它已成為一股巨浪，席捲整個科技世界，將其發展道路上的一切都變得更好。

世界上一些最有影響力的品牌，例如擁有著名的Twitter Lite的 Twitter，現在已經正式將 PWA 作為其未來發展的基礎。

 推薦閱讀：12 個漸進式 Web 應用示例，為您提供靈感

WordPress，或者更具體地說，Automattic——WordPress 背後的人，也在 2017 年 Chrome 開發峰會上發起了 WordPress PWA 運動，宣布他們正在將 Progressive Technologies 集成到 WordPress 等平台的工作流程中。

從那時起，WordPress 環境發生了很大變化，以至於不將WordPress 轉換為 PWA 幾乎肯定會降低觀眾的滿意度。

了解 PWA

正如 Google 所說，Progressive Web Apps 是

  • 可靠——即使在不確定的網絡條件下，也能立即加載，從不顯示 downasaur。
  • 快速– 使用絲般流暢的動畫快速響應用戶交互，並且沒有卡頓的滾動。
  • 引人入勝——感覺就像設備上的自然應用程序，具有身臨其境的用戶體驗。

簡而言之，PWA 是 Web 瀏覽體驗的未來。 有關 PWA 的更多信息，請查看我們的文章：什麼是 PWA？。

為什麼選擇 WordPress 的 PWA？

除非您希望您的觀眾因等待您的網頁加載而感到無聊，否則具有更高站點性能、功能和 UX 的解決方案始終是更好的選擇。

Jetpack 中的 PWA 實驗
PWA 優化前後的 WordPress

以著名的 Twitter Lite 為例。 一個案例研究表明，隨著 Twitter Lite 的發布，Twitter 的用戶行為發生了巨大變化。

Twitter Lite 的工程主管 Nicolas Gallagher 指出：

Twitter Lite 現在是使用 Twitter 的最快、最便宜和最可靠的方式。 該網絡應用程序的性能可與我們的本地應用程序相媲美，但與 Android 版 Twitter 相比，它所需的設備存儲空間不到 3% 。

不僅Twitter 加入了這場運動，Spotify 等大品牌也通過他們最近開發的 Spotify PWA 做到了這一點。 有關 PWA 帶來的變化的統計數據和新聞無處不在，幾乎不容忽視，因此，PWA 驅動的 Web 未來的主張似乎比以往任何時候都更加現實。

PWA 統計
資料來源：PWAstats

在 WordPress 中設置 PWA 的先決條件

  • Progressive Web Apps 要求您的 WordPress 網站從安全的來源提供服務，即您的網站應該是 HTTPS而不是 HTTP 。
  • WordPress 版本：高於 3.5.0
  • PHP版本：高於5.3

如何將您的 WordPress 網站轉換為 PWA

滿足上述先決條件後，WordPress 網站所有者可以選擇使用以下兩種方式之一轉換為 PWA：手動或使用插件。

1. 手動開發你的 PWA

PWA 的開發——儘管成本低於其他類型的開發——仍然需要大量的編碼知識和開發人員來了解他或她如何處理流行的 Javascript 框架和庫，尤其是 Angular 和 React。 這就是為什麼經常建議沒有經驗的網站所有者嘗試插件（免費和/或付費插件）或聘請專業開發人員的原因，因為構建 PWA 的過程並不容易。

在嘗試手動構建 PWA 時，請記住遵循 Google 的 Progressive Web App Checklist 並針對 Lighthouse 工具測試您的網頁，以獲得最佳的用戶體驗。

2. 帶插件

不要擔心，非開發者網站所有者！ WordPress 提供了各種各樣的插件，這些插件可以完成大部分繁重的工作，供用戶選擇。 這些插件有 2 種類型：免費和付費插件。

免費插件

1.超級PWA

SuperPWA 橫幅

WordPress 的免費 PWA 插件的頂部是 SuperPWA，它具有優良的服務和質量的悠久傳統。

SuperPWA 易於配置，只需不到一分鐘即可設置您的 Progressive Web App。 SuperPWA 通過刪除它創建的每個數據庫條目和文件來進行乾淨卸載。 事實上，在您第一次手動保存之前，所有默認設置都不會保存到數據庫中。

活躍安裝： 30000+
星級：★★★★★

2. PWA

PWA 橫幅

PWA 旨在為主題和插件提供 PWA 構建塊和協調機制，以免重新發明輪子，也不會相互衝突。

如果您正在開發包含服務工作者的插件或主題，請考慮依賴此 PWA 插件，或者至少僅使用內置實現作為 PWA 插件不可用時的後備。

最後更新： 5 個月前
活躍安裝： 20,000+
星級：★★★★

3. WP & AMP 的 PWA

WP 橫幅的 PWA

對於免費產品，WP & AMP 的 PWA 非常擅長它的功能。 它很好，易於使用，並提供卓越的客戶服務； 然而，它的文檔感覺有點缺乏，這可能導致更難讓一切正常工作。
活躍安裝： 8,000+
星級：★★★★★

4. WebSuite PWA

WebSuit WordPress PWA 插件

WebSuite PWA 是一個完整的插件，可將您的網站變成具有集成 AMP 支持的 PWA。 該插件帶有各種主題，可為您的 PWA 提供類似應用程序的外觀，以及許多功能，例如添加到主屏幕、推送通知、CDN、分析集成等。

活躍安裝： 30+

星級： ★★★★★

5. Webkul 為 WordPress 提供的簡單 PWA

用於 WordPress 的 Webkul PWA

只需 49 美元，您就可以將您的 WordPress 網站轉換為一個功能齊全的 PWA，並擁有其所有功能和特權——這還不是全部。 該插件與所有 WordPress 主題兼容，此外，您可以從管理後端更改主題、應用程序名稱以及應用程序圖標，而無需太多努力或技術知識。

活動安裝：信息不可用

星級：資料不詳

如何安裝 PWA 插件

WordPress PWA 插件的安裝過程非常簡單明了。 下面我們將以SuperPWA為例：

WordPress 安裝：

  • 訪問WordPress 管理員 > 插件 > 添加新的
  • 搜索“ Super Progressive Web Apps ”
  • 單擊“立即安裝”，然後單擊“激活” Super Progressive Web Apps

手動安裝：

  • 將 super-progressive-web-apps文件夾上傳到 /wp-content/plugins/服務器上的目錄
  • 轉到WordPress 管理員 > 插件
  • 從列表中激活Super Progressive Web Apps插件。

結論

這種 PWA 運動似乎不會很快放緩，最好的選擇是在發現自己落後之前立即採取行動。

如果您精通技術並希望為您和您的網站提供更多自由，那麼手動開發 PWA 應該是您的首選。 但是，對於經驗不足但想要一種更安全、久經考驗的方法的網站所有者來說，適用於 WordPress 的 PWA 插件並不是一個壞主意。 在處理構建 PWA 的過程時，插件可以節省您的時間和偶爾的頭痛，從而允許更好的資源分配。

延伸閱讀：

  • Magento PWA Studio：與 Vue Storefront 的詳細比較
  • Magento WordPress 集成：分步指南