漸進式網路應用程式正在改變使用者使用網站的方式。從技術上講，它們融合了移動應用程式和傳統網站的優點。從零開始使用 WordPress 中的 PWA 技術，不僅能讓您的遊戲更上一層樓，還能讓您建立一個更吸引人、更易訪問、載入更快的網站版本。
這意味著企業、博主和數字創作者可以更好地與他們的使用者群建立聯絡，並提供比以往更多的內容。
如果您準備將 WordPress 網站轉換為 PWA，那您就來對地方了。我們將準確解釋如何構建和優化這些網路應用程式，確保您的下一個專案取得成功。
什麼是 PWA？
漸進式網路應用程式是一種將傳統的響應式網站功能與功能豐富的移動應用程式功能相結合的技術。
根據 Mozilla 的說法，PWA 使用現代網路功能提供類似應用程式的網路介面，可通過網路瀏覽器訪問。
PWA 背後的三個關鍵技術元件包括：
- 服務工作者。PWA 使用獨立於網站執行的指令碼，執行只能在網頁上執行的類似操作。例如，服務工作者允許推送通知、實現後臺同步和離線可用性。後者之所以能夠實現，是因為服務工作者充當了代理網路的角色。PWA 可以快取內容，並在沒有連線的情況下提供內容，即使在不確定的網路條件下也能提供卓越的可靠性。
- 網路應用程式清單。清單是一個描述應用程式的 JSON 檔案，它允許應用程式在智慧手機上以新增到主頁圖示的形式顯示。該檔案旨在建立與使用者系統的互動，包括啟動 URL、顯示設定、描述性名稱和圖示。
- HTTPS。最後一個元件是最關鍵的元件之一。雖然它並不直接影響使用者體驗，但 HTTPS 可提高安全性，通過資料加密和資訊匿名來保護訪問者的隱私。
這三種技術的結合帶來了快速、免安裝的體驗，並將 PWA 完全整合到主頁中。
通過 Cafe Javas 網站和應用程式，您可以看到所有這些元素完美地結合在一起。
Cafe Javas 在桌面和移動裝置上提供類似應用程式的體驗。
該 PWA 由 TechAhead 開發，可在網站和移動應用程式版本之間提供無縫體驗。這樣，客戶就可以輕鬆地在網頁瀏覽器中下單，而不會像傳統網站那樣在使用者體驗方面令人沮喪。
為什麼將 WordPress 網站轉變為 PWA 是個好主意
將 WordPress 網站轉變為漸進式網路應用程式可以顯著提升您的數字形象和使用者體驗。以下是進行轉換的原因：
1. 使用者參與度更高
PWA 的眾多優勢之一是可以傳送推送通知。這使您可以向受眾告知最新訊息和公告，確保網站訪問者不會忘記您。這一特性鼓勵定期訪問和更多互動。
2. 提高網站速度
PWA 的速度也非常快。大部分資產都已快取，服務人員可幫助快速載入這些資產。即使您的網站訪問者沒有最快、最可靠的網路提供商，他們使用 WordPress 的 PWA 也能立即載入。這種速度提升不僅改善了使用者體驗，還對搜尋引擎排名起到了積極作用，因為網站速度是 Google 的一個排名因素。
3. 離線功能
PWA 最引人注目的優勢之一可能是其離線或在劣質網路上執行的能力。這是通過快取關鍵資源的服務工作者實現的，允許使用者在沒有網際網路連線的情況下訪問以前訪問過的頁面。
4. 傳統限制不適用
傳統網站和移動應用程式各有其侷限性。例如，網站在很大程度上依賴於網路質量，無法提供推送通知或離線訪問等本地應用程式功能。另一方面，移動應用程式要求使用者定期下載和安裝更新。
而 PWA 則沒有這些缺點。
將您的 WordPress 網站轉換為 PWA 不僅僅是改進您的網站。它通過一個更快、更吸引人的平臺，改變了受眾與網站的互動方式，該平臺在任何裝置和任何網路上都能正常執行，而且看起來很不錯。
在 WordPress 中開發 PWA 的先決條件
任何希望為 WordPress 構建 PWA 的人都需要了解以下內容：
- 使用者體驗設計。以使用者體驗設計原則為出發點，使您的 PWA 具有使用者友好性，讓人們願意使用和參與。
- HTML 和 CSS 技能。您必須對頁面進行編排，使其具有視覺吸引力和響應性。這就需要掌握網頁設計的基礎知識–HTML 和 CSS。
- PHP 知識。WordPress 基於 PHP 構建，因此您必須掌握這種伺服器端指令碼語言，以便調整主題和外掛，併為您的 PWA 新增其他動態內容功能。
- 精通 JavaScript。需要使用 JavaScript 來處理 PWA 的互動性、與服務工作者合作實現離線功能，以及新增推送通知等更復雜的功能。
- 熟悉 WordPress。如果您瞭解 WordPress 各方面的工作原理、API、主題和外掛定製、內容管理以及您可以使用的 WordPress 專用 PHP 函式，那麼開發過程將變得更加輕鬆。
適用於 WordPress 的最佳 PWA 外掛
如果您快速搜尋一下 WordPress 的最佳 PWA 外掛，您很快就會發現有一系列工具可以通過類似應用程式的功能、更快的載入時間和其他令人印象深刻的功能來增強您的網站。
對於那些希望快速構建 PWA 的人來說，以下是目前可用於 WordPress 的幾個頂級 PWA 外掛，它們可以加快您的工作流程。
1. Super Progressive Web Apps
Super Progressive Web Apps 外掛功能豐富。
Super Progressive Web Apps 外掛由 SuperPWA 開發，為 WordPress 使用者提供了一種簡單的方法，將他們的網站轉變為 Progressive Web Apps（PWA）。它融合了網路和移動應用技術的優點，可實現離線使用、近乎即時的載入時間，並可通過主螢幕上的快捷方式訪問。
優點
- 增加類似於應用程式的功能，以及在離線狀態下提供內容的能力，可提高網站訪問量、參與度和其他關鍵績效指標。
- 通過減少載入時間和減輕裝置負載來提高效能，還能提升網站的搜尋引擎優化價值。
- 使用者友好的設定，易於設定和配置。
缺點
- 可能與某些主題或外掛不相容，需要進一步調整才能正常使用。
- 現有的高階選項需要對網路技術有更深入的瞭解才能利用。
價格
SuperPWA 採用免費模式，這意味著核心功能是免費提供的，額外功能可通過升級獲得。SuperPWA 的第一套升級起價為 99 美元。
2. PWA for WP & AMP
PWA for WP & AMP 包括一個一鍵式應用程式生成器。
PWA for WP & AMP 外掛具有類似應用程式的介面、與 AMP PWA 完全相容、多站點支援、UTM 跟蹤以及離線工作的可能性，從而豐富了使用者體驗。它還支援服務人員開發、應用橫幅、網路應用清單和自定義閃屏。
優點
- 允許在主螢幕上安裝網站，提高參與度。
- 支援 AMP
- 包含用於離線互動的快取和分析功能
缺點
- 由於整合了 AMP，設定較為複雜
3. PWA
PWA 是一種建立 PWA 的簡化方法。
PWA 外掛側重於 PWA 的基本要素，如服務工作者、Web 應用程式清單和 HTTPS 支援。PWA 的目標是加快載入時間，並在移動裝置上提供類似應用程式的體驗。
優點
- 由於該外掛的目標是最終成為 WordPress 核心的一部分，因此您可以期待高質量的編碼和相容性。
- 它提供了一種採用 PWA 功能的簡單方法，可提高網站的可靠性、速度和參與度。
缺點
- 外掛不包含高階功能，需要額外的外掛或定製開發才能實現。
4. Instantify
Instantify 支援 PWA、AMP 和 FBIA。
Instantify 將三個關鍵功能整合到一個平臺中，使自己與眾不同： Progressive Web Apps (PWA)、Google 的 Accelerated Mobile Pages (AMP) 和 Facebook Instant Articles (FBIA)。有了這一組合，該工具可以轉換網站，使其具有類似應用程式的感覺，加快移動網頁載入時間，並將網站內容開放到社交平臺。
優點
- 將 PWA、AMP 和 FBIA 結合使用，意味著您不必擔心要處理不同的外掛。
- AMP 網頁在搜尋中會優先顯示，因此有可能提高網站在搜尋引擎中的可見度。
- 通過推送通知等方式吸引使用者，並通過優化廣告和 Facebook Instant Articles 更有效地實現內容盈利。
缺點
- 沒有免費試用版或計劃，這可能會讓想在付費前測試該外掛的使用者望而卻步。
- 如果設定不當，提供的大量功能可能導致該外掛無法與某些主題很好地配合使用。
定價
Instantify 的價格為 29 美元，一次性收費，終身授權。該產品不提供免費試用或退款保證，因此最好在購買前仔細考慮您當前的需求和相容性要求。
如何使用 WordPress 外掛構建 PWA：
使用 WordPress 構建 PWA 是增強網站移動體驗的一種令人興奮的方式，可以使網站更快、更可靠、更吸引人。正如我們已經討論過的，PWA 使用現代網路功能直接從瀏覽器向使用者提供類似應用程式的體驗。
下面是如何使用我們討論過的外掛之一將 WordPress 網站轉變為 PWA 的分步迷你指南。
步驟 1：規劃您的 PWA
在深入研究技術方面的問題之前，您應該規劃好 PWA 的功能和目標。考慮網站的哪些部分可以從離線訪問中受益，使用者應該能夠在沒有網路連線的情況下執行哪些操作，以及您希望 PWA 在主螢幕上的外觀如何。規劃有助於確保您的 PWA 以有意義的方式增強使用者體驗。
步驟 2：選擇合適的外掛
正如我們所討論的，有多種外掛可用於將 WordPress 網站轉化為 PWA。
請根據您的具體需求對每種外掛進行評估。如果您正在尋找一個簡單、直接的解決方案，Super Progressive Web Apps 可提供簡單的設定。對於需要整合多個工具的使用者，Instantify 可能是更好的選擇。
在今天的示例中，我們將使用 Super Progressive Web Apps。
步驟 3：安裝所選外掛
選擇好外掛後，將其安裝到 WordPress 網站上。您可以進入 WordPress 面板，導航到外掛 > 新增新外掛，搜尋外掛名稱，然後點選立即安裝。安裝完成後，點選啟用。
從 WordPress 儀表盤安裝 Super Progressive Web Apps 外掛。
步驟 4：配置設定
啟用後，您可以在 WordPress 面板的 “設定” 選單下找到外掛的設定。
Super Progressive Web Apps 外掛設定。
在這裡，您可以配置 PWA 的各個方面，例如：
- App name. PWA 在主螢幕上顯示的名稱。
- Description. 應用程式的簡要說明。
- Start page. PWA 將首先載入的頁面。
- Theme color. 工具欄的顏色。
- Background color. 閃屏背景顏色。
- Icon.選擇一張圖片作為 PWA 的圖示。
完成修改後，單擊 Save Settings。
步驟 5：測試您的新 PWA
配置好設定後，在不同裝置上測試 PWA 至關重要。使用 Chrome DevTools 或類似工具模擬各種裝置，或直接在移動裝置上測試，將網站新增到主螢幕。
例如，如果您使用的是 iOS 裝置，您需要在訪問網站前清除移動瀏覽器的快取。
單擊 “Share” 按鈕，然後單擊 “Options“。單擊 Add to Homescreen。關閉瀏覽器，然後點選剛剛新增到主螢幕的應用圖示。瀏覽網站上的幾個頁面，斷開網路連線，然後嘗試再次訪問這些頁面。
如果能載入，說明您的 PWA 已經啟動並執行！
如何使用 WordPress 從零開始建立 PWA
對於那些尋求更多控制和定製的人來說，手動將 WordPress 網站轉換為 PWA 可能是首選途徑。
這種方法技術性較強，需要充分了解網站開發原理，因此請務必檢視前面列出的先決條件，以確認您是否有能力完成該步驟。
第 1 步：確保 HTTPS
使用 HTTPS 確保網站安全對於 PWA 來說是不可或缺的。HTTPS 可加密網站與訪問者之間的資料，防止資料洩露等。
如果您的主機套餐中還沒有 SSL 證書，您可以從 Let’s Encrypt 獲取免費的 SSL 證書。
安裝過程因託管服務提供商而異。許多提供簡單的一鍵式 SSL 安裝選項。具體說明請檢視主機提供商的支援文件。
安裝 SSL 證書後，通過從 HTTP 重定向到 HTTPS，確保所有網站流量都使用 HTTPS。這可以通過WordPress外掛（如Really Simple SSL）或修改網站的 .htaccess 檔案（如果你願意手動編輯的話）來實現。
第 2 步：建立網路應用程式清單
網路應用程式清單是一個 JSON 檔案，用於控制 PWA 如何顯示給使用者以及如何啟動。它包括應用程式的名稱、圖示和啟動 URL 等設定。
首先，建立一個名為 manifest.json 的 JSON 檔案。該檔案應包含應用程式的關鍵資訊，如名稱（ name ）、簡稱（ short_name ）、啟動 URL（ start_url ）、顯示型別（ display ）、背景顏色（ background_color ）、主題顏色（ theme_color ）和圖示（ icons ）。
以下是 MDN Web Docs 提供的程式碼大致內容。
{
"name": "Your App Name",
"short_name": "AppShortName",
"start_url": "/",
"display": "standalone",
"background_color": "#FFFFFF",
"theme_color": "#000000",
"icons": [
{
"src": "path/to/icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
在 WordPress 網站模板的 head 新增一個指向 manifest.json 檔案的連結。
然後，使用 Google 的 Lighthouse 等工具測試並驗證網路應用程式清單的實現。
第 3 步：實施服務工作者
Service workers 是網路應用程式與外部世界之間的代理。它們對於離線功能、推送通知和資源快取至關重要。
要建立服務工作者，您需要建立一個新的 JavaScript 檔案。檔名為 service-worker.js，並將其放在 WordPress 主題的根目錄下。該檔案將包含快取資源、攔截網路請求和管理離線功能的邏輯。
您需要從網路應用程式的 JavaScript 中註冊服務 Worker。通常，這需要在網頁上執行的主 JavaScript 檔案中完成。
下面是一個如何從 Borstch 註冊服務 Worker 的示例：
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
在您的 service-worker.js 檔案中，實現快取靜態資產、攔截獲取請求以及離線時從快取中提供內容的邏輯。
下面是一個快取一些資產的基本示例：
const CACHE_NAME = 'your-app-cache';
const urlsToCache = [
'/',
'/styles/main.css',
'/script/main.js'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
return cache.addAll(urlsToCache);
})
);
});
要確保服務工作者的行為符合預期，必須進行測試。使用 Chrome DevTools 中的 Application 面板來檢查已註冊的服務工作者、快取資產等。
優化 WordPress PWA
優化 WordPress PWA 是確保速度、可靠性和功能性的最後一項工作。讓我們深入瞭解一些高階優化技術，重點是快取策略、資源優先順序和針對不同連線速度的自適應載入。
快取策略
根據 Smashing Magazine 的說法，快取是 PWA 優化的關鍵因素。它通過儲存資源副本，使您的應用程式載入速度更快。實施快取優先策略可確保您的應用程式在嘗試使用網路之前從快取中獲取資源。這種方法對於不經常變化的靜態資產尤其有效。
在安裝階段使用服務工作者快取重要資產。這包括應用程式的外殼（HTML、CSS、JavaScript）和任何靜態資源。
對於動態內容，可考慮使用 stale-while-revalidate 等策略，先提供快取內容，然後再用伺服器上的新內容更新快取。
確定資源的優先順序
並非所有資源都一樣。有些資源對於初始呈現至關重要，而其他資源則可以通過懶載入來呈現。分析應用程式的載入效能，確定哪些資源是必要的，應首先載入。您可以使用預載入和預取指令來告知瀏覽器這些優先順序：
- Preload（預載入）. 用於當前頁面所需的資源。它會告訴瀏覽器在載入過程中儘早獲取這些資源。
- Prefetch（預取）. 用於未來導航中可能需要的資源。它建議瀏覽器在空閒時獲取這些資源。
自適應載入
自適應載入可根據使用者的裝置能力和網路條件定製應用程式的內容和功能。這種技術可確保您的 PWA 提供良好的體驗，即使在緩慢或不穩定的網路中也是如此。
實施功能檢測，根據使用者的裝置提供不同的資產。例如，您可以向連線速度快的使用者提供高解析度圖片，而向連線速度慢的使用者提供較小的壓縮圖片。
您可以使用網路資訊 API（ Network Information API ） 來檢測使用者的連線速度，並相應調整應用程式的行為。例如，您可以選擇在連線速度較慢的情況下只載入必要的內容，將非關鍵資源推遲到連線速度提高時再載入。
保持谷歌標準
將 WordPress 網站轉化為 PWA 是提升移動使用者體驗的明智之舉。但是，您需要遵守 Google 的 PWA 標準，這樣才能取得成效。
Google 的 PWA 標準強調安全性、使用者體驗和可訪問性：
- 網站必須使用 HTTPS 並在移動裝置上具有響應性
- 允許離線訪問應用 URL，幷包含 “新增到主螢幕 “功能的後設資料。
- 它們應能快速載入，在不同瀏覽器上都能正常執行，並確保頁面轉換流暢，不依賴網路。
- 所有頁面都應保持唯一的 URL。
小結
漸進式網路應用程式在提高使用者參與度和網路可訪問性方面實現了重大飛躍。PWA 將傳統網站的功能與移動應用程式的高階功能整合在一起，提供了類似應用程式的無縫體驗，而無需在應用程式商店下載。
有鑑於此，我們今天在此探討了 PWA 對於 WordPress 網站的變革潛力，強調了它們的優勢，並就如何使用 WordPress 外掛或通過手動編碼建立自己的 PWA 提供了指導。希望對您有所幫助。
如果您還沒有這樣做，您會很快將您的 WordPress 網站變成 PWA 嗎？
評論留言