Skip to content

Running web apps from the iOS home screen

Make it easier to launch Xojo web apps- add them to your iOS device’s home screen.

To add a web app to the home screen, you open it using Mobile Safari and then click the “Sharing” button and choose “Add to Home Screen”.

iOS Share Screen

This creates an app on your home screen that uses the icon you specified for the web app.

HomeScreen.PNG

When you click on the icon on the home screen your app launches without any of the usual Mobile Safari controls.

However, if you have an iPhone 5 you may have noticed that the web app does not use the full screen height if you launch the app from the home screen. Notice the black bars at the top and bottom of the image below:

Letterbox.PNG

After a little bit of digging around on this, some think that it might be a bug in iOS. But there is a workaround. You need to override the viewpoint so that it does not use the default setting.

In the case of a Xojo web app, this means using the WebSession.PrepareSession event handler. In it you can add code like this to specify a new viewport:

Select Case Me.Platform
 Case WebSession.PlatformType.iPhone
 // Allow iPhone 5 to scale web app to use entire screen height when
 // it is added to the home screen
 HTMLHeader = "<meta name=""viewport"" content=""initial-scale=1.0"" />"
End Select

With this code, the web app now uses the full screen size:

FullScreen.PNG

The “HOME SCREEN WEBAPPS” section of this blog post has more details: http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers