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

Question

所以,假设有一个功能齐全的响应式ruby rails web应用程序.这个应用程序在手机上工作和看起来很棒.不幸的是,这个网络应用程序无法从手机应用程序商店中看到,因为它不是本机应用程序.从技术上讲,你可以在打开浏览器的智能手机上放置一个图标,但显然这不是最佳选择.

有没有办法创建一个基本上只是一个浏览器的本机应用程序(Android,iPhone),没有导航栏？这个浏览器的包装器只会加载Web应用程序,其行为就像您打开浏览器一样.

我已经研究过Phonegap和Titanium等选项,但似乎会有大量的重写,而且这方面资金很少.

Answer 1

我真的不懂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 2

这个答案适用于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文件并将其上传到您的Web服务器或通过邮件发送给您的最终用户.
11. 当最终用户在其设备上打开.mobileconfig文件时,系统将要求他安装配置文件.安装完成后,将创建一个指向您网站的主屏幕图标.

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

Answer 3

是的，对于 iOS，只需全屏加载 UIWebView 并将 UIWebView 的当前 URL 更改为您的 Web 应用程序的位置即可。使用特定的 url 启动 UIWebview

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

要在 iOS 应用程序和您的网站之间进行通信，您可以使用stringByEvaluatingJavaScriptFromString此处提到的方法：将 Javascript 变量传递给 Objective-C

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