move existing web app into a native phone app using a browser wrapper

Question

So lets say there is a fully functional responsive ruby rails web app. This app works and looks great on mobile phones. Unfortunately, this web app can't be seen from the mobile phone app stores, because it's not a native app. Technically you could place an icon on a smart phone that opens up the browser, but obviously this is not optimal.

Is there a way to create a native app (Android, iPhone) that is essentially just a browser, without the navigation bar? This browser's wrapper would just load the web app and behave just like you had opened up the browser.

I have looked into options such as Phonegap and Titanium, but it seems there would be a significant amount of rewriting, and there are very little funds for this.

Solution 1

I don't really know iOS, but doing it in Android will be really easy.

First, this is your activity:

package com.example.my_browser;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class MyActivity extends Activity {
    /**
     * Called when the activity is first created.
     */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        WebView browser = (WebView)findViewById(R.id.browser);
        browser.loadUrl("http://google.com"); //Replace google.com with you webapp's URL
    }
}

This is your main.xml layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="vertical"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
    >
    <WebView
        android:id="@+id/browser"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</LinearLayout>

And you will need to request internet permission in AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />

I just tested this in an emulator and it works.

Solution 2

This answer is for iOS.

You can have an icon of your website on the home screen of the device without writing a line of code (no UIWebView, no native coding, no XCode).

1. Download iPhone Configuration Utility from http://www.apple.com/support/iphone/enterprise/
2. Start iPhone Configuration Utility and from the left menu select "Configuration Profiles"
3. In the General section of your new profile fill out the Name (MyWebsite app) and identifier (com.mycompany.coolapp). You can add also organization name and description.
4. Scroll down and select Web Clips section.
5. In the Label field you can enter the name that will be visible on the home screen.
6. URL will be the URL of your web site / web app.
7. Select the icon to be used as a home screen icon. Use at least 114x114 pixel resolution.
8. If you select "Full screen", the navigation bar and the address bar of Safari will be hidden when you launch your web app, so you can have a real "app".
9. Click on the "Export" button. You can decide whether to sign your profile (will be visible by the end user when he installs your profile).
10. Save the .mobileconfig file and upload it to your web server or send to your end users via mail.
11. When the end user opens the .mobileconfig file on his device, the system will ask him to install the configuration profile. After the installation a home screen icon will be created that points to your web site.

Update as of 2017 iPhone Configuration Utility has been replaced by Apple Configurator that you can download free from App Store. You can create a new Configuration Profile the same way as described for Apple Configurator, selecting File -> New Profile in the app.

Solution 3

edit 2
As @MrTJ said in the comments. Apparently Apple won't let you have a simple "website wrapper" application. So your only options would be porting Ruby, like the rest of my answer describes, porting the application natively, or doing a web app like @MrTJ describes in his answer. Porting it natively, supported by RESTlike web services, would probably be the best solution. Web Apps are nice, but native applications are usually nicer. It depends on what kind of user experience you want to provide.
end edit 2

edit 1
I need to read more carefully. I answered your question assuming you wanted to embed the application, without needing to access the internet. If that is NOT what you are trying to do, then it is definitely possible.

Just make an application that has a webview and loads the base URL for the site. You will probably want to do a special version of the site that ALWAYS has back buttons etc, so the user can never get stuck in a corner of your site (since you want the navbar hidden).

Also, personally I would not do this, you can, but you probably shouldn't. You will need to handle what to do when the user does not have an internet connection. And you may make them less than happy when they (potentially) paid for an application that they can't use everywhere. Native Applications tend to sell/perform much better.
end edit 1

My Personal Reaction to This Question

Cool Question. Personally I am not a fan or Ruby or Rails (I'm a bit more of a Python guy, but Python is actually why I know anything about this situation), but this is a pretty cool problem regardless.

Questions to ask yourself

Is this possible? Probably

Is it a good idea? Probably Not

Is it going to be worth the effort? Probably Not

And most importantly, will Apple let you sell it? ....Maybe, but for something like this, you won't know till you try....

What you Need

1. A WebView that uses a protocol to talk to your native application. This would be like the URL hash tag hack used to talk to an iFrame in a browser, or the protocol that PhoneGap uses to communicate with it's WebView

2. Embedded version of the Ruby Interpreter. People have been doing this on iOS with both the Python and JavascriptCore interpreters. Some people will try to tell you Apple won't let you do this, but that is no longer true. You will need to compile Ruby specifically for iOS, this will probably be annoying, but I bet if you base your implementation on the Python/Javascript implementations, you could eventually get it working.

edit
Another SO question/answer with relevance to this answer
Embed a JavaScript engine in an iOS application
end edit

3. Embedded version of Rails... Good luck :)

4. Method of triggering the Rails app without a web server (you probably can't run apache locally on an iPhone (would be difficult and would probably crash immediately), and definitely not on Android). You will either need to trigger each view manually somehow, piping the output to either a string or a file, and load that string (HTML) or file into the WebView

5. Method of triggering navigation in the Rails application. This will require catching link presses from the WebView (you can watch for the URL changing on iOS), and triggering the proper Rails view to produce its HTML.

Problems

1. Ruby and Rails are both VERY HEAVY. Most implementations I have seen require at least 256mb of RAM, iOS will instantly kill your application if it tries using this much memory at startup. Android will probably handle it far less gracefully and just crash unexpectedly at some point in the application run.

2. Android does not run Native Compiled code. This means you will need to run JRuby, which will leave you with an interpreted language running in an interpreted language (read as, Slow As Hell On a Mobile Device).

3. This will require writing MORE Ruby, some Javascript, and MORE Java or Objective-C. So in other words, Don't. Figure out what your application does, and port it.

Key Learning

This is will probably take way more effort than any sane developer would ever want to spend on a 'simple web application'. You will be far better off learning Native development, since that will be required to get this job done anyway.

Comments

[dgund]

Both Android and iOS have their respective "Web Views." UIWebView on iOS and WebView on Android.

[Vikram Dattu]

Do anyone knows how to do it for tizen platform which is HTML5+css based itself!

[Peterdk]

Yes, for Android that would be quite easy to do. Just create a activity with a fullscreen webview, and let it load a url.

[Streets Of Boston]

And on Android it is easy to communicate between your Java code and the HTML's JavaScript: Use browser.setJavascriptInterface for communication from JavaScript to Java and use browser.loadUrl("javascript:(function(){" + js + "})()") for communication from Java to JavaScript (where js is the JavaScript you want executed).

[jlindenbaum]

There is a caveat to this - I believe Apple's review guidelines still require you to implement native features (like a Map, or "about" screen, or something) so that your application is not just a UIWebView deployed to a phone.

[Albert Renshaw]

@jlindenbaum Ah, I was wondering about that. Yes, I would definitely say add some features to the app.... like an "about page" and a "contact page" maybe? Also, definitely a loading screen while the UIWebView is loading your web-app so it looks smooth like a regular app does.

[MrTJ]

No, Apple won't let you sell this, neither to publish it on App Store. There is a paragraph (2.12) in their guidelines that says your "app" can not be a simple wrapper of a website.

[G. Shearer]

I must have missed that, thanks @MrTJ. So really his only solution would be a port.

[Aaron Brager]

@MrTJ Note that it doesn't need to be a LOT more than that. The Bank of America app is a web view + maps interface for finding ATMs.

[MrTJ]

True, the guidelines says "your app may be refused". I guess they did not want to refuse the app of Bank of America but if you're smaller they might be not so permissive.

[Vikram Dattu]

Do anyone knows how to do it for tizen platform which is HTML5+css based itself!