使用服务人员来捕捉网络错误

Question

我有一个服务工作人员为我的网站，但我不知道如何让它处理有网络错误时，我浏览过Mozilla的指南，但是当我运行工作人员离线它说网络错误被传递给respondWith函数，并且catch语句似乎没有响应缓存数据。

this.addEventListener('install', function(event) { 
    event.waitUntil(
    caches.open('v1').then(function(cache) { 
     return cache.addAll([ 
     '/', 
     '/favicon.ico', 
     '/f3be2e30f119a1a9b0fdee9fc1f477a9', 
     '/index.html', 
     '/sw.js' 
     ]); 
    }) 
); 
}); 

this.addEventListener('fetch', function(event) { 
    var response; 
    event.respondWith(caches.match(event.request).catch(function() { 
     return fetch(event.request); 
    })).then(function(r) { 
     response = r; 
     caches.open('v1').then(function(cache) { 
      cache.put(event.request, response); 
     }); 
     return response.clone(); 
    }).catch(function(event) { 
     console.log(event, 'borken'); 
     return caches.match(event.request); 
    }); 
}); 

错误日志如下所示：

Answer 1

你呼吁呼吁event.respondWith，这是不确定的结果then。

您应链中的电话后，您then调用catch：

var response; 
event.respondWith(
    caches.match(event.request) 
    .catch(function() { 
    return fetch(event.request); 
    }) 
    .then(function(r) { 
    response = r; 

不：

var response; 
event.respondWith(
    caches.match(event.request) 
    .catch(function() { 
    return fetch(event.request); 
    }) 
) 
.then(function(r) { 
    response = r;