new Erreur() - Uncaught (promis) Erreur: Non trouvé

Question

L'erreur est Uncaught (in promise) Error: Not Found. Cela semble être dû au fait que la fenêtre n'est pas disponible en interne. Self est un service worker ou une fenêtre.

Le code ci-dessous est dans index.html et tout fonctionne correctement. Lorsqu'une requête réseau renvoie 404, elle évalue throwOnError et cette erreur apparaît.

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

En l'absence de clarté réelle sur le comportement attendu, je dois assumer le questionneur veut gérer 404 erreurs sans jeter des exceptions.

Une option est cette (divulgation: il est écrit par moi), un travailleur de service clé en main qui a cache uniquement, réseau en premier lieu, cache-première et les stratégies de réseau uniquement, et ne jette pas des erreurs sur 404: https://github.com/mohawk2/sw-turnkey