It’s kind of disappointing that Vaadin requires Typescript for the PWA to have offline functionality. I was checking out Vaadin because I’ve never used Typescript and it would be nice to keep it all in Java.
My use case is a time tracker for labor management. Employees need to be able to clock out, even if their device is offline temporarily. I was hoping that this would also be possible from Vaadin Flow.
Java runs on the server. TypeScript (or actually JavaScript) runs in the browser. When you’re offline, the browser cannot contact the server which means that only functionality built with TypeScript can be available.
There are solutions out there that allow running Java code in the browser but they lead to various compromises which often means you have to “think in TS” anyways. That’s why we optimize for just going straight to TypeScript and make that as smooth as possible with the Hilla framework.
Thanks Leif! I guess my assumption is that Vaadin is building HTML and JS on the server and then sending it to the front end, so why can’t Vaadin also handle caching whatever is necessary for offline data? What the front end view must exist whether it comes from Flow or Hilla, so why are static Typescript files necessary?
You can see I’m very green in this area. I have only built things with Spring and Thymeleaf and HTMX. It seems like if I had to create an offline view, there would be a way to do that programmatically, building it on the server side.
Is there a recommended workaround for minimal Typescript? Can I do everything in Vaadin Flow and then for any views that might need offline functionality I can ask ChatGPT to just write a Typescript file that replicates my Vaadin Flow view?
Vaadin Flow does not work like this.
Take a look at this YouTube video by Leif: https://youtu.be/N2i6X2CrPCY?si=Kr2kEtPl3KugE3z8
TL;DR: Vaadin does not create html on the server but uses UIDL to communicate with the client
Thank you! That helps. I’ll go ahead and close this issue for now.
Well, I’m still hoping to find some creative solution to my problem. It seems like a waste to build the entire front end for my application in Typescript (not to mention learning Typescript), just to solve this one use case of letting people clock out when they are offline.
To slightly elaborate, the fundamental challenge comes from how logic in the browser needs to know how to handle all potential events from the user without contacting the server.
There are some basic use cases such as entering new records with only simple validation rules and no other dynamic functionality (e.g. no cases where some fields are disabled/hidden based on the value of some other field) that could in theory be automatically generated based on what’s defined in Java. In practice, such cases seem to be so uncommon that we haven’t invested in building that kind of functionality.
Is there a recommended workaround for minimal Typescript? Can I do everything in Vaadin Flow and then for any views that might need offline functionality I can ask ChatGPT to just write a Typescript file that replicates my Vaadin Flow view?
Starting from Vaadin 24.4, you can relatively easily use Hilla to create that single offline-capable view using TypeScript while all other views of the application are built using Flow. There’s certainly still some learning needed for building that single view but there’s at least a way of cleanly integrating it with the rest of the application.
Where is the right place to make a feature request? It would be an amazing feature if Vaadin would generate an offline view automatically. Or more specifically in my case, just cache the offline post request and send it once back online.
Vaadin will connect automatically if you are back online
Vaadin is a bit more granular than this. With a typical form, the value of each field is separately sent to the server as the user edits the form to e.g. offer immediate validation based on server-side logic. Submitting the form is just a click event on the submit button whereas the data of the form is already present in the server-side state at that point.
Demo done!
It was insanely easy. The next time someone asks this question, you can just say yes. All I did was add the @PWA annotation and the service-worker that Vaadin generated was already setup to cache and resend request while offline. No Hilla. No worker modifications.
That’s the default behavior but I wouldn’t call that offline functionality.
Offline functionality would be the user can use the app functionality offline
I’m also looking for a way to implement an offline mode in which the user can navigate the app, work with cached data and sync on reconnect.
Is it correct that this is only possible with Hilla and not Flow?
If I understand correctly the code @Nathan.30 posted only stashes requests until reconnect.
If you want the whole application to be navigable then Hilla is the way to go. Flow/Hilla hybrid would let you to implement few offline capable views, but the Flow based views would not be navigable. You could also implement one whole view as web comonent using Lit or so, which could be offline capable. But in that scenario you would need to disable the navigation when offline.