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

Posted 2023-02-23

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

【英文标题】：move existing web app into a native phone app using a browser wrapper

【发布时间】：2013-02-08 10:05:13

【问题描述】：

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

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

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

【问题讨论】：

Android 和 ios 都有各自的“Web 视图”。 UIWebView 在 iOS 上和 WebView 在 Android 上。

有谁知道如何为基于 html5+css 的 tizen 平台做这件事！

【参考方案1】：

此答案适用于 iOS。

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

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

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

【参考方案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_
          android:layout_
    >
    <WebView
        android:id="@+id/browser"
        android:layout_
        android:layout_
        />
</LinearLayout>

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

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

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

【讨论】：

而在 Android 上，您的 Java 代码和 HTML 的 javascript 之间的通信很容易：使用 browser.setJavascriptInterface 进行从 JavaScript 到 Java 的通信，使用 browser.loadUrl("javascript:(function()" + js + ")()") 从 Java 到 JavaScript 的通信（其中 js 是您要执行的 JavaScript）。

有谁知道如何为基于 HTML5+css 的 tizen 平台做这件事！

【参考方案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>

你需要什么

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

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

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

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

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

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

问题

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

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

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

重点学习

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

【讨论】：

不，Apple 不会让你卖这个，也不会在 App Store 上发布它。他们的guidelines 中有一段（2.12）说你的“应用程序”不能是网站的简单包装。

我一定错过了，谢谢@MrTJ。所以他唯一的解决方案就是港口。

@MrTJ 请注意，它不需要更多。美国银行应用程序是用于查找 ATM 的 Web 视图 + 地图界面。

没错，指南说“您的应用可能会被拒绝”。我猜他们不想拒绝美国银行的应用程序，但如果你较小，他们可能不会那么宽容。

【参考方案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 执行此操作，请参阅此问题的其他答案，他们已经在答案中列出了代码。

【讨论】：

是的，对于 Android，这很容易做到。只需创建一个带有全屏 web 视图的 Activity，然后让它加载一个 url。

对此有一个警告——我相信 Apple 的审查指南仍然要求您实现本机功能（如地图或“关于”屏幕等），以便您的应用程序不仅仅是 UIWebView部署到手机上。

@jlindenbaum 啊，我想知道这一点。是的，我肯定会说在应用程序中添加一些功能......也许像“关于页面”和“联系页面”？此外，当 UIWebView 加载您的网络应用程序时，绝对是一个加载屏幕，因此它看起来像普通应用程序一样流畅。