• info@happli.be

Category ArchivePhonegap

Phonegap – Local Notifications plugin

If you ever need to display notifications to the users of your mobile app, you’ll need a plugin. The one I’ve used is Local notifications (https://github.com/katzer/cordova-plugin-local-notifications). So far, I’m satisfied with it. The picture below illustrates the notification appearing in the notification center (iOS).

INSERT PICTURE HERE

The following screenshot show it when it’s received.

INSERT PICTURE HERE

Don’t be surprised if you don’t see the notifications you schedule when the app is in foreground. It depends on the platform used. Under iOs it’s “by design”. See https://github.com/katzer/cordova-plugin-local-notifications/issues/625 for more information.

You can use a simple trick to make sure your users will be notified, regardless they’re in your app (in foreground) or not (in background). This SO post explains it all: http://stackoverflow.com/questions/29606012/how-to-check-app-running-in-foreground-or-background-in-ionic-cordova-phonegap. Basically, it all comes down to declaring a boolean variable (e.g. isInForeground) and changing its state in the “pause” and “resume” event handlers.

Tested and approved 🙂

 

Adding Android platform to an existing Cordova app

Today, I tried adding a platform to an existing cordova app, which used to work under iOS  was developed on a Macbook Pro. This post lists the things I had to do in order to get it working and the bumps I hit.

Setup the environment

You have to follow the Android platform guide. It’s very well explained and easy to follow. I found it pretty annoying that I’ve had lots of timeouts during the download of the several packages (through the SDK manager). Just keep on trying and you’ll end up with a working environment.

I’ve had another problem when I tried to run the emulator. I was told that Intel HAXM wasn’t installed, so I installed it.

But I couldn’t get the emulator running, I didn’t have much info through the avd manager, so I created a blank project in Android Studio, then I tried to run it in the emulator. And then I was able to read more info about the problem:

Failed to sync vcpu reg.

I was just one google search away from getting it running This SO post helped me. This message seemed to be in relation with the VirtualBox that was running on my Mac at the same time. Shutting down the VirtualBox VM allowed me to get the Android emulator running.

Add the Android platform to the cordova project

cordova platform add android.

So far so good, but when trying to compile the app like below, I had a problem.

cordova build android

I was told that

Screen Shot 2015-09-28 at 22.28.33

Multiple dex files define Landroid/support/annotation/AnimRes;

I found the solution in this post. I simply had to remove the android v4 support from my project’s plugins. I don’t know how this one got there.

Debug the project

Once able to build the project and to make it run, I needed a way to debug it. Just launch chrome and type chrome://inspect/#devices in the address bar (the app must be running first).

Conclusion

It took me less than 2 hours to make my project run on Android. Most of that time was linked to the setup of the environment.  So I’m still convinced that cordova was the right choice to build this cross-platform mobile app.

Migrating a Phonegap app to iOS 9

I installed the iOS 9 update as soon as Apple offered me to and … what a journey! The phone update process was smooth, as was installing the latest version of XCode (7).

But I’ve lost a lot of time making my phonegap app work again on iOS 9. Here’s a note on the things I’ve lost a lot of time on.

Not installing OS X El Capitan

Not installing OS X El Capitan on my Mac. It made the debugging experience awful. I couldn’t get anything written to Safari Web Inspector. Installing OS X El Capitan made it ok again.

App not initializing properly

Not having any clue why my Angular app wasn’t initializing properly. I first thought that I had the window.location bug which you can read about on the web: http://stackoverflow.com/questions/32719631/how-to-fix-window-location-issue-in-ios9-uiwebview. I read that Angular had to be fixed, that there was a patch out there and that the patch was included in AngularJS 1.4.6 => Had to migrate my angular components (cookies, route, google-maps) to that version. Still I had no result. ng-view not showing and nothing written on Web Inspector console. I’ve had to make two pages: one index.html (loading cordova) and a second one app.html (angular app). And by doing that I was able to get all the errors written to the console and could solve them one by one.

HTTP Request headers problems

I’ve had this problem as well with my services adding authentication headers to their http requests.

Apache hosting

I also had a web ui hosted on my Mac OS dev machine, under Apache, which I needed to use because it’s the “admin way” to the system’s data. It used to run under Yosemite, but didn’t any longer after El Capitan upgrade. I guess Apache got upgraded as well. I had to re-check all that config and was helped by this post. And indeed I think some of my previous customizations to Apache config files had been discarded by the upgrade process.

Phonegap – APNS push notifications with PushPlugin, Azure Notification Hub

There are a many plug-ins out there to help you with push notifications. I’ve used PushPlugin:  https://github.com/phonegap/phonegap-plugin-push

I’ve spent quite a lot of time getting the whole APNS-Azure Notification Hub-iPhone flow working. Just getting started requires quite a lot of prerequisites:

  • An Apple Developper Account (99$/year)
  • A Mac, so that you can generate certificates using KeyChain
  • A Windows Azure subscription (free trials exist), with a Notification Hub
  • An iPhone (I didn’t try, but it looks like you won’t get it working on iOS Simulator)
  • A phonegap project.

Here are a few things that have been time-consuming:

Not having a Mac

Working on the sources on a PC, Uploading the sources to phone gap build, waiting for the build to finish, downloading the IPA package, importing it to iTunes then synchronising it with the iPhone is… as you guess very time consuming. Yes, I’ve tried to work with Phone Gap’s hydration. Still it remains a lot to package everything in a zip, then upload it to PhoneGap Build. Yes, there exists a Phone Gap Build REST API that one could use to automate an upload-then-build process (and maybe such tools already exist, I haven’t searched for them). Even though you automate that step, it’s still slower than compiling locally from a Mac. Moreover, not having a Mac prevents you from having a decent debugging experience (see that post to find out how to debug your phone gap App using Safari).

All-in-all I’ve lost a lot of time trying to do without one, but I finally resorted to getting a Mac.

Get a Mac.

Getting the token

Getting the token from APNS isn’t hard if you get the correct certificates. Pay attention to your phone gap projet name. It must match the Application Identifier you create in the Apple Developer portal. Can cost a lot of time

Registering the token

Passing the token to the intermediate push server (the notification hub in our case) hasn’t been easy. I couldn’t find an easy-to-use javascript client for their API. I’ve used the Azure Mobile Service phone gap plugin. Indeed, with every Azure Mobile Services you get a Notification Hub associated. The phone gap plugin lets you access that Notification Hub, as shown below.

Azure notification hub apns token registration

Note:

  1. I used to call registerTemplate for APNS. It never worked. I had to call registerNative. It took me quite long before I tried that.
  2. There might be a better way to register the token with Notification Hub. Leave a comment in case you know of one.