Vaadin 14 - Service worker and manifest is not created

0
votes

I am currently working on a PWA in Vaadin14. My current goal is to show up the installation window in the browser but I simply can't get it.

I tried to use https://vaadin.com/pwa/learn/installing-applications as guide. I am having a valid certificate and use a HTTPS connection for the application in the browser. The following @PWA annotation is used:

@Route("main") 
@PWA(name = "Test", shortName = "Test", backgroundColor = "#227aef", themeColor = "#227aef") 
public class MainView extends AppLayout implements RouterLayout, BeforeEnterObserver {

I tried it with Chrome and Firefox, both didn't show an installation window.

It is mentioned that Vaadin creates a Web App Manifest and ServiceWorker by its own (https://vaadin.com/docs/v14/flow/pwa/tutorial-pwa-pwa-with-flow.html)

Vaadin server automatically serves the web manifest, service worker, icons, offline page, and installation prompt, and adds the necessary additions to the application headers.

I cant find the files anywhere after my project is build though. Where are they stored?

What am I missing here?

Edit: Firefox has the following config which I set to true.

Service workers can be unavailable if the dom.serviceWorkers.enable preference is set to false in about:config.

Edit2: I could verify that Firefox does not start a Service-Worker for my application.

2
javavaadinprogressive-web-appsvaadin-flowvaadin14
Have you checked that the manifest that Vaadin creates has the next fields?: short_name or name, icons (192px & 512px), start_url and display (fullscreen or standalone or minimal-ui) - Carlos
I have searched everywhere for a manifest but it seems like it isnt even created. - Michael Kemmerzell
You can check it on the browser. On Chrome for example: press F12 >> Application >> Manifest - Carlos
Does your PWA pass the Chrome Lighthouse tests using that same HTTPS url? Running that usually tells you if anything is wrong and hints on how to fix. - Mathias
Thanks for the hint. I will give it a try on monday when I am back at work! - Michael Kemmerzell

2 Answers

0
votes

In order to show the A2HS (Add To Home Screen) dialog on a mobile device you should have a running service worker and a web manifest file correctly configured.

In case of a desktop browser, you would not see a window popup (unless vaadin itself opens one for you, but I do not this technology) but a (+) icon in the browser address bar (here for Chrome):

enter image description here

You should first find out if the service worker and web manifest are correctly generated. Maybe they are in a /bin folder, a bit hidden within the project structure.

0
votes

I was finally able to solve this issue. Definetly took some time. The issue was that my custom VaadinServlet did not recognize my @PWA annotation so I had to add it manually.

public class VaadinFlowServlet extends com.vaadin.flow.server.VaadinServlet {

@Override
public void init(ServletConfig servletConfig) throws ServletException {
    var registry = 
    ApplicationRouteRegistry.getInstance(servletConfig.getServletContext());
    registry.setPwaConfigurationClass(LoginView.class); // <-- contains @PWA

    super.init(servletConfig);
}