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

潘尼麥拉奇蘭
Penny McLachlan

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

建構新式網頁體驗 (而非可預見 PWA) 的其中一項標準,在於即使裝置處於離線狀態,應用程式必須能繼續運作。也就是說,如果使用者失去裝置的網路存取權,就不會使用 Chrome 恐龍畫面!

所有 PWA 標準的目標,都是確保使用者在瀏覽網頁時,能獲得優質的應用程式競爭體驗。Chrome 會先檢查 PWA 標準,然後再啟用 PWA 的安裝功能。

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

先前的離線偵測邏輯

已有數年的時間,驗證離線支援功能的 PWA 可安裝性標準便是如此。直到最近,Chrome 無法透過 Service Worker 模擬要求,因此無法對離線行為進行全面檢查。

Service Worker 圖表

也就是說,Chrome 無法在離線檢查期間驗證 fetch 事件處理常式是否傳回 HTTP 200 的有效資源。Chrome 只會檢查 Service Worker 是否確實有 fetch 處理常式。

更新離線偵測邏輯

Chrome 89 版新增了透過 Service Worker 執行模擬離線要求的功能,改善離線偵測邏輯,以更準確地反映應用程式的實際離線支援。

我們已計劃運用這項新功能,確保 PWA 在離線狀態下會提供有效頁面,但也打算保留相關計畫。如果頁面含有包含 fetch 事件處理常式的 Service Worker,則系統會繼續通過可安裝檢查。

這對開發人員有何影響?

雖然現在無須進行任何變更,但我們強烈建議您提供離線體驗,因為我們預期未來會使用更新的邏輯來檢查是否具有有效頁面。

您可自行決定要提供的離線體驗類型。 光是訂閱的部分,就能享有完全正常運作的離線體驗。這表示您必須預先快取所有需要的資源和資料,並在使用者再次連上網路時將資料同步到伺服器。快取資源也有助於改善網站體驗核心指標,因為每次都不必從網路下載資源。規格的另一端是自訂離線備用頁面

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