Skip to content

A demo project that showcases offline functionality in a Vaadin + Spring Boot web application. This project focuses on caching POST requests and resending them when connectivity is restored, using Vaadin's server-side UI framework. Ideal for labor management apps or any use case where devices may go offline temporarily.

License

Notifications You must be signed in to change notification settings

LiveNathan/clocker-vaadin

Repository files navigation

Offline Functionality Demo with Vaadin + Spring Boot

This demo project showcases the implementation of offline functionality in a Vaadin + Spring Boot web application. The main focus is on caching POST requests and resending them when the application regains connectivity. The project uses a combination of Java, Spring Boot, Vaadin, and other tools to deliver a seamless offline experience. See the previous version made without Vaadin.

The use case is a labor management app that needs to handle requests when an employee's device is temporarily offline.

Features

  • Service Worker Integration: Caches POST requests made while offline and resends them automatically when back online.
  • Vaadin: Provides a modern, server-side UI framework with built-in PWA features.

Technologies Used

  • Java
  • Spring Boot
  • Vaadin
  • Service Worker API

Running the Application

  1. Clone the repository:

  2. Build and run the project:

    ./mvnw spring-boot:run
  3. Open the application:

  • Open your browser and navigate to http://localhost:8080.
  • Open Chrome Developer Tools (F12 or right-click and select "Inspect").
  1. Check Service Worker Installation:
  • In the Developer Tools, go to the "Application" tab.
  • Under the "Service Workers" section, you should see that the service worker is installed.

Observing the Offline Functionality

  1. Going Offline:
  • It's important to note that simply checking the "Offline" box in Chrome DevTools is not sufficient for testing service worker requests. You need to physically disconnect your internet connection (e.g., turn off Wi-Fi or disconnect the network cable).
  1. Interacting with the App:
  • While offline, click the "Clock In/Out" button.
  • The page will not visibly change, but check the console logs in DevTools. You should see a message indicating that the request has been "stashed" for later.
  1. Returning Online:
  • Reconnect your internet connection.
  • The previously stashed POST request will be automatically resent, and the page will refresh to reflect the new state.

Additional Details

  • Console Logs: The application logs actions such as the stashing of requests and the resending process to the console, allowing you to track the behavior of the service worker.
  • Known Issue: There might be a slight delay in refreshing the page after going back online, depending on the network conditions and how quickly the request is processed.

Deploying to Production

To create a production build, use the following command:

./mvnw clean package -Pproduction

This will build a JAR file with all the dependencies and front-end resources, ready to be deployed. You can run the production build using:

java -jar target/clocker-vaadin-1.0-SNAPSHOT.jar

Contributing

If you have suggestions or improvements, feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License.

About

A demo project that showcases offline functionality in a Vaadin + Spring Boot web application. This project focuses on caching POST requests and resending them when connectivity is restored, using Vaadin's server-side UI framework. Ideal for labor management apps or any use case where devices may go offline temporarily.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published