Bringing Native UI to
PhoneGap Apps

by Masahiro Tanaka

User Experience

Users know the difference.

As a developer, we wanted to bring them best user experience.

I don't want to be considerated as sub-optimal solution!

Back in old days...

Mobile WebView has performance issues

  • Especially old devices
  • Buggy position:fixed, overflow scrolling
  • Slow CPU & GPU

Can HTML5 provide competitive UX to Native?

Short Answer: Yes

But it required so many workarounds and glitches that are difficult to understand.

And we needed to leave behind many of older Android devices

It is not a development. It's endless bug finding games! Do your best!!

But clients are killing us

Request from network carrier client:

“Please make this app compatible to all of our devices”

Hybrid app may not be a right solution for Android pre-2.3 devices...

And we created

KDDI's EZ News EX is pre-installed in all KDDI smartphone & tablet lineups.

But we needed to create several screens in native.

If only we can provide native Navbar and Tabbar...

PG NativeControls Plugin


function onDeviceReady() {
  // iOS NativeControl Plugin
  NativeControls.showTabBar(options);
  
  // or iOS NavigationBar || TabBar Plugin
  navigationBar.init();
  navigationBar.create("BlackOpaque");
  navigationBar.setTitle("My heading");
  navigationBar.show();
}
I will render it in the same page. To show different Bar in forwarding page, problems occur.

So we did
Opposite
Approach

Overriding Cordova(UI)WebView

Displaying native components while rendering WebView

Now I am very flexible in adapting native UIs. No fear to use scrolls!

And managing multiple Views

So that native transition handles between each WebViews with animation

It makes app difficult to maintain app state, but gives native animation between pages!

Cross-Platform

All components work on both iOS and Android platform.

A few Android-only features:

  • Supporting Native Menu
  • Hardware Button Support
In Android, Back button will not be displayed and hardware back button does the same job.

Fork Me!

All of them are packed and can be obtained from GitHub.

Currently supports up to PhoneGap 2.9.

Plugin repository is now in progress.

» http://github.com/monaca

Please give us any feedbacks!

Thank You!

Masahiro Tanaka (masahiro@asial.co.jp)

Monaca.mobi