Simon MacDonald

simonmacdonald.com

@macdonst

Push

What is a Push?

Push notifications let your application notify a user of new messages or events even when the user is not actively using your application.

Prevalence of Push

Analysis of the Android app store shows that 14.90% of all apps include push. 

Source: http://www.appbrain.com/stats/libraries/dev

Opt in Rates

Industry wide opt in rates were at 42% in 2014. 

Source: http://bit.ly/1IsmyBr

How to increase opt in Rates?

Push can backfire

Guess what is the top reason why people uninstall apps?

How not to annoy people?

Don't send too many push notifications. Social apps can get away with sending more push notifications than a promotional app can.

Make it useful

• Don't assume one push makes sense for all of your users.
• Broadcast pushes are opened about 3% of the time.
• Targeted pushes are opened about 7% of the time.
• Use geofencing to push targeted info.

Make it configurable

Make it as easy as possible for your users to configure which types of push notifications they want to receive.

Quiet Hours

Because push messages are generally paired with sound or phone vibrations, timing should never be overlooked. You don’t want to send a push notification to your app users at 3am and unleash the wrath of customers whose sleep has been disturbed or worse yet, the wrath of their significant other.

Registration

App

Push Service

App Server

register()

Android

pushNotification.register(
    successHandler,
    errorHandler, {
    "senderID":"sender_id",
    "ecb":"onNotificationGCM"
});

What did you notice about that code sample?

• Configuration dependent upon device platform.
• Different methods for receiving notifications.
• Different methods for receiving registration ID's.

Receive

Registration ID

Android

function onNotificationGCM(e) {
  switch( e.event ) {
    case 'registered':
      console.log("regID = " + e.regid);
    break;
  }
}

Hmmmm....

• Each registration handler get the registration ID in a slightly different format.

Android: result.regid

iOS: result

Windows: result.uri

That reminds me of...

a code smell is a surface indication that usually corresponds to a deeper problem in the system 

Martin Fowler, 1999

So we set upon unifying this interface

Android

var push = PushNotification.init({
   "android": {
     "senderId": "sender_id"
   },
   "ios": {

     "badge":"true",
     "sound":"true",
     "alert":"true"
   },
   "wp": {
     "channelName": "channel_id"
   }
});

 

push.on('registration', function(data) {

  console.log('regID = ' 
    + data.registrationId);
});

iOS

Windows

Now...

• No more need to check what device type you are on. Just pass your config data to init and it will figure it out for you.
• Only one method is required to receive the registration ID for all platforms.
• The object that contains your device's registration ID is consistent across all platforms.
• But where did the notification handler go?

Good Question

Let's talk about...

Notifications

App

Push Service

App Server

Android

function onNotificationGCM(e) {
  switch( e.event ) {
    case 'message':
      navigator.notification.alert(
         e.message,null,e.title);
      break;

    case 'registered':
      console.log("regID = " + e.regid);
      break;
  }
}

Not as bad as registration but...

• Android needs a switch statement to handle notification.
• Each notification has a slightly different data format.
• It gets worse when you think about sounds and badges.

Android

push.on('notification', function(data) {
  navigator.notification.alert(
     data.message,null,data.title);

});

iOS

Windows

Consistent Notification Object

Same data structure across all platforms.

 

interface Notification {

    String title;

    String message;

    String sound;

    Integer count;

    JsonObject additionalData;

};

phonegap-plugin-push

https://github.com/phonegap/phonegap-plugin-push

Next Steps

• Continued maintenance
• Engage 3rd party push vendors to add compatibility
• Provide feedback on W3C Push API Editor Draft
• Iterate...

Make a XHR Request

var xhr = new XMLHttpRequest();
xhr.onload = function() {

};

xhr.open("get", "books.json", true);
xhr.send();

 

Download your zipped content

var ft = new FileTransfer();
ft.download(
  'https://myserver.com/books.zip',
  fileURL,
  function(entry) {
    console.log("download complete");











  },
  function(error) {
    console.log(error.source);
  },
  false, {});

Callback Hell anyone?

var fileURL;
window.requestFileSystem(
  LocalFileSystem.PERSISTENT, 0, 
  function(fs) {
    fs.root.getFile("tempFile.zip", 
      {create: true, exclusive: false},
      function​(entry) {
        fileURL = entry.toURL();
      }, 
      function(error) {
        console.log(error.code);
    });
  }, 

  function(error) {
    console.log(error.code);
});

Just call sync

var sync = ContentSync.sync({
   src: 'http://myserver.com/books.zip',
   id: 'books'
});

sync.on('progress', function(data) {
    console.log(data.progress);
});

sync.on('complete', function(data) {

    console.log('Sync complete');

    console.log(data.localPath);

});

var sync = ContentSync.sync({
   src: 'http://myserver.com/books.zip',

   id: 'books',

   type: 'replace'

});

sync.on('complete', function(data) {

    console.log('Sync complete');

    console.log(data.localPath);

});

replace

• Default behaviour
• Deletes any existing content at ID
• Replaces it with new data from the server

var sync = ContentSync.sync({
   src: 'http://myserver.com/books.zip',

   id: 'books',

   type: 'local'

});

sync.on('complete', function(data) {

    console.log('Sync complete');

    console.log(data.localPath);

});

local

• If the content already exists for the given ID it skips the download and unzip phase and just returns the localPath.
• If the content doesn't already exist it acts just like replace.

var sync = ContentSync.sync({
   src: 'http://myserver.com/books.zip',

   id: 'books',

   type: 'merge'

});

sync.on('complete', function(data) {

    console.log('Sync complete');

    console.log(data.localPath);

});

merge

• Doesn't remove content at ID.
• Download and unzip's the new content.
• Overlays the new content over top of existing content.

var sync = ContentSync.sync({
   src: 'http://myserver.com/books.zip',

   id: 'books',

   type: 'merge',
   copyCordovaAssets: true

});

sync.on('complete', function(data) {

    console.log('Sync complete');

    console.log(data.localPath);

});

copyCordovaAssets

• This operation is the last phase before the sync completes.
• If true it copies the cordova.js and all the plugin JS to your target ID.
• Then you can run your app from the ID location.

Wait did he just imply I can update my app over the air without going through app store approval?

Push

Pull

phonegap-plugin-push

https://github.com/phonegap/phonegap-plugin-push

phonegap-plugin-contentsync

https://github.com/phonegap/phonegap-plugin-contentsync

Beer?