Hosted by Microsoft Azure

Menu

Tag Archives: Android

If you’ve ever needed to debug Cordova web apps on iOS and Android it can be quite an awful experience for a web developer. Since working on Postcard web app I’ve found a couple of neat tips to help make sense of those noisy debug logs.

From localhost to native land

Designing and developing in localhost is familiar territory to web developers and so it makes sense to try and get as much work done there as possible. But when you need to use the physical hardware features of a mobile platform the only way to see if things really work is to go native.

For Cordova app development on Android there are a few ways to debug web apps but usually it’s a case of cordova build android then cordova run android --device --debug. Then if you have setup Android SDK’s PATH environment var you can run monitor in command line to open up the Android Device Monitor app to see all the logs.

For Cordova app development on iOS it’s usually cordova build ios in Terminal and then you just open the project in Xcode to debug the app.

Both these options allow you to run and debug multiple devices although you have to tab or switch views to see the other devices logs. Also Android logs are so noisy it’s almost impossible to spot the stuff you want to look at. Ideally I would like to look at all logs at the same time and dial in on the stuff I’m really interested in.

While developing the Postcard app I mocked up the UX flow to perform an Identity Exchange with two devices using our peer to peer Thali Cordova plugin for iOS and Android. Needless to say the Android logs got very busy and I also wanted to be able to get the logs of iOS devices outside of Xcode sessions. Thankfully there are a couple of better ways to debug multiple Android and iOS devices from one Mac –

Because I have two android devices attached I want to be able to target both from command line.

1

2

cordova run android--debug--target=ZX1C224H9F

cordova run android--debug--target=YT91138019

Once Cordova has installed the app on device you can use logcat to see the logs in Terminal. However with multiple devices you want to use adb -s to target a device and then use logcat -s to filter out all the noise! With the Postcard app we are using jxcore to run Node.js on mobile so I used ‘jxcore-log:*’ as my filter.

Now that’s much cleaner and stuff doesn’t scroll faster than you can actually read! 😉

Assuming the Android device is already developer enabled you can also inspect the web view and javascript console logs in Chrome: chrome://inspect/#devices

Debugging Cordova web apps on multiple iOS devices using iOS Console

With iOS all you need to do is attach your devices and download iOS Console which is a handy freeware app to view iOS logs on a Mac with filtering. With our iOS Postcard app I have set the filter to ‘jxcore’.

iOS Console doesn’t need Xcode running and the logs are a lot cleaner than the default Console app.

Also you can inspect the web view and javascript console in Safari once the app is running. In Safari browser go to:Safari > Preferences > Advanced and turn on “Show Develop menu in menu bar” then select:Safari > Developer > Device Name

Note: If you are using mobile Safari to test your web app instead of Cordova then you will have to enable “Web Inspector” on the iOS device under Settings > Safari > Advanced

Like many developers out there I started out coding for the web. So you might think it would be easier to develop a web app than a native app, right? The short answer is no… but web app development is getting better and the performance gap is closing.

Thoughts on web app vs native app development

Delivering a world-class UX is the main reason to opt for native development. Web app performance has quite some way to go especially on the vast majority of low spec devices. For example even if you get your web app running at a buttery smooth 60fps in iOS Safari, it doesn’t automatically mean you get that sort of performance in an app’s UIWebView.

iOS Tip: Don’t be content testing any web app or web UI framework in Safari and think that it works. A real web app development test is only done by running it inside an embedded WebView.

What you have to be careful off is getting sucked into some web app framework because you can get some decent results pretty quickly, but as soon as you add a little more complexity things can start to break and the speed of development will slow as a result. Whereas while native development might take longer to learn initially, after that you can start building some pretty slick apps just using the standard suite of UI components provided.

Ultimately things are getting better for web app development but probably not enough as to make native app developers want to consider switching. But with all the modern browser javascript speed optimisations and mobile devices becoming ever more powerful it’s worth considering a web app where the ability to share code is most important. After all who wouldn’t rather develop code once that works across mobile and desktop and leverages the extensive web developer knowledge base? So the compelling reason to build a web app is that your code should run on any screen that runs a modern browser.

Postcard app

I’ve been involved with developing the Postcard app which is a web app for demoing a peer to peer web experience using the Thali Cordova plugin. Throughout the design, development and build process of this web app I’ve encountered a number of issues or pain points and thought it would be good to share the golden nuggets I’ve learnt while trying to develop a web app that behaves like a native app!

Designing a web app across different screens – live!

Many web apps take advantage of node and there is a great module for designers called BrowserSync.

Shell

1

npm install-gbrowser-sync

BrowserSync allows you live preview all your design or code changes across multiple screens. That means you can test your web app in real-time on any browser on Mac or Windows as well as hook up the web app on iPhone, iPad or Android. Also when you interact on one screen for example following a link or scrolling the page this automatically updates everywhere else. This is a must have for any responsive design or adaptive design work!

Polymer 1.0 – a UI kit for web apps

For the UI design side of things I choose Polymer 1.0 due to it’s host of web app elements inspired by a native app’s UI kit. Initially I didn’t like all the custom element names, as this reminded of an Angular wild west of element names but you can quickly learn the Polymer core elements and view the documentation and source behind them. Also there is a benefit to this as it prevents the usual ‘div nest of inception’ meaning that an HTML layout can be understood at a glance.

Getting started developing with Polymer

The trickiest thing is actually getting all the Polymer elements you need to use as these all come separately which of course makes sense later for production. But do yourself a favour and just install all the paper, iron and neon elements for no hassle development.

Shell

1

2

3

bower install--save PolymerElements/paper-elements

bower install--save PolymerElements/iron-elements

bower install--save PolymerElements/neon-animation

Should I use Polymer’s ‘on-click’ or ‘on-tap’ event?

There is a 300ms click delay issue that affects mobile web apps. The good news is that there is a simple fix by using the viewport meta tag with width=device-width property. But the bad news is that this trick only works in Chrome 32+ on Android.

XHTML

1

<meta name="viewport"content="width=device-width, initial-scale=1"/>

Thankfully Polymer tries to handle this issue for you if you use the on-tap event however it doesn’t appear to currently trigger a click on Mac Safari (using an iframe web app). So if desktop Safari compatibility is more important then you may have to stick with the standard on-click event until this is fixed. Or just incase you already use a ‘fast click’ javascript polyfill it may run into issues due to click delay complications with the iOS 8 web view.

Meet ‘iron-list’ – the UITableView for web app

Polymer’s iron-list element is essential for scrolling large amounts of data on mobile devices. It does this by using a virtual list and recycling (20) cells to handle smooth scrolling of 1000s of items. One note of caution is that this runs fine in Safari browser but there is currently a scrolling issue in iOS 8 WebView beyond a certain number of items. If only UIWebView would behave the same as Safari then development would run so much smoother!

Make it feel like a native app – not a web site!

It’s important to make sure things act like an app and not feel like a website thrown inside a Cordova webview. There are a couple of giveaway indicators that can be fixed, although not everything will behave perfectly.

Disable the scrolling bounce effect

While adding the magical web app meta tags will give you full screen control in the browser it doesn’t get rid of the web page scrolling spring effect common with iOS and Mac. Now while the spring effect provides a wonderful UX in a web browsing context – native app’s don’t spring! To disable this unwanted behaviour the first thing to do is to enable the DisallowOverscroll preference in Cordova’s config.xml.

config.xml

XHTML

1

<preference name="DisallowOverscroll"value="true" />

If you are not using Cordova then you can disable the iOS webview scroll:

1

[[webView scrollView]setScrollEnabled:NO];

It’s always a good idea to do a CSS reset on the html,body and then add the following to disable the bounce effect in the browser:

CSS

1

2

3

4

5

6

html,body {

width:100%;

height:100%;

padding:0;

margin:0;

}

CSS

1

2

3

4

5

/* disable webkit bounce effect in the browser */

html,body {

overflow:hidden;

-webkit-overflow-scrolling:touch;

}

Disable select copy/paste

Another annoying web behaviour inherited is that everything is selectable on a web page. Again a useful behaviour in a web browsing context but not so much with a web app. Besides not feeling right there is a UX issue if a user taps the ‘wrong way’ instead of activating a button click as expected they end up in a text selection mode. The easiest workaround is setting user-select to none on the ‘body’. NB: If your web app contains form inputs then you can exclude those inputs using the :not() CSS selector but I find it easier to switch everything off by default.

Prevent scrolling nav bar when editing input

A quirk with web apps on iOS is trying to fix a nav bar so it won’t scroll off the screen when editing an input or textarea that would obscure the soft-keyboard when it pops up. One trick is to position your input as high up the page as possible in order to avoid the issue. But sometimes this isn’t always possible so the other option is to try a hacky workaround discussed on SO which also seems to work pretty well with Polymer:

In Cordova if you want to enable Javascript focus() calls to open the soft-keyboard you can disable the KeyboardDisplayRequiresUserAction preference. Although bear in mind iOS8 now supports focus() calls but I found the input and keyboard can lose connection sometimes.

config.xml

XHTML

1

<preference name="KeyboardDisplayRequiresUserAction"value="false" />

Problems with web app when running as a native iOS app…

I encountered quite a number of problems when running a web app inside the iOS 8 UIWebView. I have listed the main issues below to watch out for with possible workarounds:
[WebActionDisablingCALayerDelegate setBeingRemoved:]: unrecognized selector sent to instance 0x174009d20
*** WebKit discarded an uncaught exception in the webView:willRemoveScrollingLayer:withContentsLayer:forNode: delegate: -[WebActionDisablingCALayerDelegate setBeingRemoved:]: unrecognized selector sent to instance 0x174009d20

Solution: Add body style for -webkit-transform. This WebView bug occurred when animating an element sliding up from the bottom of the page. It caused the animation to jump and skip frames and seemed to trigger memory warnings.

Solution: If you’ve tested for memory leaks then try disabling animations. If this solves the issue then try to optimise your script so that expensive business logic is called only after animations are completed.

This quick-start tutorial is for Unity3D game developers who would like to get a cloud backend that runs across multiple platforms (including the Unity Editor for quick testing). One of the big advantages for game devs using Unity3D is that it supports so many platforms. It’s fair to say more people own more than one device that connects to the internet and a lot of them can run apps and games. While the platforms and ecosystems may differ as a gamer I would like to play the same game across any device (and on any platform) and expect things to sync. Azure Mobile Services is a ‘Backend as a Service’ which supports multi-platform app development. In Unity the BitRave plugin for Azure Mobile Services is designed to just work on any platform that Unity supports.

If you’ve developed an app you might want to make a promo video showing your app working across devices or multiple screens.

Of course you can record an iOS Simulator, Android Virtual Device, or WindowsPhone emulator easy enough using a screen recording tool like Camtasia but it’s often a bit tricker to record real footage from the device hardware. Also it might be necessary to demonstrate app functionality not supported by a simulator.

How to present and record screen of WindowsPhone device using PC/Mac

On PC you will need Windows 8 installed. On Mac you will need a Bootcamp partition or VMware Fusion Virtual Machine with Windows 8 installed.
The WindowsPhone should have the latest 8.1 update installed.

Unfortunately there is no way to display or record the touch gestures, but this can be dummied using Camtasia mouse effects. Simply ‘mirror’ with the mouse pointer what your other hand does on the device at the same time. Once the screen footage is recorded in Camtasia you can hide the mouse cursor by setting the Cursor Opacity to zero and add a Cursor Highlight effect to simulate the touch input.

How to present and record screen of iPhone/iPad device using PC/Mac

To record an iPhone or iPad you can try out the third party Reflector app. This makes your PC/Mac act as an AirPlay device allowing you to display and record the screen.

Connect PC/Mac and iPhone/iPad to the same wifi network.

Launch Reflector application.

On iOS7 or higher device, swipe up from bottom of screen to open ‘Control Center’ to select the Reflector Airplay device and enable video ‘Mirroring’.

Unfortunately there is no way to display the touch gestures, but this can be dummied using Camtasia mouse effects. Simply ‘mirror’ with the mouse pointer what your other hand does on the device at the same time. Then once your Reflector footage is recorded in Camtasia you can hide the mouse cursor by setting the Cursor Opacity to zero and add a Cursor Highlight effect to simulate the touch input.

How to record screen of Android device using PC/Mac

To record an Android device without rooting your device requires an install of the Android SDK on your PC/Mac. Once your SDK Environment is setup you can run commands in the command prompt / Terminal:

Check Android device is connected to PC/Mac using USB connection. NB: You will have to enable ‘Developer’ mode on your device by tapping Build number seven times (found under Settings > About device). Then enable USB debugging (found under new Developer options settings).adb devices

Unfortunately there is no way to record the touch gestures at the same time using this technique. What you can do is play the original screen recording and mimic the touch gestures over the top while recording using Camtasia.

// Write to the response and then send the notification in the background

request.respond();

sendNotifications(item.text);

}

});

// This insert script sends a push notification (with the text of the inserted item) to all channels stored in the Channel table.

functionsendNotifications(item_text){

varchannelTable=tables.getTable('Channel');

channelTable.read({

success:function(channels){

channels.forEach(function(channel){

// Google Cloud Messaging

push.gcm.send(channel.handle,item_text,{

success:function(response){

console.log('Push notification sent: ',response);

},error:function(error){

console.log('Error sending push notification: ',error);

}

});

});

}

});

}

}

This will send a push notification upon successful insert of a Todo item.

Edit Channel table Script > Insert

Channel Table Insert

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

functioninsert(item,user,request){

//request.execute();

// prevents duplicated channels

varchannelTable=tables.getTable('Channel');

channelTable

.where({handle:item.handle})

.read({success:insertRegistrationIfNotFound});

functioninsertRegistrationIfNotFound(existingRegistrations){

if(existingRegistrations.length>0){

request.respond(200,existingRegistrations[0]);

}else{

request.execute();

}

}

}

This will prevent duplicate registrations of user and device handles.

In the app add a Todo item to trigger a Push Notification

The Push Notification will appear with the Todo item text.

That’s all there is to it! If you wanted to take it to the next level you could use this backend Mobile Service and roll it out across other platforms like Windows Store, Windows Phone, iOS, or use cross platform tools like Xamerin or Phonegap.

For latest platform support, how to connect to other identities and push notification services check out the Azure online docs.

These days it’s probably a good idea to have cloud backend for your apps. There are a greater number of connected devices in comparison to individuals, which means your apps may be expected to work as well as sync across multiple platforms as a rule.

The number of connected devices is more than number of people since 2008. Source: Cisco

This tutorial will show you how to create a cloud backend for an Android app, but the bigger picture would be the ability to roll this out to the other platforms as well. The idea that all the connected devices of an individual user (perhaps an iPhone, iPad, WindowsPhone and Windows device) could all tap into the same shared resources and server-side business logic in the cloud. Of course managing a cloud infrastructure or server isn’t something that most app developers want to get burdened with, never mind the cost and time implications. Azure Mobile Services takes care of all that, enabling developers to focus on developing the app – making the best possible user experience.

I have arranged this tutorial as a three part series. Each part features a 10-15 minute video screencast to allow inclusion of additional titbits that I hope will prove useful. Please note these tutorials are recorded using Android Studio on a Mac, so bear in mind that some steps may differ slightly if you are using Android Studio for Windows or Eclipse.

How to create an Android app using Azure Mobile Services tutorial parts: