Search code examples
javascriptjqueryioscordovawebkit

jQuery / Cordova history issue - iOS 9 history broken?

i'm just working on an application. After i started last week i added a few pages. Today i tried to implement the backbutton and i lose my head... four hours now i tried to get it working but i'm not able to because there are some strange behaviours in iOS 9.

So my hardware setup for better understanding:

  • Mac Mini - OS X - Yosemite 10.10.5
  • iPhone 6S - iOS 9.0.1 (13A405)
  • iPhone 6+ - iOS 9.0 BETA (13A4305g)
  • iPhone 5 - iOS 9.0 (13A344)
  • iPad 4 - iOS 8.3 (12F69)

My application setup for better understanding:

  • Cordova at version 5.3.3
  • Cordova platform iOS at version 3.9.1
  • jQuery at 2.1.4 minified
  • jQuery mobile at 1.4.5 minified

The problem

So i want to implement a back button inside my application via jQuery. Normaly the way would be to add a href with attributes like data-rel="back" and data-transition="reverse". So my code looks like this:

index.html 

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.4.5.min.css">

    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <title>Hello World</title>
    </head>
    <body>
        <div data-role="page" id="page1">
          This is page 1<br />
          <br />
          <a href="#page2" data-transition="slide">
            Go to page 2
          </a>
        </div>

        <div data-role="page" id="page2">
          This is page 2<br />
          <br />
          <a href="#" data-rel="back" data-transition="reverse">
            Go back to page 1
          </a>
        </div>
    </body>
</html>

The back button is not working in iOS 9 and iOS 9.0.1. In iOS 8.3 everything works fine. So is there anything known about this issue? Someone heard about it? Or am i totaly wrong and did something the wrong way? As i'm not able to test it on android it would be great if someone could do this.

http://codepen.io/anon/pen/vNyrgB

Waiting for your feedback now... Thanks in advance!

Solution

  • 1) iOS9 is broken in many places. 2) In addition, over the weekend Phonegap Build made an unannounced upgrade to the default build.

    Here is what you need to know, but there is more that I do not have here.

    1. iOS9 is now supported.

    As of Nov 2, 2015, iOS 9 is supported by Cordova

    Apache Cordova iOS 3.9.2
    http://cordova.apache.org/announcements/2015/11/02/cordova-ios-3-9-2.html

    ## 1. No support for iOS9 YET! ##

    PhoneGap Build iOS 9 Support Status

    At this point in time, 4 bugs are reported to the Cordova Bug repository. Your issue does not appear in the respository - as of this date.

    2. Not setting compiler version

    From the Phonegap Build Forum, Petra Adds:

    I would add: without announcement, PGB changed the default PGB-version from 3.7.0 to cli-5.2.0. This causes all those who have not set 'phonegap-version' in config.xml to be confronted with the sudden need of splashscreen and whitelist plugins and additional whitelisting specifications in config and html.

    Also, several plugins seem not to build correctly with cli-5.2.0, causing log file error messages about "Class ***.java".

    FWIW: Phonegap Build admitted to as much in this tweet

    From Top Mistakes by Developers new to Cordova/Phonegap you have hit:

    • #6 Not setting the "phonegap version" for your compiler
    • #7 Not setting "version" for you plugins
    • #10 Not adding the new "white-list" and "white-list plugin" parameters in config.xml.

    For #6 & #7

    With the CLI version, if you do not assign a version for your platform OR in ''Phonegap Build'' if you do not set the phonegap-version in config.xml, YOU WILL GET THE LATEST VERSION. If you are lucky, your program just works as expected. If you are not lucky, you'll get a set of cascading error.

    Luckily for all of us, Holly Schinsky has written a nice blog post to explain it all:

    Cordova/PhoneGap Version Confusion
    http://devgirl.org/2014/11/07/cordovaphonegap-version-confusion/

    For #10

    This relatively * NEW * requirement means – to access ANY website or resources on the web, you MUST use the whitelist and the whitelist plugin. This requirement goes into affect, if you are using [email protected] or better; including cli-5.1.1. If however, your version is before 4.0.0, let use say 3.5.0 or 3.7.0, then you will not have to add the white-list requirement.

    To be clear, the "whitelist" has been around for a bit, but the plugin and requirement is very new. As you would expect, when the "whitelist" was added, the defacto open-access feature was deprecated. Or said another way, the defacto open-access feature was planned and scheduled to be eliminated. This change marks a step in removal of the open-access feature.

    In addition, the Content Security Policy (CSP) has caught numerous developers - because it was soooo poorly publicized. This CSP needs to go in every single HTML page you used, just like you have to wait for 'deviceready'. The documentation is buried in the bottom of many of the latest documentation pages.

    Related Links

    Phonegap Build Forum: Notes for upgrading to cli-5.1.1 on PGB and now required Whitelist