使用浏览器包装器将现有的 Web 应用程序移动到本机手机应用程序中

Question

可以说有一个功能齐全的响应式 ruby​​ rails web 应用程序。这个应用程序在手机上工作并且看起来很棒。不幸的是，这个网络应用程序无法从手机应用程序商店中看到，因为它不是原生应用程序。从技术上讲，您可以在打开浏览器的智能手机上放置一个图标，但这显然不是最佳选择。

有没有办法创建一个本质上只是一个浏览器的原生应用程序（Android、iPhone），没有导航栏？此浏览器的包装器只会加载 Web 应用程序，其行为就像您打开浏览器一样。

我已经研究过诸如 Phonegap 和 Titanium 之类的选项，但似乎需要大量重写，而且资金很少。

Answer 1

此答案适用于 iOS。

您可以在设备的主屏幕上显示您网站的图标，而无需编写一行代码（无需 UIWebView、无需原生编码、无需 XCode）。

1. 从http://www.apple.com/support/iphone/enterprise/ 下载 iPhone 配置实用程序
2. 启动 iPhone 配置实用程序并从左侧菜单中选择“配置文件”
3. 在新配置文件的“常规”部分中，填写名称（MyWebsite 应用程序）和标识符 (com.mycompany.coolapp)。您还可以添加组织名称和描述。
4. 向下滚动并选择 Web Clips 部分。
5. 在标签字段中，您可以输入将在主屏幕上显示的名称。
6. URL 将是您的网站/网络应用程序的 URL。
7. 选择要用作主屏幕图标的图标。至少使用 114x114 像素分辨率。
8. 如果您选择“全屏”，当您启动 Web 应用程序时，Safari 的导航栏和地址栏将被隐藏，因此您可以拥有一个真正的“应用程序”。
9. 单击“导出”按钮。您可以决定是否签署您的个人资料（最终用户在安装您的个人资料时会看到）。
10. 保存 .mobileconfig 文件并将其上传到您的网络服务器或通过邮件发送给您的最终用户。
11. 当最终用户在其设备上打开 .mobileconfig 文件时，系统会要求他安装配置文件。安装后，将创建一个指向您网站的主屏幕图标。

2017 年更新 iPhone 配置实用程序已被 Apple Configurator 取代，您可以从 App Store 免费下载。您可以按照 Apple Configurator 中描述的相同方式创建新的配置文件，在应用中选择文件 -> 新建配置文件。

Answer 2

我不太了解 iOS，但在 Android 中做这件事真的很容易。

首先，这是你的活动：

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
    }
}

这是你的 main.xml 布局：

<?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>

您需要在 AndroidManifest.xml 中请求互联网权限：

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

我刚刚在模拟器中测试了它，它可以工作。

Answer 3

编辑 2
正如@MrTJ 在 cmets 中所说。显然苹果不会让你有一个简单的“网站包装”应用程序。因此，您唯一的选择是移植 Ruby，就像我的答案的其余部分所描述的那样，本地移植应用程序，或者像 @MrTJ 在他的答案中描述的那样做一个 Web 应用程序。将其本地移植并由 REST 类 Web 服务支持可能是最佳解决方案。 Web 应用程序nice，但原生应用程序通常更好。这取决于您想要提供什么样的用户体验。
end edit 2

编辑 1
我需要更仔细地阅读。我回答了你的问题，假设你想嵌入应用程序，而不需要访问互联网。如果那是不是您想要做的，那么这绝对是可能的。

只需创建一个具有 web 视图并加载站点的基本 URL 的应用程序。您可能想要制作一个始终具有后退按钮等的特殊版本的网站，这样用户就永远不会卡在您网站的某个角落（因为您希望隐藏导航栏）。

另外，我个人不会这样做，你可以，但你可能不应该这样做。当用户没有互联网连接时，您将需要处理该做什么。当他们（可能）为他们无法在任何地方使用的应用程序付费时，您可能会让他们不开心。原生应用程序的销售/性能往往要好得多。
end edit 1

我对这个问题的个人反应

很酷的问题。就我个人而言，我不是 Ruby 或 Rails 的粉丝（我更喜欢 Python，但 Python 实际上是我对这种情况一无所知的原因），但这无论如何都是一个很酷的问题。

要问自己的问题

这可能吗？ 可能

这是个好主意吗？ 可能不是

值得付出努力吗？ 可能不

最重要的是，Apple 会让你卖掉它吗？ ....也许吧，但对于这样的事情，只有你尝试过才会知道...... em>

你需要什么

1. 使用协议与您的本机应用程序对话的 WebView。这就像用于与浏览器中的 iFrame 对话的 URL 哈希标记 hack，或者 PhoneGap 用来与其 WebView 通信的协议

2. Ruby 解释器的嵌入式版本。人们一直在使用 Python 和 JavascriptCore 解释器在 iOS 上执行此操作。有些人会试图告诉你 Apple 不会让你这样做，但事实并非如此。你需要专门为 iOS 编译 Ruby，这可能会很烦人，但我敢打赌，如果你的实现基于 Python/Javascript 实现，你最终可以让它工作。

编辑
与此答案相关的另一个 SO 问题/答案
Embed a JavaScript engine in an iOS application
结束编辑

1. Rails 的嵌入式版本...祝你好运:)

2. 在没有网络服务器的情况下触发 Rails 应用程序的方法（您可能无法在 iPhone 上本地运行 apache（会很困难并且可能会立即崩溃），而且绝对不能在 Android 上运行）。您将需要以某种方式手动触发每个视图，将输出通过管道传输到字符串或文件，然后将该字符串 (HTML) 或文件加载到 WebView

3. 在 Rails 应用程序中触发导航的方法。这将需要从 WebView 捕获链接按下（您可以观察 iOS 上的 URL 变化），并触发正确的 Rails 视图以生成其 HTML。

问题

1. Ruby 和 Rails 都非常重。我见过的大多数实现都需要至少 256mb 的 RAM，如果 iOS 在启动时尝试使用这么多内存，它会立即杀死你的应用程序。 Android 可能会不太优雅地处理它，只是在应用程序运行的某个时刻意外崩溃。

2. Android 不运行本机编译代码。这意味着您将需要运行 JRuby，这将为您提供以解释语言运行的解释语言（读作，在移动设备上慢如地狱）。

3. 这将需要编写更多的 Ruby、一些 Javascript 和更多的 Java 或 Objective-C。换句话说，不要。弄清楚你的应用程序做了什么，然后移植它。

重点学习

这可能比任何理智的开发人员都愿意在“简单的 Web 应用程序”上花费更多的精力。学习 Native 开发会更好，因为无论如何完成这项工作都需要这样做。

Answer 4

是的，对于 iOS，只需全屏加载 UIWebView 并将 UIWebView 的当前 URL 更改为您的网络应用程序的任何位置。 launching UIWebview with specific url

我对 android 一无所知，但显然这是相同的过程......你去吧：How to set url on WebView from a xml layout file on Android?

---

要在 iOS 应用程序和您的网站之间进行通信，您可以使用此处提到的 stringByEvaluatingJavaScriptFromString：Passing Javascript Variable to Objective-C

要使用 Android 执行此操作，请参阅此问题的其他答案，他们已经在答案中列出了代码。