I am part way through developing a mobile web app which contains almost no HTML elements. JSON2HTML is used to create HTML elements.
My problem is that it works ok except for on
iPad
Android 4.0.3 Native browser.
The problem with these browsers is that the content isn't being rendered.
It works fine on
Android 4.0.3 Chrome,
Android 4.0.3 Firefox
Android 4.0.3 Opera
Android 4.0.3 Dolphin
Android 4.1.1 Native
Android 4.1.1 Other browsers
Just to clarify, this is a mobile web app, not a native mobile app. I am not using any native code, I am using standard web technologies (HTML5, CSS3, jQuery, Javascript, JSON)
After days of research and testing, I have found the solution.
First I activated the built-in debugger on my Android phone - instructions at http://tinyurl.com/768qltl
The debugger then told me that the error was at line 71 of jquery.json2html.js
I opened jquery.json2html.js
I replaced line 71 with the following code
else $.fn.append.call($(this),$(dom).children());
This works because the previous line 71 was calling the jquery append.apply function, which only works with specific data type on older browsers.
Your best bet would be finding a way to remotely debug what's happening in the native browser. There are a couple ways to do this.
Install an app like JsHybugger, which acts as a reverse proxy
Add some new JavaScript to the source page and use Weinre, JSConsole, or to attach remotely
Related
What features (HTML, JS, CSS, Web APIs), outside of plugins, are available in a cordova web view ? I am making a web app, and then I use cordova to create an apk file. The web app works fine with chrome and firefox for android. But when I try the generated apk on the same android device and the emulator the JavaScript is obviously not executed because buttons have no effect.
The initial HTML and CSS display fine, and I think I use some JavaScript or HTML5 features that are not available yet on cordova web view, but I don't know what I can use and what I cannot. I had a look at the emulator's error log but I get nothing meaning-full.
For example is it possible to use es2015 without transpiling, esModules etc, but I don't know where to look it up. What is the difference between a webview browser and chrome/firefox for android.
Targeting Android 4 and later.
https://cordova.apache.org/
It's probably easiest to look at the architecture diagram: https://cordova.apache.org/docs/en/latest/guide/overview/index.html.
Cordova apps consist of a small wrapper around a WebView (this is a "window" of the default browser installed by your mobile OS, although you can swap it out for another: https://cordova.apache.org/docs/en/latest/guide/hybrid/webviews/), with access to the mobile device's features via plugins. So... to answer your questions:
You can use any technology that's supported by the mobile browser you're working in. https://caniuse.com is super helpful in this regard.
You will also find that Android 4.x's stock web browser is not that great -- some of the shiny new popover UI stuff (walkthrough help and light boxes) will render, but the z-order is all messed up when you try to click to the next item. I've run into other issues as well, but I can't remember them off the top of my head.
The Crosswalk project allows you to embed a Chrome browser web view in older Android versions (back to 4.x I think). Support for this project has been discontinued in the latest Cordova releases, as it's no longer necessary.
So the case is - when I run my website under Android Chrome, it's all ok, but when I open it up in the default "internet" app, it doesn't render some html markup and js is run only to some extent. I used the Aurelia.js framework for coding it. How can I debug this behavior? Is there a way to somehow see the errors in js console on Androids default internet app?
it depends on a version of android you're testing on
as google says
Since Android 4.4 (KitKat), the WebView component is based on the Chromium open source project. WebViews now include an updated version of the V8 JavaScript engine and support for modern web standards previously missing in old WebViews. New Web views also share the same rendering engine as Chrome for Android, so rendering should be much more consistent between the WebView and Chrome.
https://developer.chrome.com/multidevice/webview/overview
So if you testing on android version before 4.4 you may not test it on chromium based browser
Is there a reason why an HTML5 app that works fine in browser would work differently when compiled with Cordova for Android?
Does cordova not support all the same things as the browser?
Im mainly thinking of / referring to the way JavaScript works.
Cordova itself does not handle the presentation layer of an application. Cordova creates a basic, single view, native application wherein the single view is a webview. A webview is native to the platofrm/SDK that the application is implemented in.
Because webviews are packaged with the SDK, they are not updatable like the browser that is on the device. This means that code you create may run just fine in a browser on the device but may not run in the native webview. Additionally, your code may work on a newer version of the platform/SDK and not on older versions.
If you are experiencing an issue with a particular item being used in a webview, it is best to look up the capabilities of that particular webview from the platform/SDK version you are seeing issues with.
An example would be using the latest version of Cordova to build an Android application making use of canvas elements. If you deploy the application to a device running Android 5.0 you will have no issue, but if you deploy the same application on a device running Android 2.3.4 your application will appear to not function. This is not because of Cordova, it is because of the capabilities of the webviews in the various platform/SDK versions.
One way to try and safeguard against these types of issues is to make use of a framework. The reason being that most frontend frameworks have builtin fallbacks for compatibilities with various versions of webviews/browsers/etc.
Because Cordova uses the native browser view. Some JS implementation can differ from Chrome, Firefox, and so on.
That's mainly for security reason, or for webview itself (depending of the platform) you may have some limitations or differences.
Since PhoneGap runs an html page in a native app container, I suppose I require some kind of browser to do that.
Which underlying Browser does PhoneGap use on Android? Is it the default installed browser or does phonegap has its own? Or is it Chrome?
Phone Gap (Cordova) currently uses the standard Android WebView which is a stripped down version of a browser (based on a particular version of WebKit).
It can't really be the Chromium-based WebView yet, that was just made available as a component to third party developers only recently in Android 4.4.
And as of April 1st 2014, Android 4.4 (KitKat) constitutes only about 5.3% of all the Android versions (not to mention, this new Chromium-based WebView still seems to be a work in progress, so it will take a while for most third party developers to feel completely comfortable with it).
I'm developing an iPad Web App for a client. Unfortunately I don't have an iPad to test the app, so I tried testing it on my iPhone. I entered the following URL in Mobile Safari and it alerted me that the method is undefined:
javascript:alert(Object.defineProperty);
I need to know however if it'll work on the iPad. Additional information about getter/setter support on the iPad is appreciated.
I've only tested 4.3, but it looks like it is supported for JS objects, but not DOM objects... just to be different from IE8 which is the opposite.
If you have access to OSX, I recommend downloading XCode --it comes with a useful iOS emulator for the various devices.
Also, this link might be useful, as it contains a table of ECMAScript 5 features, even though it does not mention the DOM restriction.
http://davidbcalhoun.com/2011/new-mobile-safari-stuff-in-ios5-position-fixed-overflow-scroll-new-input-type-support-web-workers-ecmascript-5