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.
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.
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.
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.