Retaining functionality in UI when application goes offline

I’ve got an application that needs to be able to function (as fully as possible) in the absence of wifi. Non-networked components should work, while all networked components should simply be unresponsive (but not impede functionality of other components).

Specifically, I want a map component to fail gracefully, but currently it prevents the entire application from loading.

So far, we’ve tried nesting the network calls from UIBootloader.js (e.g. loadGoogle( )) in try-catch blocks to no avail (try the network call, if it fails, do nothing). I also tried adding some basic checks for connection (window.navigator.onLine), but it seems that there’s a setup call for google analytics made elsewhere.

I’m not actually sure what behavior should be controlled–I’ve just been trying to stop things from trying to load if there’s no wifi, as opposed to defining separate behavior for that case.

Any idea how to approach this situation? (in any case, an explanation of the “behind the scenes” UI loading process would also help)

Solution ended up being much simpler than expected: checks for network connectivity (via window.navigator.onLine) were placed before networked calls were made.

Only tricky part was figuring out where in the setup process to place them to ensure that the right amount of setup was still permitted for things like CSS (was mostly trial and error).
NOTE: I should mention window.navigator.onLine isn’t really foolproof (https://stackoverflow.com/questions/2384167/check-if-internet-connection-exists-with-javascript)

1 Like