Offline page shown when trying to access localhost without a network connection

[Artur-]

Description of the bug

When you start an application and do not have a network connection. e.g. wifi is turned off, the application shows the "you are offline" page instead of the application

Expected behavior

The application should be shown

Minimal reproducible example

npx @vaadin/cli init off
cd off
mvn
# Verify it works
# ctrl-c
# disconnect from the network
mvn

Versions

Vaadin: 23.1.0.alpha3 Flow: 23.1.0.alpha3 Java: Homebrew 17.0.1 OS: aarch64 Mac OS X 12.3.1 Browser: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36 Live reload: Java active (Spring Boot Devtools): Front end active

[nikbucher]

I noticed this error too some time ago. Is there a workaround available for this? Because I'd like to work offline but this bug prevents it.

Thanks in advance for fixing it soon.

[circlesmiler]

I have the same issue on MacOS with Vaadin 23.1.1.

Just wanted to add, that this is pretty anoying, when you are in a spot, where internet is not available (even no mobile connection). (Often in trains or in small villages in Germany :-))

[circlesmiler]

This is also a big problem, when you are running (headless) E2E tests on VMs with no internet connections. So, it would be nice, if I could activate/deactivate the detection for special situations.

[mshabarov]

The issue was assigned to a developer and is currently being investigated.

[silvan-lincan]

Same issue here with Vaadin 23.2.x And is not only on Mac, on Windows also.

[silvan-lincan]

The problem is, if this is deployed as a desktop application, with Electron and Jetty, the application will not work at all. A solution / temporary workaround would be really appreciated.

[Artur-]

The problem is https://github.com/vaadin/flow-hilla-common/blob/04f7eea1a5f243078a1596d767d465716d862b95/frontend/packages/common-frontend/src/ConnectionState.ts#L129 and that navigator.online is false for a mac when the network is disconnected, even if it can connect to the current url. If you change that code to e.g.

    const online = navigator.onLine || location.hostname === 'localhost';
    $wnd.Vaadin.connectionState = new ConnectionStateStore(online ? ConnectionState.CONNECTED : ConnectionState.CONNECTION_LOST);

then it works

[Legioth]

I'm not sure about that workaround since one might still want a way to explicitly test the offline state of an application even when it's running on localhost. I assume the workaround would also affect cases when offline mode is explicitly toggled in the browser's developer tools?

[Artur-]

At least when you do not have @PWA so no offline page, it should skip the whole logic

[silvan-lincan]

Thank you very much @Artur- and @Legioth

For me, for the moment, I am really interested in any workaround. This is because, as I mentioned in my previous comment, we deploy some of our software as Desktop applications under Electron with embedded Jetty running on 127.0.0.1. If, for reasons of "Data Protection" etc., our clients are running this software with the network off, then the application will not run at all. Therefore, I am really interested in that patch. I will have to see how can I test this.

[Artur-]

You can work around this by adding

(window.Vaadin as any).connectionState.connectionState='connected';

to e.g. the end of index.ts

[silvan-lincan]

@Artur-
nice, I was wondering where can I "force" that state for my scenario. Thank you very much. I will try.

[silvan-lincan]

Unfortunately is not working. I get the following error: Property 'Vaadin' does not exist on type 'Window & typeof globalThis'

[Artur-]

Is that 23.3 + Vite or something else?

[silvan-lincan]

It is 23.2.x + Vite

[silvan-lincan]

Is it possible to set that state in another place, or do I really need to upgrade to 23.3.?

[Artur-]

For me it works also in Vaadin 23.2.11 the same way. One potential workaround to the workaround would be to add

import '@vaadin/common-frontend/ConnectionIndicator.js'

to the beginning of index.ts. Then it should ensure the indicator is imported before index.ts is executed.

Otherwise there are the common workarounds of delaying using requestAnimationFrame e.g.

requestAnimationFrame(
  () => ((window as any).Vaadin.connectionState.connectionState = "connected")
);

or then setTimeout...

[silvan-lincan]

Thank you very much, I will clean everything and try again.

[silvan-lincan]

I have 23.2.8

[silvan-lincan]

No matter what I do, upgrading to 23.2.11, clean, etc., I always have the same error. I will keep trying, maybe is something on my side that I don't see it now.

[Artur-]

ah but you are talking about a typescript error Property 'Vaadin' does not exist on type 'Window & typeof globalThis'

use (window as any).Vaadin instead of (window.Vaadin as any)

[silvan-lincan]

Yeeey, sorry about that. Works like a charm now. Thank you very much.

[silvan-lincan]

:) I can sleep better now, that I have something I can use. Now it is only a matter of time, depending when we will deploy this, if you manage to come with an official solution in the meantime. Thank you again.

[TatuLund]

My 5 cents is that we should not change current behavior, but introduce API to configure it work differently when needed.

[Legioth]

One thought was to always assume being online for localhost if @PWA is not used, while looking at the navigator.onLine flag if @PWA is present.

[silvan-lincan]

If I understood correctly the original intended behaviour, I like better this solution.

[Artur-]

My 5 cents is that we should not change current behavior, but introduce API to configure it work differently when needed.

What would be the case when you want to see an offline page on one platform and not on others even though the server can be reached? I don’t think there is anything to configure here - it is a bug in the connection indicator and should be fixed there. It uses a flag for something else than whatthe flag tells (is the server reachable vs is internet reachable)

Ignoring the offline page when you do not have @PWA sounds good for that case but the PWA case would still be broken and would need another fix

[MarcinVaadin]

@Legioth @Artur- @TatuLund - do we have any conclusions?

Is I understand from above:

introduce API to configure it work differently when needed

Implementing configuration property to disable offlinePage is pretty easy, but:

I don’t think there is anything to configure here - it is a bug in the connection indicator and should be fixed there

How would connection indicator distinguish if we want to run app locally without internet connection? Server pinging?

And what if:

since one might still want a way to explicitly test the offline state of an application even when it's running on localhost. I assume the workaround would also affect cases when offline mode is explicitly toggled in the browser's developer tools?

[Artur-]

There are no thought-out, ready solutions. If we have a service worker, can we e.g. know from that one if it reached the server for index.html or not? If we used the cache, how would we know when we are online again?

[jflamy]

I just got bit by this. We use Vaadin as an Electron-killer connecting to localhost. An explicit flag of whatever form to say PWA not wanted here, we're back to 2015, it's all good. What is really counter intuitive is that things work if connected to a router that is not connected to the internet -- whatever black magic is used seems to be relying on an ip address being available other than local...