Vedendo se la richiesta ha successo all'interno di un operaio di servizio

Question

Ho il seguente codice nel mio operaio di servizio:

self.addEventListener('fetch', function (event) { 
    var fetchPromise = fetch(event.request); 

    fetchPromise.then(function() { 
    // do something here 
    }); 

    event.respondWith(fetchPromise); 
}); 

Tuttavia, che sta facendo un po 'di cose strane nella console dev e sembra fare il carico di script in modo asincrono invece di sincrono (che in questo contesto è cattivo).

C'è un modo per ascoltare quando una richiesta viene completata senza chiamare fetch(event.request) manualmente?

Ad esempio:

// This doesn't work 
self.addEventListener('fetch', function (event) { 
    event.request.then(function() { 
    // do something here 
    }); 
}); 

Answer 1

Se si vuole garantire che l'intera serie di azioni vengono eseguite prima che la risposta viene restituita alla pagina, si dovrebbe rispondere con l'intera catena promessa, non solo la promessa iniziale restituito da fetch.

self.addEventListener('fetch', function(event) { 
    event.respondWith(fetch(event.request).then(function(response) { 
    // The fetch() is complete and response is available now. 
    // response.ok will be true if the HTTP response code is 2xx 
    // Make sure you return response at the end! 
    return response; 
    }).catch(function(error) { 
    // This will be triggered if the initial fetch() fails, 
    // e.g. due to network connectivity. Or if you throw an exception 
    // elsewhere in your promise chain. 
    return error; 
    })); 
});