Can I serve an Offline page? about sw-toolbox

[jeffposnick]

Untested, but the following should give you about what you're looking for:

toolbox.router.get('/(.*)', function(request, values, options) {
  // networkFirst will attempt to return a response from the network,
  // then attempt to return a response from the cache.
  return toolbox.networkFirst(request, values, options).catch(function(error) {
    // If both the network and the cache fail, then `.catch()` will be triggered,
    // and we get a chance to respond with our cached fallback page.
    // This would ideally check event.request.mode === 'navigate', but that isn't supported in
    // Chrome as of M48. See https://fetch.spec.whatwg.org/#concept-request-mode
    if (request.method === 'GET' && request.headers.get('accept').includes('text/html')) {
      return toolbox.cacheOnly(new Request('/Offline'), values, options);
    }
    throw error;
  });
});

(Adapted from the vanilla service worker version that doesn't use sw-toolbox.)

[AaronLayton]

Hi @jeffposnick thanks for the quick response the other day. I have implemented the above but it doesn't seem to be getting to the catch callback

I am getting this error for an uncached page

The FetchEvent for "https://<my-url>" resulted in a network error response: an object that was not a Response was passed to respondWith().

[AaronLayton]

@jeffposnick could really do with some help on this as still new sw - could the issue be reopened until fixed?

Could this be an issue with toolbox.networkFirst returning something even though we have a catch event? Do we need to clone the original request first maybe

[jeffposnick]

Sorry, networkFirst wasn't rejecting when it should have, meaning that the .catch() wasn't triggering.

#84 should fix it.

@jeffposnick Your code above works great, thank you very much. May I ask you one question how can I add this to your code please:

networkTimeoutSeconds: 3