Hybrid App - Native WebView wrapper vs Ionic 方法

Posted

技术标签:

【中文标题】Hybrid App - Native WebView wrapper vs Ionic 方法【英文标题】:Hybrid App - Native WebView wrapper vs Ionic approach 【发布时间】:2020-04-22 16:35:21 【问题描述】:

我们计划在开发新的移动应用时采用混合方法。 我们在开发过程中的主要目标是:

在进行 Web UI 更改时最大限度地减少 App Store 提交和批准 在移动设备上实现指纹认证、条形码扫描和推送通知 如果可能的话,尽量减少其他团队的参与(我们需要针对 ios 的特定内容,因此我们不必等待他们的计划)

现在,在我们的移动团队的帮助下,我们仍在两种方法之间做出选择,这就是我们目前得到的结果:

    我们的移动团队创建了一个简单的原生包装应用程序,他们在其中实现原生功能并通过 WebView 显示已部署的 Web 应用程序

    +轻松跳过应用商店提交,我们重新部署网络应用并更新主UI

    +原生功能更可靠

    - 三个不同的项目/团队(Web、android、iOS)并分别编写所需的原生功能

    - (来自 Apple 指南)“您的应用程序应包括功能、内容和 UI,使其超越重新打包的网站。” 使用这种方法,我们可能会在这里遇到麻烦吗?由于主 UI 没有与原生包装器捆绑,而是从我们的外部网站中提取。

    我们使用离子/电容器

    +一个项目/团队在一处拥有原生功能

    + 与原生应用捆绑的 UI

    - 仅通过付费 Ionic Live 应用更新跳过应用商店提交。 如果您的 UI 与原生应用程序捆绑在一起,还有其他简单的方法来实现此类实时更新吗?

我的假设是否正确,是否有任何我们遗漏或值得注意的关键点?

谢谢

【问题讨论】:

【参考方案1】:

您不应该尝试自己构建它,就像您在选项 1 中描述的那样。这会造成巨大的混乱,浪费大量时间,并且意味着您必须将有限/未经测试的代码硬塞进您的内部应用程序中.

Ionic 框架已经是您想象中的包装器,它具有出色的插件支持和文档以及跨平台测试代码。

您应该查看Ionic AppFlow,它可以让您将更新版本部署到应用程序。

默认情况下,您只需使用 Ionic 创建一个普通应用程序,它会生成一个新的二进制构建,然后您每次将其部署到应用商店。

如果您使用 AppFlow 之类的服务,则可以重新部署应用的 html 部分:

实时热代码更新

在您的应用上架之前或之后提供实时应用更新、内容更改、A/B 测试、错误修复等。无需排队,无需等待,无需减速。

这并不能解决所有问题。如果你想添加一个新的功能想要添加一个新的插件,例如,添加一个相机插件,那么你需要制作一个新的二进制文件并像往常一样提交到应用商店。

【讨论】:

【参考方案2】:

在这里完全不同意 rtpHarry,因为我的公司有许多企业客户使用我们的应用程序并在这种情况下运行。目前没有使用 Capacitor,但计划升级到更现代的原生包装器。我们使用纯 HTML/JS/CSS 构建了一个 shell 应用程序,负责加载 ReactJS 包以实现其核心功能。我们发现这种配置非常宝贵,因为它允许我们的企业客户管理他们自己的 Bundle 推送,作为其发布管理的一部分……而不是我们必须参与实际部署。他们可以简单地更改 MDM 中的一个属性(对于他们需要的任何用户分段)并让 shell 检索捆绑包的更新版本。此外,AppFlow 成本受其推送模型的使用影响很大……而上述技术更加灵活和免费。

【讨论】:

以上是关于Hybrid App - Native WebView wrapper vs Ionic 方法的主要内容,如果未能解决你的问题,请参考以下文章

Native App,Web App 还是 Hybrid app

Hybrid App 开发模式

Native APP ,Web APP,Hybrid APP三者对比

Hybrid APP之Native和H5页面交互

HTML5 vs Hybrid APP vs Native APP和技术选型

Hybrid App - Native WebView wrapper vs Ionic 方法