JQuery back button broke using cordova after ios 9 update

Recently an application I have been working on was ready for the App Store , but then came an iOS update and all of a sudden things went wrong. (big BOOOOO)

Android device still working so I knew it wasn’t the code base. The application had already been tested on iOS devices and was fine. I did a bit of googling and found a few people moaning about the iOS 9 update.

I had strange behavior where the back button wouldn’t work and also sometime the back button would take me to a different page that was unrelated to the state in the navigation history , uh!.

Ok so the simple fix is to add the following two lines.


$.mobile.hashListeningEnabled=false;
$.mobile.pushStateEnabled = false;

Reference for the solution (combo of the two)

http://stackoverflow.com/questions/32820224/jquery-cordova-history-issue-ios-9-history-broken
https://forum.jquery.com/topic/page-navigation-issues-under-ios9-beta

You can add some logic to determine when to put this in for iOS but I simple added a merge file specifc for apple as the settings shouldn’t be changed for Android as that doesnt have the issue.

Happy Bug Fighting!

Cheers

Neil

Advertisements

Debugging Phonegap on Android With Chrome

I have been working on a project that involves phonegap at work and I was going crazy trying to sort out some of the strange design problems when publishing my application to a physical mobile device.

There are tools out there like ripple for emulating phonegap , you can even use the chrome tools to set the device and emulate it to a fashion, but it always looked different on the physical phone ( arrrrrrrrrrh! moments ).

So how do we solve this ?

Ok, lets first outline some of the prerequisites as I hate following a post to find that it wouldn’t work because I didn’t have the correct versions anyway.

Prerequisites

  • Phonegap 3.3 ( or higher)
  • Android Device (kitkat or higher)
    *note your device needs to be in developer mode.
  • USB Cable (normal charger cable)
  • Chrome (30 or higher)

Required project changes.

In your ‘AndroidManifest.xml’ you will need to make sure you are targeting the SDK version 19 (kitkat).

<uses-sdk android:minSdkVersion="15" android:targetSdkVersion="19" />

The ‘project.properties’ will also need to target the correct Sdk Version. Alter the target as follows;

target=android-19

Phonegap basically wraps your HTML into whats called a WebView, so the next step is to enable debugging for this special view.

Update your main java file (default activity) and include the following imports to the top of the file.

import android.os.Build;
import android.webkit.WebView;

Then within the onCreate method you can enable debugging buy checking for the build version and enabling debugging for the WebView;

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}

You are ready to then build your project and publish it to your device.

Inspecting from Chrome.

Your can start your app on the mobile now or later , but you must make sure you have it connected via the normal USB cable.

In chrome type the following address to list the connected devices.

chrome://inspect/#devices

You should then see your device and project name shown after the WebView.

phonegap-chrome-debug

Clicking the inspect link then loads up the wonderful Chrome Dev tools we ahve all come to love and now you can see and change the HTML that is running within the Phonegap framework ( pretty cool ).

Happy Debugging…

Neil