Incorrect script paths in Android 4.4

[mnaughto]

I've got a trigger.io app which I've been testing on the various Android versions. The latest version, of course, introduces a new WebView, and it seems that jQuery Mobile does not work very well with that. Here's why.

In previous Android versions, the app worked as expected, but when I tried on 4.4 (in the emulator), I eventually realized that none of the external scripts that occurred after the jQM in the DOM were being loaded. A little more investigation yielded that this was because the script addresses were being changed to "content:////com.xxxxx.app/(script address)". Using $.getScript(), I found that script addresses starting with content:// worked fine, whilst those starting with content://// resulted in a "Failed to load resource" error.

I'm nowhere near an expert on the inner workings of jQM. Is there a place where script tags would get rewritten like this?

[arschmitz]

Thank you for reporting this. Please see our contributing guidelines https://github.com/jquery/jquery-mobile/blob/master/CONTRIBUTING.md and create a jsbin testpage demonstrating the issue with latest code and we will look into this further. for now im going to close this as incomplete. We will reopen when a test page is provided. even if you cannot reproduce in jsbin at least then we can see your code however jqm does not re-write script tags in the head of your page.

[mnacos]

How is a jsbin appropriate in this case? What mnaughto has reported is that jqm + trigger.io is completely broken on android 4.4 (KitKat).

The new WebView does not work with the way jqm uses URLs/location/hash, it's probably related to https://developer.android.com/guide/webapps/migrating.html#URLs and/or some sort of URL normalization this new WebView does.

I also maintain a jqm/trigger.io mobile app and this issue is a big deal. Most modern android phones/tablets will soon offer an upgrade to KitKat.

[jamesjnadeau]

I think some example code to run would help others reproduce the issue.

What version of jqm was used?

I'm looking at this and wondering the exact "script address" that is being provided and if it conforms to RFC 3986.

Are you sure it's not the browser implementation of trigger.io that is causing the rewrite? Looks like a cors protection built in to the browser. I bet there is a setting that would be provided in example code we could see if it is missing.

Another question a jsbin would provide is the jQuery Mobile init settings, such as ".phonegapNavigationEnabled", or "allowCrossDomainPages".

The deeper I go, the more I think a jsbin would help clear some questions up that could help you solve this issue.

Would love to help you figure this out!

[arschmitz]

exactly as @jamesjnadeau has said we need to see some code we cant just poke around blindly hoping to find the issue when it could very well be an issue in your own code outside jquery mobile or in triggerio with out an example page we cannot help or really look into this issue if we have sample code posted in jsbin then we could attempt to build and debug the app ourselves.

However having said that the link posted by @mnacos leads me to believe this is not an issue with jqm as we do not use custom urls for anything and in fact you write all your own urls in jqm for links scripts etc.

If someone can post code demonstrating an actual issue with jqm causing this we will be happy to reopen this issue and investigate this further.

[mnacos]

Thanks for your quick replies. It may well be a trigger.io issue or the combination of trigger.io + jqm.

In my app I use relative paths, e.g. href="settings.html" or src="js/app.js", these work fine in all other jqm setups I have tried.

Will put together a small jqm app with the setup I use and let you know, but you won't be able to reproduce anything without access to trigger and a KitKat phone/emulator.

[mnaughto]

Admittedly, I don't want to spend much time on this, because this works for us on iOS and several versions of Android, but I'll try to add a little more information.

I can't create a jsbin (or similar) to demonstrate the issue because, to my knowledge, I wouldn't be able to use a relative script URL. Relative URLs are needed to locate the scripts packaged with the application because iOS and Android (and probably Windows Phone, etc.) store the files at different absolute URLs. I can't demonstrate with absolute URLs because, for one, they work just fine, and for two, I'd have to put all the files up on a server.

However, here is a slightly-obfuscated version of my index.html page, which is the only html page in the app.

<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>Title</title>

<!-- Libraries. -->
<script src="libraries/lodash/lodash.underscore-1.0.0rc3.min.js"></script>
<script src="libraries/jquery/jquery-1.8.3.min.js"></script>
<script src="libraries/backbone/backbone-1.0.0.js"></script>
<script src="libraries/jqueryui/jquery-ui-1.10.1.custom.min.js"></script>
<script src="libraries/touchpunch/touch-punch.min.js"></script>
<script src="libraries/h5bp/js/modernizr-2.6.2.min.js"></script>
<script src="libraries/h5bp/js/plugins.js"></script>
<script src="libraries/bootstrap/js/bootstrap.min.js"></script>
<script src="libraries/handlebars/handlebars.runtime-1.0.0rc4.js"></script>
<script src="libraries/fastclick/fastclick-0.4.6.js"></script>
<script src="libraries/firebase/firebase.min.js"></script>
<script src="libraries/iscroll/iscroll.js"></script>
<script src="libraries/jqtransit/jquery.transit.js"></script>
<script src="libraries/jqmobile/jquery.mobile.custom.js"></script>
<script src="libraries/jqmobile/verticalSwipe.js"></script>
<script src="libraries/backbone-firebase/backbone-firebase.js"></script>
<script src="libraries/moment/moment.min.js"></script>
<script src="libraries/sylvester/sylvester.js"></script>

</head>

<body>
<div id="navbar" data-role="header" style="position:fixed; ">
    <!--<h1 id="page-title"></h1>-->
</div>
<div id="trayView" class="TrayView" style="display: none;"></div>
<div id="notificationBar" class="NotificationBar" style="display:none;"></div>
<main id="main" class="ui-mobile">

</main>
<div id="controlboard"></div>



<!-- Application Templates -->
<script src="app/scripts/Precompiled.js"></script>

<!-- Application source. -->
<script src="app/scripts/Source1.js"></script>
<script src="app/scripts/Source2.js"></script>
<script src="app/scripts/Source3.js"></script>

<!-- Models -->
<script src="app/scripts/models/Model1.js"></script>
<script src="app/scripts/models/Model2.js"></script>
<script src="app/scripts/models/Model3.js"></script>

<!-- Views -->
<script src="app/scripts/views/View1.js"></script>
<script src="app/scripts/views/View2.js"></script>
<script src="app/scripts/views/View3.js"></script>

<!-- Event Registration -->
<script src="app/scripts/RegisterEvents.js"></script>

<!-- Main Entry Point -->
<script src="app/scripts/Main.js"></script>

<script src="libraries/ladda/spin.min.js"></script>
<script src="libraries/ladda/ladda.min.js"></script>
</body>
</html>

Where jquery.mobile.custom.js is actually just a renamed jQuery Mobile 1.3.1 distribution. If you create some of these dummy files, put everything in the right place, and load this on Android 4.4, preferably as a trigger.io app, you'll get a "Failed to load resource" error (due to a URL with two many slashes after the protocol) for every script referenced after the jQuery Mobile script, while jQuery, underscore, etc. load just fine. Furthermore, if you comment out the reference to jQM, all of the other scripts will load. Moreover, if you move the reference to jQM around, you'll fine that all those scripts loaded after it will result in an error, while those loaded before it come in just fine.

Is this enough information to work with?

[mnacos]

Hi again,

here is a minimal jqm app which works fine in the browser/ios/previous versions of android but doesn't work as a trigger.io-bundled app on android 4.4 (kitkat). Surprisingly, after-jqm.js loads fine, I wonder if this is a timing issue, there are many more js files loading after jqm in my real app. But relative paths do not seem to work, e.g. clicking on the Settings button takes you nowhere and the included images are not found.

https://github.com/mnacos/jqm-kitkat

any feedback will be appreciated.

Michael

[mnaughto]

I am confused: is the intent to have after-jqm loaded before jqm? That's what's happening right now in index.html.

Thanks for putting this app together.

On Dec 4, 2013, at 7:49, Michael Nacos notifications@github.com wrote:

Hi again,

here is a minimal jqm app which works fine in the browser/ios/previous versions of android but doesn't work as a trigger.io-bundled app on android 4.4 (kitkat). Surprisingly, after-jqm.js loads fine, I wonder if this is a timing issue, there are many more js files loading after jqm in my real app. But relative paths do not seem to work, e.g. clicking on the Setting buttons takes you nowhere and the included images are not found.

https://github.com/mnacos/jqm-kitkat

any feedback will be appreciated.

Michael

—
Reply to this email directly or view it on GitHub.

[mnacos]

good catch, fixed the order now. But the main message here is all relative paths don't work, not just scripts, but html files, images and so on.

[zyzyxdev]

I have the exact same problem ( no trigger.io). This is an app-breaking issue and I'm in kind of a hurry. Has anyone found a workaround of some sort yet?

[mnaughto]

One "workaround" is to just use absolute URLs for everything. But that might be tricky, depending on your app setup.

On Dec 11, 2013, at 3:43, zyzyx2311 notifications@github.com wrote:

I have the exact same problem ( no trigger.io). This is an app-breaking issue and I'm in kind of in a hurry. Has someone found a workaround of some sort yet?

—
Reply to this email directly or view it on GitHub.

[mnacos]

is jqm rewriting the urls to be content://// instead of content:// ? got some webview feedback here: http://stackoverflow.com/a/20474191/170226

[fjsj]

pull-request #6811 fixes this. Thanks to @mnaughto

For those who need 1.3.2 with those fixes, you can pull the fix-issue-6810 branch of this fork and build it with grunt js:release

[mnacos]

thanks @mnaughto it works