Add a PWA install button or link on the interface

How would i go about implementing this using java? I found a component here: https://vaadin.com/directory/component/vaadin-component-factoryvcf-pwa-install-button

but its for JS only.
I want the person acessing the site on mobile to see this as a prompt or button to install. How do i trigger the installation event?

package com.agilsistemas.portalparceiros;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

import com.vaadin.flow.component.page.AppShellConfigurator;
import com.vaadin.flow.server.AppShellSettings;
import com.vaadin.flow.server.PWA;


@SpringBootApplication
@PWA(name = "Portal de Parceiros Ágil",
     shortName = "Portal Ágil",
     offlinePath = "offline.html",
     iconPath = "icons/icon.png",
     themeColor = "#00589e")
     
public class CadastroclientesApplication implements AppShellConfigurator {

    public static void main(String[] args) {
        SpringApplication.run(CadastroclientesApplication.class, args);
    }

    @Override
    public void configurePage(AppShellSettings settings){
        settings.addFavIcon("icon", "/icons/icon.png", "50x50");
    }

}

idk if it helps, but heres my config for the PWA

i have also tried running JS from java like this:

Button btInstalar = new Button("Instalar App");
btInstalar.setId("installApp");
Page page = UI.getCurrent().getPage();
            page.executeJs(
                    "let deferredPrompt;" +
                            "window.addEventListener('beforeinstallprompt', (e) => {" +
                            "deferredPrompt = e;" +
                            "});" +
                            "const installApp = document.getElementById('installApp');" +
                            "installApp.addEventListener('click', async () => {" +
                            "if (deferredPrompt !== null) {" +
                            "deferredPrompt.prompt();" +
                            "const { outcome } = await deferredPrompt.userChoice;" +
                            "if (outcome === 'accepted') {" +
                            "   deferredPrompt = null;" +
                            "}" +
                            "}" +
                            "});");

        });```
Basically i made a button in java, gave it the `installApp` ID, and made a custom click listener that would display the promt to install.

its not working though

let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
    deferredPrompt = e;
});
const installApp = document.getElementById('installApp');
installApp.addEventListener('click', async () => {
    if (deferredPrompt !== null) {
        deferredPrompt.prompt();
        const { outcome } = await deferredPrompt.userChoice;
        if (outcome === 'accepted') {
            deferredPrompt = null;
        }
    }
});```
Here's the JS used

Still no luck after tying a different approach. After following this tutorial:
https://www.youtube.com/watch?v=nkmN5H1e3FE
I configured the project as shown on the tutorial:
image.png

the new JS :

let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
    deferredPrompt = e;
});
window.ns = {
    promptPwa: function () {
        console.log('prompted');
        if (deferredPrompt !== null) {
            deferredPrompt.prompt();
        }
    }
}```
@Route(value = "login")
@PageTitle("Portal Ágil - Login")
@AnonymousAllowed
@JsModule("@vaadin/vaadin-lumo-styles/presets/compact.js")
@JsModule("./src/PWAPrompt.js")
public class Login extends VerticalLayout implements BeforeEnterObserver {
//code
}```
btInstalar.addClickListener(e ->{
   UI.getCurrent().getPage().executeJs("ns.promptPwa()");
});

its supposed to at least log “prompted” when i click the button, but its not working

I was able to make it work by changing the script location to:
image.png

but now the JS is throwing errors. It says the deferredPrompt variable is undefined. I’ll keep looking for a solution, since everyone here seems rather busy to help out