Static resources and PWA offline files with Vaadin 15, Spring Boot and JAR

Flow
1

Dear all,

I am struggeling for 2 days now with figuring out where to place

  • static resources like images
  • PWA offline files
  • PWA application icons

in a way that works in development mode as well as after production build with JAR packaging of a Vaadin 15 SpringBoot application.

I tried different locations that are suggested throughout the web

  • /frontend
  • /src/main/webapp
  • /src/main/resources/fontend
  • /src/main/resources/META-INF/resources
  • /src/main/resources/META-INF/resources/frontend

There are locations that work in development mode, others that work after a production build (with the exception of the PWA icon).

The problems I am facing:

  • images are not resoved
  • cached offline.png / offline.css / offline.html do all have HTML content
  • PWA icons are not created (default icons are used)

Can someone provide an example on where to place these resources, so that they work in development as well as in packaged (JAR-packaging) mode?

Thanks for your help,
Björn

2

Hi Björn

There is a great [overview]
(https://stackoverflow.com/a/57553974/3441504) for where to place which files in which situation.

According to this overview, you’ll need to place

cached offline.png / offline.css / offline.html do all have HTML content

I don’t understand what you mean. how can a png have html content? I think this is an issue depending on the static files not being set up correctly and will probably resolve itself.

PWA icons are not created (default icons are used)

Please try a Hard Refresh in the Browser (Ctrl + Shift + R). [I had this issue yesterday too]
(https://vaadin.com/forum/thread/17546758/spring-boot-where-to-put-pwa-favicon-icon) and this worked for me.

3

Hi Kaspar,

thanks for the response.

If I do it the way you suggested, everything is fine when starting the application in development mode from Eclipse (Run as SpringBoot Application).

But if I run maven to package a JAR for production and start this (java -jar xxxx.jar),

  • images are found correctly
  • css files for Vaadin views are found correctly

but cached offline files are incorrect

  • icons are Vaadin default (white circle on blue background)
  • /offline.html is the Vaadin default one
  • /images/offline.png and /styles/offline.css have the same wrong content (see attached screenshot from Chrome developer tools)

Any more suggestions?

Thanks, Björn

18302186.png

4

Hi @All,

first of all: I managed to fix my problems.

For those who have the same problems when using Vaadin Flow with SpringBoot and JAR-packaging:

All static resources (including images and also PWA offline files) should be placed in src/main/resources/META-INF/resources. This works in development mode as well as packaged as a JAR, except one issue: the application icon is not found by Vaadin PWA to generate all required icon sizes, therefor the default icon is used. This is (currently) an open issue: [see Github]
(https://github.com/vaadin/flow/issues/4687).

The issue conversation also describes a (dirty) workaround until the issue is fixed: override the Vaadin default logo by placing it in src/main/resource/com/vaadin/flow/server/default-logo.png.

Best regards, Björn

5

Björn Mohrmann:
Hi @All,

first of all: I managed to fix my problems.

For those who have the same problems when using Vaadin Flow with SpringBoot and JAR-packaging:

All static resources (including images and also PWA offline files) should be placed in src/main/resources/META-INF/resources. This works in development mode as well as packaged as a JAR, except one issue: the application icon is not found by Vaadin PWA to generate all required icon sizes, therefor the default icon is used. This is (currently) an open issue: [see Github]
(https://github.com/vaadin/flow/issues/4687).

The issue conversation also describes a (dirty) workaround until the issue is fixed: override the Vaadin default logo by placing it in src/main/resource/com/vaadin/flow/server/default-logo.png.

Best regards, Björn

Your solution worked for me! Thx! The icon is overriden.
This should be fixed though. Lots of people use Vaadin with Spring Boot I guess.