Save application on mobile homescreen

Hi

I like the functionality the cuba-platform.com website has when viewed from mobile: save to homescreen and open în full screen.

How can I add this functionality to a Cuba app?

Thank you

Hi,

This technology called Web Manifest: https://developers.google.com/web/fundamentals/web-app-manifest/

Our forum has a special manifest.json file: https://www.cuba-platform.com/discuss/manifest.json

You can implement it in your app using the following steps:

  1. Create VAADIN directory in modules/web/web
  2. Create modules/web/web/VAADIN/manifest.json file:
{
  "name": "CUBA.Platform Demo",
  "short_name": "CUBA.Platform Demo",
  "display": "standalone",
  "orientation": "natural",
  "start_url": "/app/",
  "background_color": "#ffffff",
  "theme_color": "#ffffff",
  "icons": [
    {
      "src": "/app/VAADIN/rocket.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
  1. Add modules/web/web/VAADIN/rocket.png icon.
  2. Implement custom BootrstapListener that will add link tag to the initial HTML page:
public class CustomBootstrapListener extends CubaBootstrapListener {
    @Override
    public void modifyBootstrapPage(BootstrapPageResponse response) {
        super.modifyBootstrapPage(response);

        // Add <link rel="manifest" href="/app/VAADIN/manifest.json"> to HEAD
        response.getDocument().head()
                .appendElement("link")
                .attr("rel", "manifest")
                .attr("href", "/app/VAADIN/manifest.json");
    }
}
  1. Register it in web-spring.xml:
    <!-- custom HTML page initialization -->
    <bean id="cuba_BootstrapListener"
          class="com.company.demo.web.manifest.CustomBootstrapListener"/>

Now, you will be able to add the application to Home Screen in Android from Chrome browser. See complete demo project here: https://github.com/cuba-labs/web-manifest-demo

2 Likes

Hi Yuriy

Thank you kindly for your fast reply
are you sure the demo project web-manifest-demo is working? I have tested it with 2 android phones and one tablet and the save to home screen popup does not appear (at the same time, the one from Cuba Platform forum does)

Kind regards

Add to home screen banner is an additional thing. In this demo I’ve added only option to add app to Home screen from the context menu of web page. If you need a banner - take a look at the specification: https://developers.google.com/web/fundamentals/app-install-banners/ :

Chrome automatically displays the banner when your app meets the following criteria:

  • Has a web app manifest file
  • Has a service worker registered on your site.
  • Is served over HTTPS (a requirement for using service worker).
  • Meets a site engagement heuristic defined by Chrome (this is regularly being changed).

So, you will need to implement service worker and provide HTTPS access.

Unfortunately, you cannot show this banner programmatically.

1 Like