新错误（） - 未捕获（承诺）错误：未找到

Question

错误是Uncaught (in promise) Error: Not Found. 这似乎是由于窗口在自我内部不可用。自我既是服务人员又是窗口。

下面的代码是在index.html中，一切工作正常。当网络请求返回404时，它将评估throwOnError并显示此错误。

var throwOnError = (response) => { 
    if (response.status >= 200 && response.status < 300 || response.status === 0) { 
     return response; 
    } 
    throw new Error(response.statusText); 
}; 

function cacheableRequestFailingToCacheStrategy({ event, cache }) { 
    return fetch(event.request) 
    .then(throwOnError) // do not cache errors 
    .then(response => { 
     cache.put(event.request, response.clone()); 
     return response; 
    }) 
    .catch(() => cache.match(event.request)); 
} 

function isRequestForStatic(request) { 
    return /.(png|jpg|jpeg|gif|css|js)$/.test(request.url); 
} 

function isSideEffectRequest(request) { 
    console.log(request.method); 
    return ["POST", "PUT", "DELETE"].includes(request.method); 
} 

function cacheFailingToCacheableRequestStrategy({ event, cache }) { 
    return cache.match(event.request) 
    .then(throwOnError) 
    .catch(() => fetch(event.request) 
     .then(throwOnError) 
     .then(response => { 
      cache.put(event.request, response.clone()); 
      return response; 
     }) 
    ); 
} 

function requestFailingWithNotFoundStrategy({ event }) { 
    return fetch(event.request) 
    .catch(() => { 
     const body = JSON.stringify({ error: "Sorry, you are offline. Please, try later." }); 
     const headers = { "Content-Type": "application/json" }; 
     const response = new Response(body, { status: 404, statusText: "Not Found", headers }); 
     return response; 
    }); 
} 

self.addEventListener("fetch", event => { 
    console.log(event.request); 
    if (isSideEffectRequest(event.request)) { 
    console.log("post", event.request.method); 
    event.respondWith(requestFailingWithNotFoundStrategy({ event })); 
    return; 
    } 

    if (isRequestForStatic(event.request)) { 
    event.respondWith(
     caches.open(CACHE_NAME) 
     .then(cache => cacheFailingToCacheableRequestStrategy({ event, cache })) 
    ); 
    return; 
    } 

    event.respondWith(
    caches.open(CACHE_NAME) 
     .then(cache => cacheableRequestFailingToCacheStrategy({ event, cache })) 
); 
}); 

Answer 1

由于缺乏对预期行为的真实清晰度，我必须假设提问者希望在不抛出异常的情况下处理404错误。

一种选择是这样的（披露：它是由我写的），有缓存而已，网络首先，缓存第一个也是唯一网络战略的一个交钥匙服务的工作人员，对404不抛出错误：https://github.com/mohawk2/sw-turnkey