I am trying to render in my Android app a page created using jQueryMobile, but I need to do it in a webView, in an offline state.
For that purpose, I started copying the index.html of my page and taking all the required assets straight to the internal storage of my device. I then loaded it up typing file:///sdcard/index.html in both the internal browser of my device and the Chrome app, and the website showed up just fine, with jQuery styles and all.
Then I move in to my app, where I have a webView, and that's where I actually need to render the aforementioned page. I load the page using loadDataWithBaseURL() (because that's what I ultimately need to do) like this:
loadDataWithBaseURL("file:///android_asset/web/", html, "text/html", "UTF-8", null);
I keep all my assets in the web directory of my assets folder.
The problem is, if I load the page without the assets reference (just normally calling loadUrl) it loads but obviously without styling or functionality. When I put the assets reference calling loadDataWithBaseURL it IS indeed reading the asset reference properly but the rendering is stuck with jqueryMobile's spinning wheel and the page never actually loads. This is what I see:
So to sum it up:
I have created a website using jQuery Mobile. It's just a simple html
page with jQuery's styling.
I have prepared it for offline loading. I packed the required assets
into a folder and in the index.html I reference these assets relatively (e.g. href="web/styles.css").
If I load this page in my desktop browser, without connectivity, it
works.
If I load this page in my mobile browser (Chrome or the internal
one), it works.
If I load this page without the assets references in my webview,
it works (without styling or images, etc.)
If I load this page with the assets reference in my webview, it
does not work, it's stuck with the spinning wheel. Connectivity does not affect the issue.
If I remove the line that references the jQM stylesheet, then the page is
loaded without its styling, but images are loaded properly (so the
reference to the assets is correct)
Note that the spinning wheel shouldn't even be appearing in the first place since I completely disabled AJAX in jQM using:
<script>
$.mobile.ajaxEnabled = false;
</script>
The odd thing is that AFAIK the internal Android web browser and webviews share the same renderer, so I'm lost as to what could be happening here, and since it works okay with regular browsers, I can debug what's happening.
For reference, this is how I define my webView:
mWebView = (WebView) findViewById(R.id.webView);
WebSettings s = mWebView.getSettings();
s.setJavaScriptEnabled(true);
I had a bunch of other settings but for the sake of simplifying the problem I removed them and the issue persists.
Any suggestions?
PD. As requested, posting the index.html file. This is the simplest example, just an empty index. The problem persists:
<!doctype html>
<html lang=es>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="format-detection" content="telephone=no" />
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<head>
<title>
My title
</title>
<script>
$.mobile.ajaxEnabled = false;
</script>
<script src="script/jquery/jquery-1.9.1.min.js"></script>
<script src="script/jquery/jquery.mobile-1.3.2.min.js"></script>
<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" media="screen" type="text/css" />
</head>
<body>
</body>
</html>
See Question&Answers more detail:
os 
