Detecting mobile browser in GWT

Question

I want to implement a web application with separate user interface for mobile and PC. Do you know how can I detect whether it is mobile or not? In general, do you have any suggestion for implementing such application in GWT?

Answer 1

On the client side, you can use the Navigator class to get the platform and the user agent string:

Navigator.getPlatform
Navigator.getUserAgent

Identify devices and platforms that way.

Answer 2

If you are used to developing with the MVP pattern or want to make a mobile version of an existing app, I would suggest to use m-gwt. M-gwt works well with GWT best practices, such as MVP since it tries to only extend the core of GWT with necessary functionality for mobiles. Many of the widgets found in core GWT exist in mobile versions in m-gwt, with better touch support etc.

If you are used to developing iPhone apps, you can have a look at NEXT. Next interfaces uses it's own MVC system, while this means it work well with MVP or for making mobile versions of existing GWT sites, some people might prefer this to using activities and places and it also has a nice widget library.

GwtMobile has a similar set of widgets to m-gwt and Next interfaces. GwtMobile uses its own system to create pages where each of your pages extends a Page class, and you have a goTo method to navigate between different pages. Some might prefer to use other frameworks there you can use Google's activities & places instead. GwtMobile has some nice widgets that can also be used with other frameworks and it also has its own persistence framework.

M-gwt and GwtMobile both have their own Phonegap binding so that you can upload the apps to Apple app store and Android market.

Gwt-mobile-webkit is currently not so much about mobile as the only thing that is usable and not currently integrated in core GWT is the Database API. If you need Web SQL, then gwt-mobile-webkit Database API is your friend

If you want very simple no-frills widgets and no animations, but compatibility with stone age browsers, then have a look at informagen mobile gwt The code is hidden away in the maven repository.

One of the most popular javascript frameworks, Sencha Touch, has GWT binding found at http://emitrom.com/gwt4touch The problem with Gwt4Touch is that the widgets in the current version aren't really GWT widgets, just simple wrappers around Sencha Touch. This means that the current version is generally not very compatible with other GWT libraries. According to the developers, the 2.0 version with real GWT widgets should be released around end of December 2011, at which point it will be much more usable.

Generally the mobile GWT libraries support webkit based browsers only as they tend to use newer browser features and CSS3. It is possible to make it work with other browsers, but you will have to create new versions of some of the widgets and animations that do not use CSS3 features found only in webkit.

In conclusion, if you are developing a new app, look into which of the frameworks you like best, if you are making a mobile version of an existing app, you are most likely best of with m-gwt, especially if you are using activities and places. It's possible that Gwt4Touch 2.0 will also work well for making mobile versions of existing apps when it's released, so do keep an eye on that also.

Answer 3

There were a few posts regarding handling the mobile version of Safari in GWT and touch applications on Just enough code to be dangerous:

• Adding support for a new browser to GWT - shows how to add mobile Safari as a recognized user agent in GWT
• Supporting multi-touch events with GWT on mobile Safari
• Multi-touch web apps on the iPad with GWT
• Expanded multi-touch example

There might be some other posts there that could interest you - have fun digging :)