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.

Answer 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.

Answer 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.

Answer 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.

Answer 4

Yes, for iOS simply load a UIWebView fullscreen and change the UIWebView's current URL to whatever the location of your web-app is. launching UIWebview with specific url

I don't know anything about android but apparently it's the same process... Here ya go: How to set url on WebView from a xml layout file on Android?

---

To communicate between iOS app and your website you can use stringByEvaluatingJavaScriptFromString mentioned here: Passing Javascript Variable to Objective-C

To do this with Android refer to the other answers to this question where they have already listed the code in their answer.