Hide the address bar on mobile devices

Information about development with Vaadin UI.

Hide the address bar on mobile devices

Postby Development@SIB » Fri Jun 03, 2016 2:11 pm

If you use your application with vaadin UI on a mobile device (Android, iOS), the mobile browser will be used. The problem with the browser is that it has an address bar. This is nice for daily web surfing, but not for a business application, because it reduces the available space for your application.

If you want to hide the address bar, you have to "install" the application. Sure, your vaadin UI application isn't really a native application and can't be installed. But you can add a link to your vaadin UI application on the home screen of your mobile device. It's not a problem to do this. iOS has an icon in the address bar:

ios.png
ios.png (655 Bytes) Viewed 1158 times

Use this icon to add a link to the home screen of your device. An Android based device has a different icon:

android.png
android.png (288 Bytes) Viewed 1158 times

If you want a custom icon for your link, read more about custom icons.

If your mobile device is iOS based and the used browser is mobile chrome, you have the option to configure your application by a specific Manifest file. Read more about Web App Manifest.

Place the manifest.json in the same place as your custom icons.
User avatar
Development@SIB
 
Posts: 310
Joined: Mon Sep 28, 2009 1:54 pm

Return to Documentation