PWA with @PWA with the full stack starter not working

Flow
1

Hi,
I wanted to use the @PWA annotation on my custom project. But I think I am missing something. Now I just tried the “Full Stack App with Spring” starter. I imported the project into eclipse. Start the project with Run as without any settings. The project started without exception. I can also see the pwa elements in the HTML DOM. But it is not visible. If I make them visible with css
#pwa-ip { bottom: 160px important! }
Then the Dialog is visible. But the buttons (Install and the X) are not clickable.

On https://bakery-flow.demo.vaadin.com/login it is working.

So do I miss something?

2

Where to put the icons\icon.png if its a Spring Boot project?

I try with all of the followings given the same time:

src\main\webapps\icons\icon.png

src\main\resources\icon.png

src\main\resources\icons\icon.png

src\main\resources\META-INF\resources\frontend\icons\icon.png

Its size is 512x512 px and still only the default “blue circle” icon is displayed instead of my custom icon.

3

To get this running on my localhost (windows, openjdk11, vaadin 12.0.3, chrome 71), serveral tasks has to be done:

  1. create a self signed certificate by:
    keytool -genkeypair -alias tomcat -storetype PKCS12 -keyalg RSA -keysize 2048 -keystore keystore.p12 -validity 3650 -ext san=dns:localhost
  • the parameter ext san=… is important, because otherwise chrome will complain about missing “Subject Alternative Name”

  1. put the self signed certificate (keystore.p12) into your maven project resource folder

  2. setup spring boot to accept https calls. Add this to your application.yml
    server:
    port: 8443
    ssl:
    key-store: classpath:keystore.p12
    key-store-password: asdfasdf # the password which you typed in at the creation of the certificate
    key-store-type: PKCS12
    key-alias: tomcat # the alias which you used at the creation of the certificate

  3. At the @PWA annotation to your root layout
    @PWA(name = “Test PWA”, shortName = “PWA”, manifestPath = “frontend/manifest.webmanifest”)
    I have to use my own manifest file, because otherwise chrome was complaining about an invalid manifest file
    The manifest looks like this and is in the frontend directory:
    {
    “name”: “Test PWA”,
    “short_name”: “PWA”,
    “display”: “standalone”,
    “background_color”: “#f2f2f2”,
    “theme_color”: “#ffffff”,
    “start_url”: “/”,
    “scope”: “/”,
    “icons”: [{
    “src”: “icons/icon-144.png”,
    “sizes”: “144x144”,
    “type”: “image/png”
    },
    {
    “src”: “icons/icon-192.png”,
    “sizes”: “192x192”,
    “type”: “image/png”
    },
    {
    “src”: “icons/icon-512.png”,
    “sizes”: “512x512”,
    “type”: “image/png”
    }]
    }
    Its important, that also the image icon-144 exists inside the frontend/icons folder. Otherwise chrome will throw an exception on the dev tools logs and the install prompt is not visible.

  4. Add the self signed certificate to the trusted root certificate of the chrome browser

  5. Visit localhost:8443 in chrome (firefox version 64 didn’t worked for me)

If the install prompt will not be shown, check the logs of the dev tools console or check if the certificate is correct in dev tools → security. It should be “certificate - valid and trusted”