目前的網頁在離線時不會傳回狀態碼 200 的回應

核心漸進式網頁應用程式檢查清單指出 PWA 應提供自訂的離線網頁。「最佳化漸進式網頁應用程式」檢查清單指出 PWA 應提供離線體驗,讓 PWA 能夠與線上運作一樣 (在不需要網路連線的情況下) 也能運作。

詳情請參閱「什麼是網路可靠性?如何評估?」一文。

Lighthouse 離線稽核失敗情形

Lighthouse 會標記在離線時不會傳回 HTTP 200 回應的網頁:

Lighthouse 稽核功能顯示網頁在離線時不會傳回 200 回應

Lighthouse 使用 Chrome 遠端偵錯通訊協定模擬離線連線,然後嘗試使用 XMLHttpRequest 擷取頁面。

如何讓 PWA 離線運作

  1. Service Worker 新增至應用程式。
  2. 使用 Service Worker 在本機快取檔案。
  3. 離線時,以 Service Worker 做為網路 Proxy,傳回檔案的本機快取版本。

資源