Zi 字媒體

WordPress 啟用 PWA 加速網頁載入應用方法 | 坂本Sakamoto.blog

2021/12/25

您想在 WordPress 設置 Progressive Web Apps (PWA) 嗎？Progressive Web Apps (PWA) 是具備漸進式增強的網頁應用 App 與相同的用戶體驗的網站，據說可以有效改善瀏覽速度並提高 SEO 轉換率。在本文中，我們將向您教學如何在 WordPress 啟用 PWA 模式。

什麼是 PWA？

簡而言之，Progressive Web Apps (PWA) 是一種創建 Web 應用 App (如HTML、CSS、JavaScript) 的技術，這種技術只能僅在 iOS、Android 智慧型手機中可實現使用的功能，桌上型也可行。如 Flipkart、Twitter、Telegram … etc 推出了 Progressive Web Apps (PWA) 流行的網站，並將流量增加了 60％，而能通過快速載入提供更好的用戶體驗。

PWA 主要優點功能：

即使離線時或網路環境較差的情況下也可以使用。
全螢幕全版面與原生介面一致顯示。
可以輕鬆向用戶發送通知的能力。
無需通過 App Store、Google Play 提交應用商店。
SSL 能為所有人提供高安全性。
快速載入網頁

在設置 PWA 之前確認

網站必須是 HTTPS 安全連接模式。
網站需符合響應式網頁 RWD 規範。

安裝 Super Progressive Web Apps

下載安裝 Super Progressive Web Apps 外掛套件，並且啟用它。

外掛套件名稱：Super Progressive Web Apps
下載連結頁面：https://tw.wordpress.org/plugins/super-progressive-web-apps/

設置說明

Application Name	網站名稱
Application Short Name	縮簡名稱 (限於 12 個字位元)
Description	網站簡要描述
Application Icon	192×192 PNG 圖標檔案 (透明空白區域不要太多)
Splash Screen Icon	512×512 PNG 圖標檔案 (透明空白區域不要太多)
Background Color	背景顏色
Theme Color	UI 主題色 (需與背景顏色相同)
Start Page	指定從點選應用 App 時要載入的頁面。當前的起始頁是 https://www.sakamoto.blog
Offline Page	當離線時且請求的頁面尚未快取時，將顯示離線頁面。當前的離線頁面是 https://www.sakamoto.blog
Orientation	設置為 Follow Device Orientation 時，手機上旋轉時畫面會旋轉。
Display	顯示模式決定啟動應用時顯示的瀏覽器 UI 介面。