Blog

Vaadin 19 adds offline functionality to Fusion: here's how it works

By  
Viktor Lukashov
Viktor Lukashov
·
On Mar 11, 2021 1:21:09 PM
·

Vaadin-19-offline-1


The words “offline” and “web application” have been mutually exclusive for a long time, but this has now changed: most browsers have added a set of APIs to enable offline use cases. With Vaadin 19, we improved our offline support to enable you to build complete offline work flows. You can create apps that start offline and let users see cached data when they open the app and navigate between views.

Offline start

The app starts offline with cached data, both when opened in a browser and when installed on the user’s device. When the app is opened for the first time, Vaadin uses a service worker to cache the application shell and the JavaScript bundles that render the UI for client-side routes. After that, when the user reopens the app, even in offline conditions, the app starts normally, rendering the UI from the cached resources.

Vaadin 18 vs 19

Offline navigation

Once the application shell and route JavaScript bundles are cached, users can navigate between views in the app offline as well as online. Offline navigation is available only for the views that are implemented in TypeScript, because they are rendered in the browser and do not require a constant network connection. Offline navigation to the views implemented in Java is not supported. The offline behavior for these views has not changed (compared to the earlier versions of Vaadin) when offline, they are replaced by a “You are offline, please get connected” placeholder.

Offline navigation in V19

Online / Offline status indication

Not all of the application functionality works equally well offline. For example, the app may disable the possibilities to modify the existing data while the application is offline to avoid possible merge conflicts. Another example is server-side views: these are not available offline at all. In these cases, it becomes important to give users a clear visual indication that the application is offline and its functionality is limited. Starting from Vaadin 19, the default connection state indicator is updated so that there is a persistent “connection lost” indication when the backend is not available.

offline vs online status indication

Try it out

Interested in learning more about Vaadin and trying the offline functionality yourself? Create a new project with TypeScript views at https://start.vaadin.com/?preset=fusion and see how it works offline.

For some guidelines on how to set it up, check out this Vaadin Tips video on our YouTube channel: Easy PWA offline support with Vaadin Fusion 19.

Viktor Lukashov
Viktor Lukashov
Viktor is a Product Owner at Vaadin. He focuses on client-side development features of Vaadin such as TypeScript views and client-side routing. In his daily work he can be working on tech demos, talking to customers, giving presentations, or helping the engineering teams to pick the right epic to work on. You can reach out to him on Twitter @viktrl.
Other posts by Viktor Lukashov