network timeout with networkFirst

[jamani18]

Good Morning,
I have implemented the API to get my App to work offline, until here everything is correct.
Now I would like to have a maximum load time on the web page, where the client will request a resource via internet, and if this is not received in a maximum of 4 seconds, it will return it via cache.

I have looked at all the tutorials but there is only reference to networkTimeoutSeconds which does not do what I need.

Is there any way to get what I need?

Thank you.

[jadjoubran]

Hey @jamani18
networkTimeoutSeconds is what you're looking for. Can you show how you're using it?

Here's an example of how you should use it:

//API cache
workbox.routing.registerRoute(
  /.*firebaseio\.com.*\.json$/,
  workbox.strategies.networkFirst({
    cacheName: "api-cache",
    networkTimeoutSeconds: 4,
  })
)

[jamani18]

Hi @jadjoubran
I leave the code that I currently have in my service worker:

strategy = workbox.strategies.networkFirst({
    cacheName: 'mycache',
    networkTimeoutSeconds: 1,
    plugins: [
        new workbox.expiration.Plugin({
          maxEntries: 50
        })
    ]
});
workbox.routing.registerRoute(
  /example/,
  strategy
);

As you can see, I have the networkTimeoutSeconds parameter set to 1 second only, but even so, if the response takes more than that time, it is still waiting to pick it up from the network.

I leave you a capture of a request simulating a slow type 3g connection with Chrome. You'll see in the capture that the response time is 9 seconds still.

Is it a conceptual failure of mine or will it be a bug?

Thanks for your time.

[jadjoubran]

It could be that your regular expression is not matching.
Are you matching a resource on the same URL? or on a different domain?
If it's a different domain, then you need to include the full URL

If it's the same domain, then please show me your regexp and which url you're trying to match

[jamani18]

The resource I rescue is in the same domain.

The regular expression that I used is "/example/" and the resource I request is in the relative address "/example/example.php".

The service worker if it detects the element and stores it in cache, rescuing it in case the web is offline. However, if the resource exceeds the response time limit set in networkTimeoutSeconds, it does not rescue it but continues to wait for the response via the network until the response is completed.

[jadjoubran]

okay, something else to consider: which version of Workbox are you running?

[jamani18]

I'm using version 3.2.0

Edit: I just tried version 3.6.1 and the same thing keeps happening

[jadjoubran]

okay I'm not sure then sorry :/

[jamani18]

Thank you anyway. I hope someone knows how to fix it.

[jadjoubran]

Hey @jamani18
I just setup a simple demo to prove that networkTimeoutSeconds is working as expected. Please check it out here jadjoubran/workbox-1738

Feel free to use the networkFirst code as a starting point.

I also think that this is probably working for you, but you cannot clearly see it in the network tab, you can see it in the console tab with the detailed workbox logs (that are enabled automatically on development/localhost).

From the screenshot you can see how workbox is timing out on the network after 1 second

[jamani18]

Hi @jadjoubran

Thank you very much for your response, I managed to find the problem thanks to the code you offered me.

The networkTimeoutSeconds works just as you told me.

Analyzing my code I found the two reasons that made it not work for me:

1. I had an Ajax request that did not work asynchronously, so when simulating a slow connection the request was constantly waiting, blocking the loading of the page.

2. My service worker has an instruction to remove all existing caches once it is installed. The problem is that in my browser had the option 'Update on reload' activated, then every time I updated the page, the cache was removed, causing it to search the content from the web, skipping the networkTimeoutSeconds parameter.

Thanks to your example I have managed to discover these problems.

When I use new frameworks and I see that the code does not work as expected, one tends to think that it is a problem of the framework without observing that the problem is really not the framework, but rather small errors that my code had.

[jadjoubran]

Sure thing, I'm glad to hear that it's working now 🎉
Feel free to close the issue if there are no further questions
Cheers!

[jeffposnick]

A huge thanks to @jadjoubran for helping debug this! It's appreciated, Jad!

[jadjoubran]

Sure thing @jeffposnick! Feel free to mention me for issues that require additional investigation
And I guess I'll meet you at Chrome Dev Summit next week 😄

[jeffposnick]

(Looking forward to that, @jadjoubran! I'll be at the Perf/PWA Review Clinic area on both days.)