在ServiceWorker中獲取緩存的對象 - 失敗

Question

當我嘗試通過檢查開發工具中的脫機按鈕來獲取緩存時，它沒有發生互聯網連接錯誤，並嘗試關閉無線網絡獲取緩存數據。

Answer 1

我建議您爲Chrome安裝Lighthouse擴展程序，它使測試方式更加簡單，並且報告非常有用。 你在檢查緩存文件的'fetch'事件嗎？你確定你有緩存的文件嗎？

self.addEventListener('fetch', function(event) { 
    console.log(event.request.url); 
    event.respondWith(
    caches.match(event.request).then(function(response) { 
     return response || fetch(event.request); 
    }) 
); 
}); 

Answer 2

離線按鈕

Offline檢查在Chrome檢查工具完全模擬線下的網絡狀態，所以你不必在使用它來關閉調制解調器，無線或網絡適配器。

觀察響應源

您可以前往Chrome檢查>網絡面板，並期待在size列來檢查響應的起源。通過查看那裏，您將能夠告訴瀏覽器緩存，服務工作者或網絡提供的請求。

錯誤

如果你是因爲你的sw.js的得到錯誤，而你是離線的，它不是一個問題。它只是意味着無法從網絡獲得服務工作人員，無論如何您都無法在離線時收到服務人員。 See this answer瞭解關於它的更多詳細信息。