WordPress 啟用 PWA 加速網頁載入應用方法 1

WordPress 啟用 PWA 加速網頁載入應用方法

您想在 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/
WordPress 啟用 PWA 加速網頁載入應用方法 3

設置說明

Application Name網站名稱
Application Short Name縮簡名稱 (限於 12 個字位元)
Description網站簡要描述
Application Icon192×192 PNG 圖標檔案 (透明空白區域不要太多)
Splash Screen Icon512×512 PNG 圖標檔案 (透明空白區域不要太多)
Background Color背景顏色
Theme ColorUI 主題色 (需與背景顏色相同)
Start Page指定從點選應用 App 時要載入的頁面。當前的起始頁是 https://www.sakamoto.blog
Offline Page當離線時且請求的頁面尚未快取時,將顯示離線頁面。當前的離線頁面是 https://www.sakamoto.blog
Orientation設置為 Follow Device Orientation 時,手機上旋轉時畫面會旋轉。
Display顯示模式決定啟動應用時顯示的瀏覽器 UI 介面。
您需要通過 Lighthouse 檢測您的 PWA 是否符合規範,只要是 80~100 分數的性能即可,不過 PWA 驗證定義上審查會嚴格。

開啟 PWA 瀏覽方法

在 WordPress 設置 Progressive Web Apps (PWA) 完成後,要如何確認 Progressive Web Apps (PWA) 是否有啟用成功?以下有二種方法可實測,分別為桌上版、手機版來開啟瀏覽。

桌上版開啟 PWA 瀏覽

依 Chrome 範例,需要 68 或以上最新版本,然後在網址例輸入 chrome://flags ,找到 Desktop PWAs 選項將設 Enabled 開啟,再重新開啟 Chrome 瀏覽器。
WordPress 啟用 PWA 加速網頁載入應用方法 4
打開網站,在瀏覽器右側點選單設置的按鈕 → 安裝「●●●●●」… 這個按鈕點擊
WordPress 啟用 PWA 加速網頁載入應用方法 5
然後會出現一個視窗對話框,再按 安裝 ,就會出現在桌面上了。
WordPress 啟用 PWA 加速網頁載入應用方法 6
WordPress 啟用 PWA 加速網頁載入應用方法 7
然後你就可以在桌面上 Logo 圖標,點二下,就會看到一個沒有瀏覽器痕跡的功能,這就是 Progressive Web Apps (PWA)了。Progressive Web Apps (PWA) 支援離線網頁技術,即使在沒有網路的情況下也能使用。
如果是非 PWA 的話,也會有 加入到主畫面 或是 加入到應用程式 的選項。當您打開它時候,依然會使用 Chrome 瀏覽器去打開,跟沒有瀏覽器痕跡的功能作用是無差別。

手機版開啟 PWA 瀏覽

依 iOS Safari 為例,需要 iOS 11.3 以上最新版本,在下方有一個分享圖示,點擊後,選 加入到主畫面 的選項。

WordPress 啟用 PWA 加速網頁載入應用方法 8

就會看到 加入到主畫面 確認視窗,按 確認 後,會在桌面上新增即可完成了。

WordPress 啟用 PWA 加速網頁載入應用方法 9

總結

Sakamoto
據認為,作為主軸部署在 Web 服務開發 PWA 以改進 UI 並降低成本,以替代本機應用 App 開發;
另一方面,想要用 PWA 替換已經發布的應用 App 是不太可能的。
WordPress 啟用 PWA 加速網頁載入應用方法 10
最新情報をチェックしよう!
>最強の Multiple CDNs「mlytics」" width="1280" height="720" >

最強の Multiple CDNs「mlytics」


不同 CDN 的成本和性能各不相同,使用 mlytics Multiple CDNs 可以全面改善延遲和正常運行時間,也能完全控制 CDN 的配置,允許降低城市級網站性能。

mlytics 簡化了監控真實用戶,管理多個 CDN,自動化負載平衡以及為所有 CDN 建置 WAF DDoS 防禦。

對我們的 Multiple CDNs「mlytics」 服務有興趣嗎?想要更多了解的話,可以點擊下面【與我們聯繫】為您服務。

CTR IMG