Zi 字媒體

您想在 WordPress 設置 Progressive Web Apps (PWA) 嗎？Progressive Web Apps (PWA) 是具備漸進式增強的網頁應用 App 與相同的用戶體驗的網站，據說可以有效改善瀏覽速度並提高 SEO 轉換率。在本文中，我們將向您教學如何在 WordPress 啟用 PWA 模式。 目次 1 什麼是 PWA？ 1.1 PWA 主要優點功能： 1.2 在設置 PWA 之前確認 2 安裝 Super Progressive Web Apps2.1 設置說明 3 開啟 PWA 瀏覽方法 3.1 桌上版開啟 PWA 瀏覽 3.2 手機版開啟 PWA 瀏覽 4 總結 什麼是 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 介面。 您需要通過 Lighthouse 檢測您的 PWA 是否符合規範，只要是 80~100 分數的性能即可，不過 PWA 驗證定義上審查會嚴格。 開啟 PWA 瀏覽方法 在 WordPress 設置 Progressive Web Apps (PWA) 完成後，要如何確認 Progressive Web Apps (PWA) 是否有啟用成功？以下有二種方法可實測，分別為桌上版、手機版來開啟瀏覽。 桌上版開啟 PWA 瀏覽 依 Chrome 範例，需要 68 或以上最新版本，然後在網址例輸入 chrome://flags ，找到 Desktop PWAs 選項將設 Enabled 開啟，再重新開啟 Chrome 瀏覽器。 打開網站，在瀏覽器右側點選單設置的按鈕 → 安裝「●●●●●」… 這個按鈕點擊 然後會出現一個視窗對話框，再按 安裝 ，就會出現在桌面上了。 然後你就可以在桌面上 Logo 圖標，點二下，就會看到一個沒有瀏覽器痕跡的功能，這就是 Progressive Web Apps (PWA)了。Progressive Web Apps (PWA) 支援離線網頁技術，即使在沒有網路的情況下也能使用。 如果是非 PWA 的話，也會有 加入到主畫面 或是 加入到應用程式 的選項。當您打開它時候，依然會使用 Chrome 瀏覽器去打開，跟沒有瀏覽器痕跡的功能作用是無差別。 手機版開啟 PWA 瀏覽 依 iOS Safari 為例，需要 iOS 11.3 以上最新版本，在下方有一個分享圖示，點擊後，選 加入到主畫面 的選項。 就會看到 加入到主畫面 確認視窗，按 確認 後，會在桌面上新增即可完成了。 總結 Sakamoto據認為，作為主軸部署在 Web 服務開發 PWA 以改進 UI 並降低成本，以替代本機應用 App 開發； 另一方面，想要用 PWA 替換已經發布的應用 App 是不太可能的。