Convert HTML5 into standalone Android App - android

I have a dynamic HTML5 document that does not contain any external resources (no images, css and scripts are coded inside of document). This HTML5 application is working fine with internet browser. I was wondering, if it would be possible to convert this HTML5 application into standalone Android application, so it can be executed directly without browser. Please advise.

Create an Android app using Eclipse.
Create a layout that has a <WebView> control.
Move your HTML code to /assets folder.
Load webview with your file:///android_asset/ file.
And you have an android app!

Edit:
PhoneGap has now been discontinued.
Original answer:
You could use PhoneGap.
http://phonegap.com/
http://docs.phonegap.com/en/2.1.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android
This has the benefit of being a cross-platform solution. Be warned though that you may need to pay subscription fees. The simplest solution is to just embed a WebView as detailed in #Enigma's answer.

You can use https://appery.io/
It is the same phonegap but in very convinient wrapper

Related

A web based phone app with online and local html files

Hello i am working on a mobile magento theme. What i am looking is to embed or either cache the html, css and javascript files (do not know which is better!) to the application (local storage on phone) and retrieve the product catalog and related pictures from the database and online servers
My intention is to make the app have minimum load on startup and shows as normal native apps
Can you give some guidelines and routine to do so .
Thanks you.
You can either give PhoneGap a shot (http://www.phonegap.com), or try it yourself, since PhoneGap is nothing more than some small libraries to make native function (notifications, vibrating etc.) available for JavaScript calls.
If you just want to wrap your site into a native app, you can just put it inside a WebView, which runs exactly like the native Android browser.
If you want to use your html, css and js files to create an android app then the easiest way to attempt this is http://phonegap.com/
However, I would strongly urge you to build a native app (on Android) as Phonegap comes with tons of problems and less support.

Viewing a PDF file from HTML5 Hybrid Mobile App

Intending to view a PDF File from the Hybrid Mobile App , created using HTML5 Jquery and Packaged with Phonegap.
But unable to achieve it ,
Things i tried
<object src="xyz.pdf" type="application/pdf"></object>
also,
window.open('xyz.pdf'); //through javascript
and
$(document).load('xyz.pdf');
Can anyone suggest the best way for viewing the PDF in a Hybrid Android Mobile App.
with cordova you must think about these:
HTML 5 object tag: not working
If you try with:
window.open('http://www.???.com/my.pdf', '_blank', 'location=yes');
The InAppViewer canĀ“t open this kind of files.
I think that there aren't an hybrid solution for this problem.
You must start to search or write about a plugin that use a native pdf's opening and then use it.
An example:
cordova-plugin-file-opener
The latest solution, a little more simple but include to open google docs is:
window.open('https://docs.google.com/viewer? url=http://www.example.com/test.pdf&embedded=true', '_blank', 'location=yes');
ref = window.open('index.html', '_self');
Go look at the Mozilla pdfJS project.
This project allows you to open a pdf (embedded in app or remote) in your app. No break-out links that relies on native viewers.
They also give you a very full featured sample viewer, that you can use as is, but much of functionality in that does not apply to mobile applications.
I have had success with this on Android 4.3 Devices.
Try installing the InAppBrowser plugin to do so. I have use it to open PDF files right inside the app on both iOS and Android.
Check the official InAppBrowser doc with full doc and examples, it has several options you can enable/disable (be sure to point to your current cordova version documentation):
My solution for connected apps with offline availability...
window.open('http://www.someserver.com/doc.pdf', '_system')
...this will open in default pdf viewer. I have my clients use adobe reader for obvious reasons. And also because once it is downloaded the first time, adobe app manages and edits the documents well, and the documents are also available offline from within adobe reader thereafter. Even pdf forms.
Have cordova.js linked on the page.
Have inAppBrowser added.
For full offline you may try FileOpener plugin. I have not needed to do that on android, but I have used that way in iOS.
Hope any of this may help.
Though am late here, still want to share what I know. You can use this plugin to view PDFs in the app (without inappbrowser). Supports only Android and iOS.

Display offline html in android app with a tablet

I have to create an android app, that displays an offline html website. Does android sdk have an internal browser control? What kind of dev sw do you recommend to create this basic wrapper?
Read about WebView.
It's built-in webrowser engine and you can use it to your target.
Yes. WebView
http://developer.android.com/reference/android/webkit/WebView.html
This component allows you to specific a local url (file://) if required or even passed the complete html to the load method. Also capable of event handling for more advanced scenarios.

Ttitanium webview and HTML5 application cache

I am using Titanium to create a application for Android. The app uses webview to load external HTML5 webpages. The webpage uses a manifest to cache the page and some assets. This works fine on desktop browsers and third party app browsers in Android (Chrome).
When I view the page in a webview in the Titanium build app, it seems that the manifest is not used, the page just loads everything from the server. The same problem occurs when I use the build in browser of my phone (HTC one X).
What I am trying to accomplish is that the pages are offline available, so that internet is not required tot view cached pages. Is there a fix for this problem, or should I go look in another direction to solve my problem?
the manifest file:
CACHE MANIFEST
# version 1
leerlingen.html
jquery.js
style.css
handler.js
NETWORK:
*
First: Titanium provides much more than a WebView. If you planned to display only web pages you maybe should have a look at PhoneGap / Cordova which might fit your needs in a better way.
As you've noticed not all browsers support HTML5 Caching feature as expected. I can't say if it doesn't work for Android in general or only for your specific version because WebKit usually does support it but it depends of the used WebKit version. And this could be different.
EDIT: It seems that (in native android) this feature can be enabled as written here: Application cache in HTML5 doesn't work in Android PhoneGap application. This is currently not possible in Titanium (there might be inofficial tweaks i don't know but from http://docs.appcelerator.com this is not possible).
Personally i'd prefer another solution. Cache data by myself and display it if there is no network connection. But this depends on what you try to achieve. Having few content which doesn't change often this would make sense. Having dynamically changing data (like twitter stream for instance) this would be difficult. Also it depends on your users and where they want to access your app.
And there is an open question: When you want to use all the caching features why do you want to create an app? Creating a simple mobile webpage would do the same job. When creating an app i wouldn't use the Caching Features of HTML 5. You should keep all the static resources in your app and simply load data from the network. This can be achieved by both Titanium and PhoneGap / Cordova. Titanium is more useful for a native UI and some native Features while PhoneGap / Cordova would be more appropriate for HTML5 based layout.
Just in case someone else is running in the same problems that i was facing, here is what i've done. HTML5's application cache does not seem to work in the build-in browser of Android and with that the webviews. In Titanium there seems to be no way to control the webview as to enable the application cache.
The work around for me was to use Titanium and it's httpClient function (Titanium.Network.HTTPClient) to request the files (HTML, CSS, javascript) and store it in the local app filesystem (Titanium.Filesystem).

Customizing chromium source code to create a custom browser for android

I want to create a new web-browser for android, but this browser is not like ordinary web browsers. This is only useful to open local (html, css and js) files and to do some local tasks like disk reading, playing music, etc. It won't open any web URLs.
So i thought to customize chromium source code. How to customize it according to my requirement ?
I downloaded chromium source code and built using ubuntu linux. But it has many projects and directories. I tried to understand the source code architecture with help of this link. But i am getting confusion, because some files mentioned in that link are not available in source code.
if anybody know about chromium porting and customization please help me. Thanks.
Why you dont usa a WebKit to this purpose. Many web browsers using this web engine also your chromium. http://developer.android.com/reference/android/webkit/package-summary.html

Categories

Resources