Serviceworker Bug event.respondWith

问题

My serviceworker has the logic that when a fetch event happens,first it fetches an endpoint which contains some boolean value (not the event.request.url) and check the value , based on the value i am calling event.respondWith() for the current fetch event, where i am serving the response from cache.But i am getting the following error ,

Uncaught (in promise) DOMException: Failed to execute 'respondWith' on 'FetchEvent': The fetch event has already been responded to

I checked here that this error is throws when m_state is not equal to Initial

if (m_state != Initial) {
    exceptionState.throwDOMException(InvalidStateError, "The fetch event has already been responded to.");
    return;
}

I am doubting that since i am having an additional fetch event somehow it is consuming the previous fetch event,it is changing the m_state variable,though i am not fetching the event url.I am not sure what could be the reason and what is the solution for it.But why is it saying

I am pasting my code snippet below.

function fetchEvt(event) {        
    check().then(function (status) {
        if (status === 0) {
            handleRequest(event);
        }
    });
}

function checkHash() {
    return new Promise(function (resolve) {
        fetch(endpoint, { credentials: 'include' }).then(function (response) {
            return response.text();
        }).then(function (text) {
            resolve(text);
        });
    }
}

function handleRequest(event) {
    event.respondWith(caches.match(event.request.url).then(function (Response) {
        if (Response) {
            return Response;
        }
        return fetch(event.reuqest);
    }));
}

The event.respondWith part is throwing the error.Please suggest how to solve this problem.

edit :

function handleRequest(event) {
    event.respondWith(checkHash().then(function (status) {
        if (status === true) {
            caches.match(event.request.url).then(function (Response) {
                if (Response) {
                    return Response;
                }
                return fetch(event.reuqest);
            });
        } else if (status === false) return fetch(event.reuqest);
}));

回答1:

You need to call event.respondWith synchronously when handling fetch event. If you don't, browser assumes it should proceed with handling the request. That's why when you get around to calling respondWith in your code the request is already handled and you see the fetch event has already been responded to exception.

In other words: try calling your checkHash inside of handleRequest and not the other way around.

回答2:

Re "since i am having an additional fetch event somehow it is consuming the previous fetch event" this shouldn't be a problem; you can fetch() from within the fetch event handler and things will work out fine:

self.addEventListener("fetch", e => {
  e.respondWith(
    fetch("https://fonts.googleapis.com/css?family=Open+Sans")
    .then(_ => fetch(e.request))
  );
});

I don't quite understand what you're trying to achieve with your code but fetching multiple times, with the first influencing the behavior of the second, works fine.

来源：https://stackoverflow.com/questions/36062941/serviceworker-bug-event-respondwith

标签

javascript

service-worker

progressive-web-apps