ionic►android

Ionic Framework troubleshoot guide when working with android

By: Ryan Wong at

After developing my mobile app on the browser, I found many issues to arise when I started testing it on android.

I’m going to list all issues I encounter here for my reference in the future. IF this can help you save hours of work then thats good too.

##Issues

1.When using $http service in angular to do a POST request, it will wrap all form data in json and send it to the server.
If your backend is PHP(Node works fine), it won’t understand the json you send ot the server. The hack I found to fix this is the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.config(function($httpProvider){
 // Use x-www-form-urlencoded Content-Type
  $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

  /**
   * The workhorse; converts an object to x-www-form-urlencoded serialization.
   * @param {Object} obj
   * @return {String}
   */
  var param = function(obj) {
    var query = '', name, value, fullSubName, subName, subValue, innerObj, i;

    for(name in obj) {
      value = obj[name];

      if(value instanceof Array) {
        for(i=0; i<value.length; ++i) {
          subValue = value[i];
          fullSubName = name + '[' + i + ']';
          innerObj = {};
          innerObj[fullSubName] = subValue;
          query += param(innerObj) + '&';
        }
      }
      else if(value instanceof Object) {
        for(subName in value) {
          subValue = value[subName];
          fullSubName = name + '[' + subName + ']';
          innerObj = {};
          innerObj[fullSubName] = subValue;
          query += param(innerObj) + '&';
        }
      }
      else if(value !== undefined && value !== null)
        query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
    }

    return query.length ? query.substr(0, query.length - 1) : query;
  };

  // Override $http service's default transformRequest
  $httpProvider.defaults.transformRequest = [function(data) {
    return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
  }];

});

2.When testing your mobile app in android, make sure to tunnel your server if your using localhost or a virtualhost hostname.
This stumped me for a while. I used ngrok to tunnel the port. If you have multiple virtualhost there maybe issues.
Maybe comment out the ones your not using.

3.When the spacing looks good in chrome, expect there to be less space in android. Try not to use position absolute stuff that are few pixels off
other elements.

4.Always use “ white-space: no-wrap;” for divs. For some reason android likes to wrap them.

5.If theres an error in the resolve function, it will crash hte page without warning. The usual cause of this kind of error is missing dependancy.

6.When using static images, make sure images are reference from “./“;

7.Local HTML5 videos don’t work properly in android. Just don’t do it. Just transform the video into gif and display it to save your sanity.
For videos that are external use the following script:

1
2
3
<video class="media-video" preload="auto" webkit-playsinline controls poster="./img/posterdefault.jpg">
      <source type="video/mp4" ng-src="{{trustSrc(media.video)}}"></source>
  </video>

I put a poster that matches the background of the page so it looks like the video just pops up and shows. Otherwise, you will see an ugly poster while it loads.
The video will always take time to load so you need the poster.

8.Make sure that each route you make has cache: false so when you navigate using href tags, it reloads the page from scratch or the page will look the way before navigating.

9.Failure [INSTALL_PARSE_FAILED_INCONSISTENT_CERTIFICATES]
This error means that you installed the apk from one machine and trying to install it with a different machine.
Delete the old app and create new one.

10.When using push notifications, make sure you add both ipv4 and ipv6 ips to google gcm.

  1. When using the command “transform:translateX(100%)” remember to use this instead on android “-webkit-transform:translate3d(100%,0,0)” .

12.What you see in browser is not how it will look in the emulator. What you see in emulator is not what you see in the device.

##Tips

1.Setting up Android environment on phone.

  • Turn on your phone
  • plugin your phone to your computer
  • Go to Settings
  • Go to Developer Options
  • Go to USB debugging and uncheck to check, it will ask you to verify your fingerprint
  • go to the terminal and type “adb devices -l” to see your device is connected
  • go to chrome hamburger -> More Tools -> Inspects Device
  • check your device is there

  • run

    1
    ionic platform add android

  • run

    1
    ionic run android --device

2.Dynamic Source for img and videos

  • if you need to put dynamic url into a video or image you have to sanitize it or chrome complains
    1
    2
    3
    4
    5
    function controller(scope, $sce){
        scope.trustSrc = function(src) {
              return $sce.trustAsResourceUrl(src);
        }
    }
1
<img ng-src="{{trustSrc(source))}}"/>

3.Screenshoting screen in android
Hold power button and down volume to screenshot