Sunday, July 10, 2016

PluginPub - Publish your PhoneGap plugins to NPM

I was inspired by Sindre Sorhus package np which makes publishing a package to npm easy by running the following tasks automatically for you:


  • Ensures you are publishing from the master branch
  • Ensures the working directory is clean and that there are no unpulled changes
  • Reinstalls dependencies to ensure your project works with the latest dependency tree
  • Runs the tests
  • Bumps the version in package.json and npm-shrinkwrap.json (if present) and creates a git tag
  • Publishes the new version to npm, optionally under a dist-tag
  • Pushes commits and tags to GitHub
Now I'm in favour of anything that makes my life easier so I decided to take np and enhance it with some tasks I routinely do when publishing new plugins. My first pass at it is a new package called pluginpub which is a copy of np that I eventually hope to change to depend on np instead. 

The main difference is that it:

  • Bumps the version in plugin.xml, package.json and npm-shrinkwrap.json (if present) and creates a git tag
It now automates a lot of stuff I used to do manually into a single command. Installation is simple, you run:

npm install pluginpub --save-dev
In the root of your plugin repo. Then to release a new version of the plugin you would execute the command from the root of your plugin repo:

pluginpub 1.5.8
The command takes only one argument and that is the version of the plugin. If you don't pass in a valid semver then the command will fail.

Anyway, it make or may not be of use to you. Feel free to try it out and report any issues on the github page. Next steps are publishing a proper README and adding the auto-generation of a CHANGELOG file which is another manual step I hate doing when releasing a plugin.

Monday, June 27, 2016

Using ES2015 Code in Your PhoneGap Plugins

Everyone loves the new hotness of ES2015 features but sadly not all of the devices your app is going to run on are able to take advantage of all the features of ES2015. Luckily we can use Babel to transpile our ES2015 code into ES5 code that will run everywhere. This way we can write our plugin's JS using the new hotness but still run everywhere.

I've started working on a version of the PhoneGap Push Plugin in the es6 branch that uses ES2015 and what follows is a description of how I set it up.

Step 1: Add the necessary packages to package.json

We need to add Babel to our package.json so open the file and add the following lines.

  "devDependencies": {
    "babel-cli": "^6.10.1",
    "babel-core": "^6.10.4",
    "babel-preset-es2015": "^6.9.0"
  }
Then run the command:

npm install

Step 2: Create a .babelrc file

We'll have to tell babel how we want the code transpiled from ES2015 to ES5. So create a new file called .babelrc in the root of your plugin project and populate it with the following lines:

{
  "presets": [
    "es2015"
  ]
}

Step 3: Write your ES2015 code

I like to add a new directory under the src folder called src/js. It is in this folder that I like to keep my ES2015 compliant code.

Step 4: Transpile your code

Once your ES2015 code is written it is time to transpile it to ES2015 so you can publish to NPM and Github. For this open package.json and add a new line to the scripts section:

  "scripts": {
    "build": "babel src/js --out-dir www",
  }
Now if you run the command:

npm run build
You will find your transpiled code in the www folder of your plugin.

Step 5: Link to the ES5 code in plugin.xml

It is key that you don't actually deliver the ES2015 code as part of the plugin as you want to make sure your users are executing the ES5 version. To do that open plugin.xml and make sure that your js-module tag refers to code in the www directory like:

<js-module name="PushNotification" src="www/push.js">
  <clobbers target="PushNotification">
</clobbers></js-module>
and not:
<js-module name="PushNotification" src="js/src/push.js">
  <clobbers target="PushNotification">
</clobbers></js-module>
Bonus Material

If you are anything like me, writing ES2015 code is not quite second nature yet. In order to help me along I setup my project to be linted automatically.

Step 1: Add the necessary packages to package.json

We need to add ESLint to our package.json so open the file and add the following lines.

  "devDependencies": {
    "babel-eslint": "^6.1.0",
    "eslint": "^2.13.1",
    "eslint-config-airbnb": "^9.0.1",
    "eslint-plugin-import": "^1.9.2",
    "eslint-plugin-jsx-a11y": "^1.5.3",
    "eslint-plugin-react": "^5.2.2"
  }
Then run the command:

npm install

Step 2: Create a .eslintrc file

We'll have to tell ESLint how we want the code linted. So create a new file called .eslintrc in the root of your plugin project and populate it with the following lines:

{
  "extends": "airbnb",
  "parser": "babel-eslint",
  "ecmaFeatures": {
    "experimentalObjectRestSpread": true
  },
  "rules": {
    "spaced-comment": 0,
    "no-console": 0,
    "no-unused-expressions": [2, { "allowShortCircuit": true }]
  },
  "env": {
      "node": true,
      "mocha": true,
      "browser": true
  }
}
Step 3: Setup Your Editor

Not sure what editor you are using to write JS but I'm using Atom at the moment so I have installed the linter-eslint package which automatically picks up my .eslintrc file and lints my code on the fly.

Happy ES2015 coding everyone!

Sunday, May 22, 2016

Apps Crashing with phonegap-plugin-push and Google Play Services 9.0.0

Late last week Google pushed a new version of Google Play Services out to phones and since them some users of the phonegap-plugin-push have been seeing crashes in their app. The stack trace for that crash looks like this:

05-22 16:21:42.868 10979 11117 E AndroidRuntime: java.lang.IncompatibleClassChangeError: The method 'java.io.File android.support.v4.content.ContextCompat.getNoBackupFilesDir(android.content.Context)' was expected to be of type virtual but instead was found to be of type direct (declaration of 'com.google.android.gms.iid.zzd' appears in /data/app/io.cordova.hellocordova-1/base.apk)
05-22 16:21:42.868 10979 11117 E AndroidRuntime: at com.google.android.gms.iid.zzd.zzeC(Unknown Source)
05-22 16:21:42.868 10979 11117 E AndroidRuntime: at com.google.android.gms.iid.zzd.(Unknown Source)
05-22 16:21:42.868 10979 11117 E AndroidRuntime: at com.google.android.gms.iid.zzd.(Unknown Source)
05-22 16:21:42.868 10979 11117 E AndroidRuntime: at com.google.android.gms.iid.InstanceID.zza(Unknown Source)
05-22 16:21:42.868 10979 11117 E AndroidRuntime: at com.google.android.gms.iid.InstanceID.getInstance(Unknown Source)
05-22 16:21:42.868 10979 11117 E AndroidRuntime: at com.adobe.phonegap.push.PushPlugin$1.run(PushPlugin.java:75)
05-22 16:21:42.868 10979 11117 E AndroidRuntime: at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1113)
05-22 16:21:42.868 10979 11117 E AndroidRuntime: at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:588)
05-22 16:21:42.868 10979 11117 E AndroidRuntime: at java.lang.Thread.run(Thread.java:818)
05-22 16:21:42.882  5060  6828 W ActivityManager:   Force finishing activity io.cordova.hellocordova/.MainActivity
The crash is being cause because of a incompatibility between the newly released Google Play Services and Android Support Library v4. The phonegap-plugin-push does not use Android Support Library v4 but another plugin in your app may. You can check by doing:
grep -r com.android.support plugins
To see which other plugin is using Android Support Library v4. Removing that plugin, recompile and reinstall the application fixes the problem. Obviously this is not a desired or long term fix. Trying to figure out a way to prevent this but I fear we will require a new version of Android Support Library v4 from Google.

Subscribe to the Issue #909 on the plugin's repo for more info and updates.

Monday, March 28, 2016

Cordova Magic Commands

I was inspired by the following tweet:

conjure = cordova create $1 $2 $3 ; cd $1
summon = cordova platform add $1
banish = cordova platform rm $1
enchant = cordova plugin add $1
curse = cordova plugin rm $1
mix = cordova build $1
cast = cordova run $1
spells = cordova platforms ; cordova plugins

You can see the commands in action in this terminal session recording:

To create my own set of magic commands for Cordova. You can grab the additions I put into my .bash_profile file from this gist.
There is no real good reason for this other than I giggle to myself everytime I enchant or curse a plugin.

Tuesday, October 27, 2015

PhoneGap-Plugin-Push Version 1.4.0 Has Been Released

The latest release of the PushPlugin is now available on npm. This release is the long awaited release that is fully tested with iOS9. I was able to test on an iPhone 6+ running iOS 8.4.1, iPod Touch running iOS 9.0.2 and an iPad Air 2 running iOS 9.1.0. Please let me know if you run into any problems with this release.

On Android the switch over to using Gradle is now complete. The deprecated gcm.jar has been removed from the plugin and replaced with the Google Play Services GCM framework. Even better news is that PhoneGap Build now supports Gradle builds.

The big feature that people have been clamoring for is background or silent notifications. It is now possible for your 'notification' event handler to run when you app is in the background on iOS and Android (support for Windows coming soon).

1.4.0 (2015-10-27)

Full Changelog
Implemented enhancements:
  • Use Google's InstanceID API #188
Closed issues:
  • How to handle a re-installed app? #203
  • interactive push notifications? #266
  • Empty registrationId Android #265
  • Run callback when clicking of notification body #261
  • Android BUILD FAILED #251
  • Re-register #250
  • how to work in background ? #249
  • installing plugin #244
  • No Sound and vibration #242
  • Unable to build apk #241
  • still having problems with build. #239
  • Registering on iOS 9 #238
  • Custom sound repeated multiple times on Android #237
  • Android: status bar notification is not shown #236
  • Multiple Push Notifications - phonegap build #234
  • error: cannot find symbol String token = InstanceID.getInstance(getApplicationContext()).getToken(senderID, GCM); #231
  • Problem using "ledColor" and "VibrationPattern" #229
  • Notification event receive, but not notification showing on android #228
  • Events for registration not being fired #227
  • 'registration' event not firing on windows phone #224
  • Can i subscribe to a topic in using plugin? #219
  • GCMIntentService.java:472: error: cannot find symbol iconColor #217
  • Push Plugin registering on iOS 9 Devices but not showing Notification #216
  • Receiving a notification "outside app" while in it? #213
  • iOS push not working for device tokens when spaces removed #212
  • Error: Plugin PushPlugin failed to install. #210
  • Build error #205
  • Android push.on('registration', cb) fires correctly on device, but not in emulator. #204
  • 1.3.0 version not compatible with "crosswalk" by PGB #199
  • How to get data on didReceiveNotification Background Process #198
  • PushNotification is not defined in some devices #196
  • not getting notifications on the Android device #195
  • Installation Errors #186
  • IOS: on registration fired twice #185
  • Build failed with exit code 8 #184
  • iOS: Not able to schedule local notification after adding the plugin #183
  • How to show multiple notifications individually in android? #181
  • iOS init option type #180
  • Building for Android is a quest #179
  • How do i tell if the user open the app by tapping the notification? #176
  • IOS custom push sound when app is in background #175
  • Hi guys please post full working procedure, I'm not able to get registration id also. Please help #174
  • Has anyone tested this plugin on windows? #173

Monday, September 21, 2015

PhoneGap-Plugin-Push Version 1.3.0 Has Been Released

The latest release of the PushPlugin is now available on npm. This release switches the plugin over to using Gradle to include the Android Support Framework jar instead of it being included in the plugin. This should fix the issue where this plugin would conflict with others, like the Facebook plugin when building. Just make sure you have version 23 or later of the Android Support Library which can be installed from the Android SDK Manager.

Unfortunately, PhoneGap Build does not yet support Gradle so if you are using this plugin with PhoneGap Build you will need to use version 1.2.3 or earlier for the time being.

I know last time I said I would be making sure that iOS9 works with version 1.3.0 but I wanted to get that Gradle change out as quick as I could. Next release 1.4.0 will be full tested with iOS9 and I won't wait a full month, I'll release it just as soon as it's tested.

Full Change Log

1.3.0 (2015-09-21)

Implemented enhancements:
  • How to use GCM 3.0 with this plugin? #127
  • Android: possibility to send a notification with a title and without message #122
  • Enhancement - Led, Vibration Pattern, Priority on Android #105
Fixed bugs:
  • It is using in gcm data.additionalData ? #126
  • iOS notification from cold boot #117
  • Notification LED is not working #97
Closed issues:
  • Know which version is used in build service #151
  • Registration is not working in IOS9 #150
  • build fail on android #149
  • iconColor does not set icon background on Android #146
  • Prevent windows toast notification when in foreground #145
  • How to implement push notification for ios with this plug-in? #143
  • After installing this plugin I can't build on Android #141
  • version 1.2.3 #134
  • New inbox style on android #131
  • impossible to install the phonegap-plugin-push Error #130
  • Hello, i am developing a cordova app which requires push notifications to be sent to users android phone, so i tried using this new phonegap push plugin as old one is deprecated, and it keeps giving me an error in console: Uncaught ReferenceError: module is not defined --- Line 154 Push.js and i dont have much experience with cordova, so can anyone assist me ? #128
  • INVALID_REGISTRATION when http post request with to IOS #123
  • Andriod :More than 2 notifications in status bar it is not works. #121
  • Release notes for 1.2.x #119
  • Google cloud messaging GCM - Push Notification not being sent (Server Side) #110

1.2.3 (2015-09-08)

Fixed bugs:
  • Notification not showing..... #101
  • Same data payload for messages with action buttons #90
Closed issues:
  • Notification doesn't show the app icon #112
  • Notification doesn't show the app icon #111
  • Issue with plugin facebook connect #107
  • Cordova Support #99
  • Uncaught ReferenceError: cordova is not defined, http://localhost:8100/lib/push.js, Line: 7 #98
  • Notifications never received on Android #96
  • How know the way the app was launched #95
  • Android, example doesn't work when it goes into background #94
  • Utilizing push plugin #91

1.2.2 (2015-08-31)

Closed issues:
  • PushPlugin notification icon is too big #88

1.2.1 (2015-08-31)

Implemented enhancements:
  • Question about GCM Notifications and data in the message payload #87
Fixed bugs:
  • Notification callback for pushes without a message #80
Closed issues:
  • Android: No notification displayed on device. Notification event never called. #86
  • it seem no wp8 version for now #56

Tuesday, August 25, 2015

PhoneGap-Plugin-Push Version 1.2.0 Released!

The latest release of the PushPlugin is now available on npm. This release focuses on bringing a number of enhancements to Android notifications.

Fear not fans of other platforms as subsequent releases will have more features for your OS of choice. In fact release 1.3.0 will center around iOS9 support.

Picture Notifications

Embed a large picture in your notification. You let the plugin know you want to display a picture by setting the style of the push to picture and then giving it a picture property.

For example:
{
    title:"Big Picture", 
    message: "This is my big picture message", 
    style: "picture",
    picture: "http://36.media.tumblr.com/c066cc2238103856c9ac506faa6f3bc2/tumblr_nmstmqtuo81tssmyno1_1280.jpg",
    summaryText: "The internet is built on cat pictures"
}
Produces the cat picture on the right.

Inbox Notifications

Instead of stacking notifications in the tray you can now add multiple notifications to a single entry in the tray by setting the style to inbox. The first notification that arrives looks like normal but the subsequent ones will look like an inbox.

For example:
{
    title:"My Title", 
    message: "My first message", 
    style: "inbox",
    summaryText: "There are %n% notifications"
}
Followed by:
{
    title:"My Title", 
    message: "My second message", 
    style: "inbox",
    summaryText: "There are %n% notifications"
}
Produces the notification above.

Finally, my favourite new addition...

Action Buttons

Your notification can include action buttons. If you wish to include an icon along with the button name they must be placed in the res/drawable directory of your Android project. Then you can send the following JSON from GCM:
{
    title:"AUX Scrum", 
    message: "Scrum: Daily touchbase @ 10am Please be on time so we can cover everything on the agenda.", 
    actions: [
        { icon: "emailGuests", title: "EMAIL GUESTS", callback: "app.emailGuests"},
        { icon: "snooze", title: "SNOOZE", callback: "app.snooze"},
    ]
}
This will produce the following notification in your tray:


When the user clicks on one of the buttons it will execute the JavaScript code you specified as a callback for that button.

Check out the plugin's README for more details.

Full Change Log
1.2.0 (2015-08-25)

Implemented enhancements:
  • Implement Big Picture Style for Android #75
  • Implement Inbox style for Android #74
  • on("registration" is not getting called... #66
  • multi-line text support #63
  • Add image property to iOS and Android #39
  • Programmatically register #31
Fixed bugs:
  • Pushes being deleted from notification bar when cold start #67
  • No default sound in Android #53
  • Multiple push notification problem #48
Closed issues:
  • oficial push plugin and windows and wp8 compatibility #71
  • On Android, GCMIntentService.onError() doesn't get passed to the JavaScript "error" event #65
  • Android: add property to vibrate phone on received notification #61
  • push.on => "registration" will trigger twice times that only in iOS #57
  • Publish plugin to PhoneGap Build #22
Merged pull requests: