Add networkTimeoutSeconds to NetworkOnly strategy

At present, it is possible to set timeout only for NetworkFirst strategy:

workbox.strategies.networkFirst({networkTimeoutSeconds: 10});

When NetworkOnly strategy is used to retrieve non-cacheable data, it keeps waiting indefinitely in case of a network issue.

Suggested implementation: https://github.com/github/fetch/issues/175#issuecomment-216791333

[jeffposnick]

keep some progress indicator spinning forever 😃

Just to be clear, though, there really should be a reasonable timeout imposed by the user agent by default. If the current per-browser defaults aren’t reasonable, that’s good feedback to pass along to browsers that wait too long.

I’m happy to have folks turn to Workbox to give them more control when they want to override those defaults for specific types of requests, but obviously not everyone is going to use Workbox, and a service worker will likely not be in control during the user’s first visit to a site.

[PetrToman]

@jeffposnick Yes. Imho it’s better to let the user know something went wrong in a reasonable time than just keep some progress indicator spinning forever 😃 Example:

function timeoutPromise(seconds, promise) {
    return new Promise(function (resolve, reject) {
        var timeoutId = setTimeout(function() {
            reject(new Error('timeout'))
        }, seconds * 1000);

        promise.then(
            function(res) {
                clearTimeout(timeoutId);
                resolve(res);
            },
            function(err) {
                clearTimeout(timeoutId);
                reject(err);
            }
        );
    })
}

// Service worker setup
self.addEventListener('fetch', function(e) {
    // don't use Workbox for POST/AJAX requests
    if (e.request.method === 'POST' || /\/someAjaxPath\//.test(e.request.url)) {
        e.respondWith(timeoutPromise(30, fetch(e.request)));
    }
});

// in Ajax handler: a common bit of guesswork to identify timeout
// (I haven't found a way to pass timeout info to the error handler)
error: function(xhr, status) {
    if (xhr.readyState === 4 && xhr.status < 200) alert('Network timeout');
}