MOBILE HYBRID DEVELOPMENT - CORDOVA BROADCASTER PLUGIN

Hybrid Development

At the moment, I'm a "mobile hybrid development" believer. HTML5 provides a lot a good stuff ready to use for mobile apps and to solve native access dilemma, i've choose to use the Cordova (aka Phonegap) framework.

Cordova

Cordova provides a container, built around a native WebView, that allow to embed an HTML5 app in native fashion.

A great feature of Cordova is their "plugin's infrastructure" that enable communication between Javascript and native code giving to developers infinite possibility to break HTML5 limits and/or restrictions.

Working with Cordova and developing plugins for IOS & Android  i've understood that common need for all plugins is just to send messages from Javascript that can be handle in native code and viceversa. So i've developed a generic plugin that extend the Cordova built-in message bus connecting it to the standard native message bus provided by native platform.

The "Broadcaster" Plugin

The plugin is now available from Cordova Plugin Registry here 

The plugin name is "broadcaster" to avoid confusion with the several "notification" plugins already present.

Basically the Plugin connects,  "NotificationCenter" on IOS and "LocalBroadcastManager" on Android, to Cordova's infrastructure, allowing to use such standard way to send and receive messages  both from/to Javascript and native code. Below usage examples.
    

Usage examples

Form Native to Javascript

Javascript

    console.log( "register didShow received!" );
    window.broadcaster.addEventListener( "didShow", function( e ) {
                //log: didShow received! userInfo: {"data":"test"}
                console.log( "didShow received! userInfo: " + JSON.stringify(e)  );
    });

IOS

[[NSNotificationCenter defaultCenter] postNotificationName:@"didShow"
                                                    object:nil
                                                  userInfo:@{ @"data":@"test"}];

Android

final Intent intent = new Intent("didShow");

Bundle b = new Bundle();
b.putString( "userdata", "{ data: 'test'}" );
intent.putExtras( b);

LocalBroadcastManager.getInstance(this).sendBroadcastSync(intent);

Form Javascript to Native

Javascript

  window.broadcaster.fireNativeEvent( "test.event", { item:'test data' }, function() {
    console.log( "event fired!" );
    } );

IOS

[[NSNotificationCenter defaultCenter] addObserverForName:@"test.event"
                                                  object:nil
                                                   queue:[NSOperationQueue mainQueue]
                                              usingBlock:^(NSNotification *note) {

                                                      NSLog(@"Handled 'test.event' [%@]", note.userInfo[@"item"]);

                                                    }];

Android

final BroadcastReceiver receiver = new BroadcastReceiver() {
  @Override
  public void onReceive(Context context, Intent intent) {
          final JSONObject data = new JSONObject( intent.getBundle().getString("userdata"));

          Log.d("CDVBroadcaster",
            String.format("Native event [%s] received with data [%s]", intent.getAction(), data.toString()));
  }
};

LocalBroadcastManager.getInstance(this)
            .registerReceiver(receiver, new IntentFilter("test.event"));
}

Conclusions

This plugin could be considered as "infrastructural"  and could help you to avoid to develop a new plugin in all cases in which you need to share infos and/or send/receive events between Javascript and native.