如何确保 Android phonegap/cordova 应用程序使用 Chrome webviews？

Posted 2023-02-22

【中文标题】如何确保 Android phonegap/cordova 应用程序使用 Chrome webviews？

【英文标题】：How do I ensure Android phonegap/cordova apps use Chrome webviews?

【发布时间】：2013-08-06 22:28:19

【问题描述】：

我正在编写一个游戏应用程序，它会扭曲 SVG 图形，直到他们喊出“叔叔！”。当从 Web 服务器托管时，该程序在 iPad (safari/webkit) 上运行良好，这里不再赘述。只要使用最新版本的 Chrome（如 v.25 或更高版本），它也可以在从 Web 服务器托管的 android 平板电脑上正常运行。

该程序根本不访问互联网，而是使用其 SVG 图形、运行 javascript 并将状态存储在 html5 localStorage() 中。

如果我在旧版 Android 平板电脑的“默认浏览器”上运行该程序，SVG 图形将无法正确处理，因此我需要平板电脑上的最新版 Chrome。

我刚刚为我的应用创建了一个 APK，当我将它安装在我全新的 Android 平板电脑上时，发现它不使用 Chrome 浏览器。相反，它似乎使用嵌入在 APK 中的浏览器，或者至少从 APK 中调用，而平板电脑中存在剩余库。

我使用 APK 的目的是让我的代码在最近的 webkit 浏览器中显示，这似乎意味着在 Chrome 环境中运行。

对于我的问题，我需要改变一些东西。但是什么？

在我的 APK 中嵌入 Chrome 浏览器？ 告诉 APK 使用平板电脑的 Chrome 浏览器？ 放弃使用 APK 分发程序？ ???

亲爱的读者们有什么线索吗？

谢谢， 杰罗姆。

【问题讨论】：

应用程序仅限使用与 Safari 或 Chrome 不同的操作系统 webview（Android 和 ios）。功能/性能会有所不同。您可能想详细说明 SVG 处理不当的原因。

@MorrisonChang 是正确的，您看到的问题是因为 Cordova 使用不支持 SVG 的原生 Android WebView。 Cordova 开发人员列表上有一些关于尝试使用 Chrome 视图而不是原生 Android WebView 的讨论，但到目前为止，它需要做太多工作而收获太少（更不用说自从你的 APK 以来文件大小大幅增加必须打包 Chrome 浏览器。）更多信息在这里：mail-archives.apache.org/mod_mbox/cordova-dev/201306.mbox/…

感谢您的回复。是的，这次我真的需要最近的 Chrome 浏览器。我真的没有给你的链接，但在（任何版本的“默认”Android 浏览器）、（Chrome v.18，常见于低端 Android 平板电脑）和（Chrome，v.25）中运行应用程序或更高版本）产生不同的结果。我必须在平板电脑上运行调试器才能确定，但​​有时 transform("rotate 90 0 0") 不起作用。即使我为 Chrome v.18 调试了一些东西，我是否应该期望我的修复在“未来”不适用于 v.25。这就是我们要消除的标准......

【参考方案1】：

我会推荐Crosswalk，但是，自 2017 年 3 月 19 日起，它已被宣布为 EOL（更多信息见下文）。尽管如此，它仍然是迄今为止最稳定的解决方案，我们的团队目前在生产应用程序中使用它。简而言之，它在您的 apk 中打包了一个基于 Chromium 的 webview，并由 Intel 提供支持。您可以从 Android 4.X 开始使用它。

官方推销：

Crosswalk 是一个用于雄心勃勃的 HTML5 应用程序的 Web 运行时。它提供了现代浏览器的所有功能，并结合了深度设备集成和用于添加本机扩展的 API。它特别适用于移动设备，同时支持 Android 和 Tizen。

Cordova 4.0.0 及更高版本有一个官方的 Crosswalk 插件，让启动和运行变得非常容易：https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview

如果您的 Cordova 项目正在运行，您需要做的就是

cordova plugin add cordova-plugin-crosswalk-webview --save

添加 Crosswalk webview 插件。下一个构建将获取所有依赖项并很好地打包所有内容。

Android 4.4.x

在 Android 4.4 上，您的混合应用程序将在基于 Chromium 的 WebView 上运行，但是，它将永远停留在同一版本上（如果我没记错的话，它是 Chromium 33）。在我看来，最好也在这里使用 Crosswalk。

Android 5.0+

如果您为 Android 5.0 及更高版本编写代码，则 Chromium WebView 将通过 Google Play 更新。更多信息在这里：http://developer.android.com/about/versions/lollipop.html#WebView

CrossWalk 20 及更高版本

CrossWalk 将从版本 20 开始不再支持 Android 4.0.X。如果您确实需要在支持矩阵中保留 4.0.X，请不要升级。我建议为 Android 5.X 及更高版本构建另一个 APK，它根本不再包含 CrossWalk。 More info on this

Crosswalk v23 是最后一个版本 (EOL)

Crosswalk 决定在 2017 年 1 月发布最后一个稳定版本，即第 23 版。这将结束对 Crosswalk 的官方支持，并将错误修正等留给社区。更多信息在blogpost

注意！

我发现在 Crosswalk 上运行我的移动混合应用程序比我依赖系统 webview 时具有更好的图形性能（在 Android 5.x 上的 Sony Xperia ZL 上测试，因此 webview 是通过 play store 更新的）。为什么会这样，我还不知道，也许 Crosswalk 以某些方式配置 Webview？这需要进一步调查。

【讨论】：

对此的更新，从 android 4.4 (KitKat) 开始，chromium 将成为 WebView 内容背后的驱动程序，高兴！

还有更多更新，从 Android 5.0 (Lollipop) 开始，Chromium WebView 将与操作系统分开更新。更多信息 -> developer.android.com/about/versions/lollipop.html#WebView

Cordova v4+ 现在支持可插入的 Web 视图，因此可以通过安装 Cordova 插件轻松使用人行横道：github.com/crosswalk-project/cordova-plugin-crosswalk-webview

虽然我很久以前就回避了这个问题，但对于一个新的开发项目，我认为人行横道环境可以解决我的问题。被催促解决这个问题，这个答案似乎最广泛并且很可能成功。我在这里投了票。

"我发现在 Crosswalk 上运行我的移动混合应用程序的图形性能比我依赖系统 webview 时更好（在 Sony Xperia ZL 上测试）。为什么会这样，我还不知道，也许Crosswalk以某些方式配置Webview？这需要进一步调查。” -> erm，Crosswalk基本上在应用程序中打包了chrome。在

【参考方案2】：

这看起来是一个很有前途的选择：Crosswalk + Cordova。

好处：

使用 Cordova API 使用 Crosswalk API Cordova 将使用 Crosswalk 作为其 web 视图 Crosswalk 不使用基于 Chromium 的 Android webview

Github 仓库：https://github.com/crosswalk-project/crosswalk-cordova-android.

【讨论】：

链接已关闭。 Could you please update your post?

回购有最新信息：github.com/crosswalk-project/crosswalk-cordova-android

人行横道已停止！

【参考方案3】：

2014 年更新答案：Android 4.4 and newer use Chrome webview by default。这目前基于 Chrome 版本 30。

【参考方案4】：

原来我的 Javascript 是错误的。当我避免某个错误时，在旧浏览器上一切正常。我通过能够加载适用于 Windows 的古老版本的 Safari 找到它。

我的问题是这样的：

var newValue = parseInt("030");

这返回 24，因为“030”是以 8 为底的，对吧？

我改变了一些东西来强制基地，现在一切正常：

var newValue = parseInt("030", 10);

【讨论】：

JSHint 会告诉你缺少基数参数；)

错误的发布位置或错误？这个答案与问题无关......请适度？

奇怪这个帖子应该被删除了。我，问题作者，把它放在这里是因为找到了我没有使用 parseInt(val, radix) 版本的错误，这意味着我不再需要原始问题的答案。我不再需要或关心我最初的问题。

SO 服务于社区的需求。当提出问题并提供答案时，它可能会帮助其他人。这个问题变得（黄金）出名是因为很多人对如何在 PhoneGap 中强制使用 webview 版本感兴趣。不是因为你犯了一些错误......

唉！我的名声不大，几乎完全是因为提出有趣的问题。不是建立大师地位的东西，但我会在温和的 SO 评论者的帮助下度过难关。

【参考方案5】：

试试https://github.com/thedracle/cordova-android-chromeview 它是一个新项目，需要更多工作，但将 chromeview 项目与 cordova 结合起来，将 chromium 嵌入到 cordova android 应用程序中

【参考方案6】：

一种选择是启动 Chrome 浏览器并带有相应网站的链接。

这不是一个很好的用户体验，但可能会为您提供一些帮助。

您可以通过以下方式检查并启动 Chrome 浏览器：

    String url = "http://www.totallyawesomeurl.com";
    String packageName = "com.android.chrome";

    Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
    browserIntent.setPackage(packageName);
    browserIntent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);

    List<ResolveInfo> activitiesList = context.getPackageManager().queryIntentActivities(
            browserIntent, -1);
    if(activitiesList.size() > 0) 
        // Found the browser on the device, launch it
        context.startActivity(browserIntent);
     else 
        // The browser isn't installed, so we should prompt the user to get
        Intent playStoreIntent = new Intent(Intent.ACTION_VIEW);
        playStoreIntent.setData(Uri.parse("market://details?id="+packageName));
        playStoreIntent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        context.startActivity(playStoreIntent);
    

值得注意的是，Android 版 Chrome 仅适用于 ICS 设备及更高版本，因此您可能需要确保将 minimumTargetSDK 设置为 14，如果您的网站在具有包名“com.opera.browser”

【讨论】：

我最初的想法是用 PhoneGap 包装一个 HTML5 文件，并将该路径用于 Android 应用程序。您在这里的建议似乎是调用现有的 Chrome，然后通过 .setData() 和 .startActivity() 使用它来使用我在包中提供的文件启动 Chrome。一旦我了解了更多关于原生 Android 编程的知识，我就可以到达那里。我的问题：“不是很好的用户体验”怎么办？

我不知道有什么方法可以告诉 Chrome 从应用程序加载文件。我指的是您在线托管该网站，然后使用该 URL 打开 Chrome。关于用户体验，让用户从 Play 商店下载应用程序然后将其发送到 Chrome 是很糟糕的。使用 WebView 是不同的，但听起来它不支持您需要的功能:(