Caching by using PWA / Service workers

Hi there I am wondering if someone used in a Hilla PWA / service workers to use it as caching and can provide an example. I tried to use the “vite-plugin-pwa” but it seems not to work properly and I gave up to modify the vite configuration. Does somebody have an example “hilla” App with PWA where *.js and API calls get cached by service workers also when the application is not offline? Thank you

Ok, I got it working but instead of using the full “vite-plugin-pwa” capability I am only using the included ‘workbox-build’ plugin in the vite config. Additionally I had then to ensure that the generated “service-worker.js” can be served by the tomcat and not by the VAADIN servlet because “service-worker.js” need to be registered with a specific “scope” (Base URL scope) for which it works and this will conflict when you would put int the “VAADIN/webapp/VAADIN/build/” folder . So you need to specify the “exclude URLs” in your “application.properties” for Vaadin and add the “service-worker.js” into a resource folder . In case somebody is interested, I can post here more details and an example.

Hi @zingy-sheep! We are still in the planning phase and still deciding the technology we want to use, but implementing caching is something we are going to do. I’d be very curious to see an example of this with Hilla. Thanks!

Hi Eikka, You have several options when it comes to caching at Server and Client side. So which part are you most interested?

I guess the biggest struggle is syncing or “merging” the data from the cache to the database and vice versa.

We have two use cases where we need caching.

  1. Hide the lag caused by backend/DB connectivity from the user
  2. Enable offline support and sync data when connectivity is available.

I see, yes then you have something to do ; ). You may need to consider a “fine grained” caching where you can control each record or group of records. At the server side you can use the “Java.Cache” API together with EhCache Implementation.SpringBoot and Spring Data provides support at DB / Repository level as well as at Service Method Level

At Client side you can use in Hilla the “Middleware” for more dynamic data or alternatively the “Service Workers” for more static data

https://docs.spring.io/spring-framework/reference/integration/cache.html

https://hilla.dev/docs/lit/guides/client-middleware

https://hilla.dev/docs/lit/guides/client-caching

Thanks for sharing the links. These sure are super helpful in planning. On a high level it seems pretty straightforward. Can’t wait to meet all the corner cases :laughing:

Also the crew of hilla provided an example application to show how caching at client side can be implemented as well as some basic offline example

https://github.com/TatuLund/hilla-demo

If you have a specific question you can ask, however I am unfortunately not the Hilla or Vaadin Expert. I might have it done differently on my own way because I don’t know all the deep capabilities of the underlying frameworks

Tatu shared this in one of the discussions I started. Also very useful. Thanks!

For instance here you see the details how the Hilla crew suggests the implementation of a client caching

https://github.com/TatuLund/hilla-demo/blob/hilla2/frontend/stores/cacheable.ts

https://github.com/TatuLund/hilla-demo/blob/hilla2/frontend/stores/crm-store.ts

Personally I like the approach to use instead the “middleware”, it is more generic and more flexible for a developer.
https://hilla.dev/docs/lit/guides/client-middleware