Vaadin Flow with no internet connection issue [SOLVED]

I have a question related how Vaadin Flow works. Is it possible to create a Vaadin Application based on 100% Vaadin Flow that works without internet connection (offline)? When I say "works’ I mean that the whole application and features implemented can be accessed offline. How to configure a Flow App to work offline? I found some questions on this channel about working without internet connection but I didn’t understand how to. I’m asking for a good explanation of this topic. Thank you guys. Best regards to all!

No. Flow apps run on the server, the browser only renders the current UI state. You cannot run them offline (unless each user runs their own local server)

If you need offline-capable apps, you’ll need to run them on the browser. Hilla can do that.

There are different kinds of “offline” to think about here.

  1. intranet applications without access to capital-I Internet. This is fine with Flow
  2. applications run on computers that don’t have any kind of network access ever. This only works with Flow (or Hilla) if you run a server on your local machine.
  3. applications that work reasonably well even if the network connection is bad and disconnects entirely at times. This is where you’ll want Hilla
  4. application development in secure environments that don’t have internet access. This should work, but if you’re using licensed components, you might need some additional steps

Thank you for your answers @secure-leopard and @vital-koala . I better explain the situation I’m talking about: the application runs in an private network (intranet) where internet connection is not always available and the application does not need it at all. The application accesses resources that are reachable without an internet connection, moreover it connects to a database server running in the same network.
What I want is that the entire application runs and works without internet connection, accessible by browser (from localhost or remote), it’s not important.
Do I have some way to implement something like this? What about local server? I have the capabilities to run a server or other services if mandatory/useful

This sounds like case #1 in Olli’s list above. In that case, Flow works just fine

Yes case #1 fit my use-case. Where can i find an documentation/tutorial of the setup to work with Vaadin Flow that way?
Can you please give me some information about the setup you suggested for my use case?

There is no special setup needed.

That’s literally the default setup. A Vaadin application does not call any external things like e.g. fonts from the internet.

So guys I think I’m missing something. I tried to configure a Vaadin Flow application working with Spring Initializr and then I created just a simple view with a VerticalLayout showing a Span with the text “hello”. When I run the application without an internet connection (I turned it off for test) it shows me “Connection lost. Trying to reconnect”. I didn’t use the @PWA annotation, just @Route and @PageTitle on the Main page I created for this test. Can you please help me understanding?

There is a difference between killing the network vs removal of internet access. If you just disable internet connection it works, if you also disable the whole networking it comes down to Olli’s 4. point - which is not the case you have described, where flow runs on a dedicated server inside your company and people access this server with local network without internet (case 1)

I tried disabling the networking first (turn off wired connection, on Ubuntu in my case) and the app shows “Connection lost”. Then I tried to change my IP address manually (instead of turning the networking off) and re-run the application, but it shows “connection lost”. I’m connecting to the app via Firefox typing localhost:8080
Am I missing something else?

Offline page shown on mac os when trying to access localhost without a network connection · Issue #13616 · vaadin/flow · GitHub there’s an open issue that might be related, check the comments for workarounds

So the above issue is about having the connection turned off entirely, not about not having Internet connection

“disabling network”
Disabled network = flow shows offline banner.

I’m literally developing on a machine without internet connection, but available local network and I can reassure you it works.

Thank you @quirky-zebra. I tried the workaround suggested by @vital-koala and it finally works! Now I will try with my main project too
Is this issue a bug or just a behavior of Vaadin default configuration (auto-generated at startup)? I saw that the ticket is currently opened and a new feature is been pulled by a contributor, nice!
Hoping to be helpful for someone else, I want to explain the simple steps I follow to let my app to work well without internet connection (thank you again guys for the suggestions):

  1. run with mwn the application with internet connection ACTIVE and test it → it works
  2. turn off the internet connection (I changed my IP manually in order to loose internet connection without disabling networking) → application shows “Connection lost”
  3. shutdown the application (ctrl+c if you are working with terminal)
  4. changed the location of the file ./frontend/generated/index.ts to ./frontend/index.ts
  5. Modified the file index.ts (now in ./frontend directory) as follow:
    5.a. paste import '@vaadin/common-frontend/ConnectionIndicator.js' at the beginning of the file
    5.b. paste (window as any).Vaadin.connectionState.connectionState='connected'; at the end of the file
    5.c. changed the relative path ../../target/frontend/generated-flow-imports.js (look for it inside index.ts file) to ../target/frontend/generated-flow-imports.js
  6. run the application again → now the application works without internet connection

Vaadin Flow and internet connection issue [SOLVED]

Vaadin Flow with no internet connection issue [SOLVED]