改善漸進式網頁應用程式離線支援偵測功能

Penny McLachlan
Penny McLachlan

漸進式網頁應用程式 (PWA) 是一種模式,可讓您使用網路技術建構可安裝的新式應用程式,適用於行動裝置和電腦裝置。

建立現代化網頁體驗的其中一個條件 (並非巧合的是,這也是漸進式網頁應用程式) 是應用程式必須在裝置離線時繼續運作。也就是說,如果使用者在裝置上失去網路存取權,就不會出現 Chrome Dino 畫面!

所有 PWA 標準的目標,都是確保使用者在瀏覽網站時,能享有高品質的應用程式競爭力體驗。Chrome 會先檢查 PWA 條件,再為 PWA 啟用安裝功能。

只有符合所有核心漸進式網頁應用程式安裝可行性標準的應用程式 (包括支援離線模式),才能透過 Chrome 安裝到裝置上。

先前的離線偵測邏輯

離線支援功能的驗證已是 PWA 安裝規定的一部分,直到最近,Chrome 才具備透過 Service Worker 模擬要求的能力,因此無法全面檢查正確的離線行為。

服務工作站圖表

這表示 Chrome 無法驗證 fetch 事件處理常式是否在離線檢查期間傳回有效的資源,並附上 HTTP 200。Chrome 只會檢查 service worker 是否確實有 fetch 處理常式。

更新離線偵測邏輯

Chrome 89 新增了透過服務工作者執行模擬離線要求的功能,可讓改善的離線偵測邏輯更能反映應用程式的實際離線支援功能。

我們原本打算利用這項新功能,確保 PWA 在離線時提供有效的網頁,但目前已暫緩這項計畫。如果網頁含有包含 fetch 事件處理常式的服務工作,安裝性檢查將繼續通過。

這對開發人員有何影響?

雖然目前無須進行任何變更,但我們強烈建議您提供離線體驗,因為我們預計在未來某個時間點使用更新的邏輯來檢查有效的網頁。

您可以自行決定要提供哪種離線體驗。在光譜的另一端,則是完整的離線體驗。也就是說,您必須預先快取所有必要的資源和資料,並在使用者再次上線時將資料與伺服器同步。快取資源也有助於改善Core Web Vitals 指標,因為這樣就不必每次都從網路下載資源。另一種做法是使用自訂離線備用頁面

開發人員工具的「Issues」分頁下方顯示的警告,將在 Chrome 90 左右移除。