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
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: Add a 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:
modules/web/web
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"
}
]
}
modules/web/web/VAADIN/rocket.png
icon.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");
}
}
<!-- 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: GitHub - cuba-labs/web-manifest-demo
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: How to provide your own in-app install experience :
Chrome automatically displays the banner when your app meets the following criteria:
So, you will need to implement service worker and provide HTTPS access.
Unfortunately, you cannot show this banner programmatically.