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.




Comments

  1. Really means and inspires a lot to hear from you guys.I have bookmarked it and I am looking forward to reading new articles. Keep up the good work..Believe me, This is very helpful for me.
    Mobile App Development Company in Dubai
    Android App Development Company in Dubai
    Mobile App Development Company in UAE

    ReplyDelete
  2. If you are looking for Best Hybrid App Development Services in USA. appbiz360 can help you.

    ReplyDelete

Post a Comment

Popular posts from this blog

Google Web Toolkit Vs AngularJS

PlantText: The new "Online" UML Editor powered by PlantUML

PlantUML & Maven - Enrich your project's documentation