Nav: Race condition navigating to another page after initial page load causes reload of initial page

[dpolivy]

Scenario:
In iOS apps, one can register a custom URL scheme, so you can deep link to your app from the web/other apps. In Cordova, this is exposed via a handleOpenURL global function that you implement. With jQM, I want that function to essentially call $(':mobile-pagecontainer').pagecontainer('change', url) to navigate to the deep linked page.

Note, while this issue was discovered in a Cordova app, I was able to reproduce it quite easily in the browser, so going forward we will assume the browser case as the main scenario as it's a lot simpler to manage.

Repro:

1. Open Chrome/Safari (I tested Chrome on Win7 and Safari on iOS), possibly in a private mode window to keep it 'clean'.
2. Navigate to http://jsbin.com/gogat/1

Expected:
The browser will load the initial page, and then navigate to "Page Two". You should end up on "Page Two".

Actual:
The browser loads the initial page, navigates to "Page Two", and then quickly navigates back to the initial page. Note, the URL bar still thinks it is on "Page Two"!

Thoughts
I've done a bunch of debugging on this, and as best I can tell what's happening is that the initial popstate event that is fired by Chrome and Safari is getting delayed until after the navigation to page two has occurred. Thus, when the initial popstate gets here, the conditions to trap it fail (since there are two pages on the history stack, AND the current URL !== the initial page URL), and it ends up propagating and causing a navigation back to the initial page.

If I delay the navigate call by a long time, say 5 seconds, then you don't see this race condition.

[frequent]

I'm using this self-written navigation gadget navigation.js which allows to deeplink and query-param with JQM.

I have been using it for a while although not with page container, but the logic should be the same. Feel free to pick out the relevant parts.

Regarding your "issue", I'm sure it is related to what's being set on initialDist. I was messing with deeplinks for quite a while so this code from navigationHandler will probably be all you need. Call it on pagebeforechange.

 if (e && data) {
    dist = $.mobile.navigate.history.initialDst;

    if (typeof data.toPage === "string") {
        ...
    // deeplink
    } else if (dist && window.location.hash !== "") {
        clean_url = window.location.href.split("#")[0];
        parsed_url = $.mobile.path.parseUrl(clean_url);
        decoded = decodeURIComponent(window.location.href).split("?");
        target = decoded[0].split("#")[1];
        has_query = decoded[1];
        page = document.getElementById(target) ||
                getElementByDataUrl(target);
        deeplink = true;

        // remove initialDist, otherwise closing popups
        // will trigger double backward transition.
        delete $.mobile.navigate.history.initialDst;

        // correctly set index as first page in JQM history
        $.mobile.navigate.history.stack[0].hash = "";
        $.mobile.navigate.history.stack[0].url = clean_url;
        $.mobile.path.documentUrl = parsed_url;
        $.mobile.path.documentBase = parsed_url;
        }
    }

[dpolivy]

@frequent Thanks for sharing, I'll take a look and see if it helps me with a workaround. I'm loading in pages externally, so it's a bit more complicated than the code above, I think.

It'd be great if this issue could be addressed directly in jQM.

[frequent]

@dpolivy: I'm also loading pages externally or generating dynamically so the above should help. Just replace createNewGadget with your method loading the new page and appending to the DOM.

Afaik deeplinks will be supported in JQM 1.5

[dpolivy]

I was able to put together an easier workaround without rewriting all of my navigation code. Still a bit hacky, but so far it seems to work:

// Detect the initial 'popstate' fired by WebKit (and defaultPrevented by jQM)
var sawInitialPopState = false;
$(window).one('popstate', function(e) {
    if (e.originalEvent.state === null && e.isDefaultPrevented()) sawInitialPopState = true;
});

// Global function to handle opening a custom URL scheme (for iOS apps)
// https://github.com/apache/cordova-ios/blob/master/guides/Cordova%20Custom%20URL%20Scheme%20Handling.md
function handleOpenURL(url) {
    $.mobile.loading('show');

    // Just to be safe, run these in the next clock loop
    setTimeout(function() {
        // If we haven't seen the original popstate event, we just load the
        // page but don't navigate to it; if we have seen the event, we can
        // navigate right there
        $(':mobile-pagecontainer').pagecontainer(sawInitialPopState ? 'change' : 'load', url);

        // Wait for the initial popstate before kicking off the navigate, if necessary
        if (!sawInitialPopState) {
            $(window).one('popstate', function() {
                setTimeout(function() {
                    $(':mobile-pagecontainer').pagecontainer('change', url);
                }, 0);
            });
        }
    }, 0);
}

Of course, with this solution you still see the initial page for a few seconds before the other page loads, but I don't consider that a big issue.

One route to fix this in jQM would be to adjust the initial popstate suppression code to potentially handle cases where that event is delayed and fired after a navigation to another page has already occurred, or even delay subsequent navigations internally until that has happened.

[dpolivy]

It looks like this is the original bug tracking this issue in Chromium: https://code.google.com/p/chromium/issues/detail?id=63040

It seems a fix has landed in Chrome v34+ (e.g. Android 5+), meaning this workaround is no longer necessary for those devices when embedded in a Cordova app. It is still necessary for Safari and prior versions of Android/Chrome, though.