Android v 5.0+ webview HTML5、CSS3 和 ES6 兼容性

Posted 2023-02-22

【中文标题】Android v 5.0+ webview HTML5、CSS3 和 ES6 兼容性

【英文标题】：Android v 5.0+ webview HTML5, CSS3 and ES6 compatibility

【发布时间】：2018-02-22 11:11:42

【问题描述】：

我有一个使用 Crosswalk 的混合 android 应用。几个月前我改用 Crosswalk，这极大地提高了生产力。我花了更多时间在不同的 Android 操作系统版本上进行测试，并且遇到的 html5/CSS3/ES6 实现不完整的问题要少得多——如果我理解正确的话，因为 Crosswalk 是基于 Chromium 的，而早期版本的 Android 并非如此。

但是，人行横道项目现在已被放弃。我的理解是，Android 中原生 Webview 的 post v 5.0 实现非常好，以至于让 Crosswalk 过时了。

我现在也在考虑放弃 Crosswalk - 基于我的目标市场（西欧）Android v 5.0 的观察结果 - 市场份额为个位数且快速下降。

在我开始尝试之前，我想我应该在这里问一下。 Android v 5.0+ WebView 是否为 HTML5、ES6 和 CSS3 提供了真正扁平的、Chrome 级的 API，或者我是否仍然可能遇到由于各种设备供应商对操作系统的“调整”而导致未实现功能变得更糟的问题？

提几个具体问题

我可以期待支持一整套 CSS3 伪选择器吗 我可以假设我可以在不使用 -webkit 样式供应商前缀的情况下安全地工作 我能否编写使用 Object.keys 和其他最近加入 JS 稳定版的 JS 代码

我一直无法找到按版本对全套 Webview 功能进行全面讨论。我非常感谢您对此的任何反馈。

---

自从我发布这个问题以来，我已经尝试放弃 Crosswalk，并在运行 Android 6 的 Moto E3Power 手机上测试了结果。从所有意图和目的来看，该应用程序仍然按预期工作。然而，这远非严格的测试。我正在悬赏这个问题，希望它会产生一些明确的答案。

---

现在在两台设备上测试了我的非 Crosswalk 版本后，我遇到了一个直接问题。我做的一件事是修改cssText。例如

document.getElementById('id').style.cssText = 
";transform:rotate(45deg) translate(calc(1024px - 1.35em)) rotate(-45deg);"

在我的 Android 6.0 Moto 上完美运行并提供预期结果：

元素#id旋转45度 沿其旋转的 X 轴滑出 最后转回-45度

令人惊讶的是，在运行 Android 7.0 的 HTC Hero 上这不起作用。虽然没有任何意义，但我什至在添加-webkit-prefix 后尝试了它。在两台设备上，我都将 Webview 升级到了 Play Store 上的最新可用版本。

【问题讨论】：

查看 caniuse.com

Android 5+ WebView 基于 Chromium 并通过 Play 商店更新。您可以检查您自己设备上安装的Android System WebView 软件包的版本，并查看其版本对应于最近发布的铬。 /// 由于您没有将它捆绑在您的应用程序中（如 Crosswalk），不同的设备有不同的版本，您可能会在您的 HTML 应用程序中遇到兼容性问题。 /// 您可以随时在运行时检查已安装的版本，并提示用户更新他们的 WebView 实现。

为了完整性：在 KitKat 之前，Android WebView 根本不基于 Chrome。 KitKat WebView 基于 Chrome 33，无法更新。见这里：developer.chrome.com/multidevice/webview/overview

【参考方案1】：

Webview 现在它没有与操作系统集成，但它是一个可以从游戏商店更新的独立应用程序，是的，它支持 css3 和所有， 它不是 chrome，但与 chrome 共享相同的渲染代码

不，Android 版 Chrome 与 WebView 是分开的。它们都基于相同的代码，包括通用的 javascript 引擎和渲染引擎。

https://developer.chrome.com/multidevice/webview/overview

如果您说您的大多数用户设备都是 +5 的，那应该没问题。

WebGL WebRTC 网络音频 表单验证

以下是可用于 webview 的功能 https://developer.chrome.com/multidevice/webview/overview#does_the_new_webview_have_feature_parity_with_chrome_for_android_

对于 android > 7.0 Chrome 本身也是 webview。

【讨论】：

我觉得你的回答不够我的问题。您上面提到的链接是众所周知的，并且非常笼统地谈论 +5 webview 支持的网络技术。我提到了一些非常具体的点，例如对 CSS3 伪选择器、ES6 功能等的支持。自从我放弃了现在在我的问题中提到的 Crosswalk 以来，我遇到了一些非常奇怪的问题。

【参考方案2】：

我觉得你可以试试：

if (Build.VERSION.SDK_INT >= 19) 
    webView.setLayerType(View.LAYER_TYPE_HARDWARE, null);
       
else 
    webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

Android 19 具有用于 WebView 的 Chromium 引擎。我想它在硬件加速方面效果更好。 硬件加速也可以解决问题。您可以在应用程序的不同级别使用它。

应用层

<application android:hardwareAccelerated="true" ...>

活动级别

<application android:hardwareAccelerated="true">
    <activity ... />
    <activity android:hardwareAccelerated="false" />
</application>

【讨论】：

我实际上并没有得到我正在等待的权威答案。但是，我开始怀疑自己某些手机上缺少的动画是硬件加速问题，所以到目前为止，您已经提供了我决定接受的最有用的答案

我在本地应用程序上也遇到了与您相同的情况。我尝试了很多措施，最后这个措施是我所知道的最好的。 android 上的 WebView 在功能和速度方面都大大失去了 iO。我还没有找到可以在android中更好地定制的人。知道的请给我介绍一下！感谢赏金。