Labs | Vaadin

Offline applications with Vaadin 15

Written by Artur Signell | December 16, 2019

Vaadin 15 handles bootstrapping and routing on the client side. This enables something which was not easy with Vaadin 14: creating offline apps.

To demonstrate this, we created a small mortgage calculator.

The server provides the available rates to the UI and also handles the applications, i.e. when the user presses the "Apply" button.

The UI is created using LitElement with routing and bootstrapping on the client side. This combined with a service worker and web manifest allows the application to start when offline. Additionally, a really simple cache is used for the available rates so the application is fully functional when offline, except for the 'Apply' button.

Potentially Interesting parts of the code:

Live demo available at https://labs.vaadin.com/mortgage-calculator/

Source code available at https://github.com/Artur-/mortgage-calculator/

Try it out

To try out Vaadin 15, go to https://start.vaadin.com and select 'Typescript' for at least one view.

You can also use the CLI to get an empty project

npx @vaadin/cli init  --pre hello-vaadin15