I recently tried out the applicationCache / offline web apps on Android 2.1's WebKit and unfortunately it does not work exactly like on a webkit on the iPhone. I was wondering how I can easily see what features should be implemented and if there is something like a roadmap?
Does that information somewhere exist?
Related
When writing CSS and JS for Cordova apps, how do I figure out which features are available to use? When I go to caniuse.com, am I looking at iOS Safari and Android Browser or Chrome? Is there a table somewhere that will help me map Cordova versions, OS versions, and browser versions?
I've been stung once by the JS await operator not working in an app that I thought would work in iOS 10.1. I'm now not sure how to tell what's the oldest Android version on which that app will work. And I'd like to be able to figure out which features are usable based on an OS decision predetermined by my clients or managers.
This is a very good question and one that cannot be answered with a single sentence. I can share some experience though:
Android vs. IOS
IOS is the most predictable as all Apps have to use the same WebView that comes with the OS. When you set a minimum IOS version (for example 10.0) you can look up supported features for Mobile Safari on caniuse.com.
Android is a completely different story as there is absolutely no way to predict which WebView the user is using. It will usually be some version of Chromium but starting from Android 5 it can be updated independent from the OS via the Play store. If you absolutely must support Android 4 you could create a separate build and using Crosswalk (unmaintained but still working) to get a predictable WebView.
JavaScript / CSS
If you're using Ionic then JS will usually be less of a headache as you develop in TypeScript and transpile to ES5. For CSS on the other hand you will have to resort to the usual browser checks / hacks / fallbacks as we did back in the days when we had to deal with browsers like IE6.
I'm trying to build an application which must be cross platform and must work like a native android app. I have built apps on phonegap but never i have got a native app like feeling. Is there is a framework or anything of that sort which might help me to achieve this?
So far i have used
Jquery mobile, phonegap, appcelerator, trigger.io
Any advice suggestions and help are welcome.
And also i got this feeling or need when i came across this http://www.aldomatic.com/jqm/fb-menu-style/index.html and i wanted to build a facebook like menu which feels more like native but it should be HTML5 based app.
Unfortunately I cant think of any mobile web framework that will provide you full Android look and feel. There's only iOS look a like framework called Kendo UI.
Best thing you can do is stick with jQuery Mobile and use a theme that has a closest resemblance to a native Android look and feel.
There are 2 of them, some older and some newer:
https://github.com/enathu/jqmobile-android-holo-light-theme (Android 4 look)
https://github.com/jjoe64/jquery-mobile-android-theme (Android 2.X look)
Also jQuery mobile 1.3 has a sliding panel you showed us in your link. Even better, sliding panel used in your link is the jQuery Mobile panel.
I've recently found this one
http://www.jquery4u.com/mobile/nativedroid-free-theme-jquery-mobile-1-3/
it's the closest to native android theme i have found.
Hope it helps!
What are the situations a developer need to use HTML5 in android.
I am bit confused about when to use HTML5 in android.
I need to develop an application like a report viewer from web server.
In this case i also need to use some Android specific features like service, preferences, receivers, charts (with the help of third party library).
So i am little confused about what are the good situations to HTML in android apps...
Please help me by your suggestions or direct me a better article about this...
Please read this pdf . You can get better idea where to use html or where to use native android apps.
Android is to date the platform with many variants of using different browsers: WebKit-based Android browser, Opera Mini, Opera Mobile, Firefox, UCWeb, Google Chrome Android browser.
The default Android browser has some problems with HTML5. And the Chrome for Android is designed to solve it. It has almost perfectly latest HTML5 support: such as new elements, video –H.264 and WebM support- and audio tags, geolocation, hardware accelerated canvas (2D drawing), and all the CSS3 stuff, such as selectors, effects, media queries, transforms, transitions and animations, ect.
But while it's still not very popular because this new browser isn't available yet for Android 2.x and 3.x version, just for 4.x.
I want to develop a HTML5 Web App.
I read that in HTML5, you can use the new feature "Offline Web Applications"
With the *.manifest file
I read an article from november 2010, that this feature only works on the iOS platform.
Does it work on Android now?
Yes. It works on Android as well as iOS and most desktop browsers. You don't need PhoneGap unless you want to access native features or deploy to the App store.
UPDATE:
Check out this chapter from Jonathan Stark's book: Building Android Apps with HTML, CSS, and JavaScript.
In general, http://mobilehtml5.org/ provides nice mobile compatibility tables to answer this and other similar questions.
Yes it can. Here's an example for an offline game:
http://www.davidgranado.com/2010/11/make-a-set-mobile/
The one thing that sucks is that iOS generates a nice icon automatically. However, android doesn't. Also, I noticed that on random versions of android, it will display an error popup about the fact that it can't connect to the internet, but still runs fine after that.
Does anyone know of a way in which you can deploy a WebGL app as a native iOS or Android app? Commercial middleware is acceptable, although an open project would be preferable. Thanks.
As an extension to Joris' answer (which appears to be based on the work of Nathan de Vries), the following is the code I needed to enable WebGL within the iOS 5.0 SDK:
Somewhere near the top of your view controller implementation:
#interface UIWebView()
- (void)_setWebGLEnabled:(BOOL)newValue;
#end
Programmatically creating a UIWebView and enabling WebGL:
UIWebView *webDetailView = [[UIWebView alloc] initWithFrame:mainScreenFrame];
id webDocumentView = [webDetailView performSelector:#selector(_browserView)];
id backingWebView = [webDocumentView performSelector:#selector(webView)];
[backingWebView _setWebGLEnabled:YES];
I created a sample application that demonstrates WebGL running in a iPhone / iPad fullscreen UIWebView, using the WebGL scratchpad site http://glsl.heroku.com as a destination. Be wary that some of those examples there will grind even an iPad 2 to a halt, potentially leading to a hard reboot. The performance there seems to indicate why WebGL is still in an officially unsupported state in mobile WebKit.
Of course, as has been stated, this is not guaranteed to work on future iOS versions and will get your application rejected from the App Store. This is only really useful for hobby work and internal testing.
An example of WebGL running on my iPad 2:
WebKit on iOS actually supports WebGL, as of 4.x (not sure which .x version). It is enabled in the webview used by the iAd framework, all other uses of WebKit (Safari and UIWebView) have WebGL disabled.
It is possible to enable WebGL using private API's (this will not pass the submission process). In your webview subclass:
- (void)setWebGLEnabled:(BOOL)enableWebGL {
UIWebDocumentView* webDocumentView = [self _browserView];
WebView* backingWebView = [webDocumentView webView];
[backingWebView _setWebGLEnabled:enableWebGL];
}
(via)
This will at least allow you to start experimenting with WebGL on iOS.
Not sure about WebGL support on Android. Fairly recent comments on the issue in the Android tracker suggest it is not available yet.
A nice support table for WebGL in (mobile) browsers: When can I use WebGL
Best way to go for now seems to be to include your own WebGL enabled version of WebKit in your application wrapper for both iOS and Android.
As the iOS version of WebKit doesn't support WebGL natively, I think you have two options:
Implement the WebGL API in the JavaScript context of a WebView yourself by forwarding calls to the native OpenGL via iframe RPC or so. There isn't a clean way of calling (Objective-)C functions from JavaScript on iOS, unfortunately. Performance could be a problem.
AOT-Compile or interpret the JavaScript in a third-party runtime, then implement WebGL from there. JIT compilers are disallowed on iOS, so something like V8 won't work. Appcelerator Titanium statically compiles JavaScript as far as I know, and also has an interpreter. You could use that, but you'd still need to implement the WebGL glue yourself.
I'm not aware of any existing WebGL bridges for iOS, so I think you will need to either write it yourself or get someone to do it for you. One problem that might not be possible to overcome is if you use anything other than WebGL to display stuff - e.g. HTML, 2D <canvas>, etc. Combining WebView display with an OpenGL framebuffer is going to be rather tricky.
I don't know much about Android, but considering the rules are more relaxed there, it might be possible to embed a WebGL-compatible browser there.
I don't think there are any easy converter tools. You'll probably have to take your WebGL codebase and rewrite in OpenGL for both platforms, to create native apps.
It's not ready yet, but ForPlay may be able to act as a common development platform for Android and WebGL via GWT.
Bundling WebKit and your app's resources (.js, textures, etc) into an iOS or Android application doesn't sounds too much difficult. I'm assuming that since Google and Apple are major contributors to the WebKit project, all the required support (for multitouch and other stuff) is already there.
PS: many iOS apps use interpreted Javascript or Lua. The rules are there to prevent your app to execute 3rd party code (esp from the internet), not the code you'd bundle in your own app.
EDIT: To clarify, I think you'd need to implement your own web view using webkit (built from source) in order to use WebGL and pass Apple's screening process, as activating WebGL in the Apple-provided web view will get your app rejected.
There are a couple of options to be able to deploy a native WebGL app. EjectaGL is a great WebGL implementation but a little bit harder to master (http://codehum.com/stuff/ejectagl/).
Another option is Ludei that recently announced their support for WebGL on both iOS and Android. It is easier to use and supports acceleration for HTML5 canvas in both 2D and 3D through WebGL. It also provides a way to monetize your app using IAPs, ads and plenty of extensions. It is much easier to test using the CocoonJS Launcher App and their cloud compiler.
www.ludei.com
http://blog.ludei.com/webgl-demos-arrive-to-google-play-store/
Try Phonegap. It allows you to build "native" HTML+CSS+JS apps using the standard Webkit installation on your OS. And it provides a javascript-to-native bridge to allow you to do things not possible in pure webapps.