Chỉ sử dụng ServiceWorker cache khi ngoại tuyến

Question

Tôi đang cố gắng tích hợp nhân viên dịch vụ vào ứng dụng của mình, nhưng tôi thấy nhân viên dịch vụ cố truy xuất nội dung đã lưu trong bộ nhớ cache ngay cả khi trực tuyến, nhưng tôi muốn nó thích mạng hơn trong những tình huống này. Tôi có thể làm cái này như thế nào? Dưới đây là mã tôi có bây giờ, nhưng tôi không tin rằng nó đang làm việc. Mã cài đặt SW được bỏ qua cho ngắn gọn.

var CACHE_NAME = 'my-cache-v1'; 
var urlsToCache = [ 
    /* my cached file list */ 
]; 

self.addEventListener('install', function(event) { 
    // Perform install steps 
    event.waitUntil(
    caches.open(CACHE_NAME) 
     .then(function(cache) { 
     console.log('Opened cache'); 
     return cache.addAll(urlsToCache); 
     }) 
); 
}); 

/* request is being made */ 
self.addEventListener('fetch', function(event) { 
    event.respondWith(
    //first try to run the request normally 
    fetch(event.request).catch(function() { 
     //catch errors by attempting to match in cache 
     return caches.match(event.request).then(function(response) { 
     // Cache hit - return response 
     if (response) { 
      return response; 
     } 
     }); 
    }) 
); 
}); 

Điều này dường như dẫn đến cảnh báo như The FetchEvent for "[url]" resulted in a network error response: an object that was not a Response was passed to respondWith(). Tôi mới cho người lao động dịch vụ, vì vậy lời xin lỗi cho bất kỳ thuật ngữ sai lầm hay các hoạt động xấu, tôi hoan nghênh bất cứ lời khuyên. Cảm ơn bạn!

Answer 1

Nếu không thử nghiệm điều này, tôi đoán là bạn không giải quyết chính xác respondWith() trong trường hợp không có khớp bộ nhớ cache. According to MDN, mã được chuyển đến respondWith() được cho là "giải quyết bằng cách trả về phản hồi hoặc lỗi mạng để Tìm nạp". Vậy tại sao không thử thực hiện việc này:

self.addEventListener('fetch', function(event) { 
    event.respondWith(
    fetch(event.request).catch(function() { 
     return caches.match(event.request); 
    }) 
); 
});