← 日志Evlop 期刊

Shopify 移动应用构建器:原生、Webview 还是混合?

大多数 Shopify 应用构建工具从第一天起就逼您在原生或 WebView 之间二选一,事后改变主意就意味着从头重建。其实有更好的方式:逐页选择,随时用开关切换,无需重新设计。

Shopify 移动应用构建器:原生、Webview 还是混合?

TL;DR: 原生还是WebView?使用Evlop,您不必做出选择。有一个更好的方式:页面页面选择,并随时使用切换按钮而不是重新设计。

大多数Shopify应用构建工具要求您在第一天选择一个方向:完全原生或完全WebView。这种选择以后要改变就会很昂贵。混合方法可以完全去除锁定。您可以页面页面决定,哪些屏幕以完全原生方式运行,哪些屏幕作为优化的网站嵌入运行。您可以选择100%原生,100%WebView,或者介于两者之间,并且可以随时使用切换按钮而不是重新构建来改变主意。

方案含义代价
完全原生每个页面都是真正的原生屏幕,通过手写代码或在无代码构建器中拖拽原生组件来搭建今后每次更新都要重新构建该页面,无论是写代码还是拖拽模块。网站上的任何内容都无法自动沿用
完全 WebView把您的网站套进一个 App 外壳页眉、页脚、弹窗等浏览器元素常常会显露出来,而且页面加载速度取决于您的网站,而不是 App
混合模式由您逐页选择,随时可以更改需要一个能够剔除浏览器元素、并让购物车和结账完全打通的平台,否则最终效果会显得东拼西凑

没人提醒过您的那个选择

大多数构建 Shopify App 的商家,在早期都会遇到同一个岔路口:走完全原生路线,还是把网站套进 WebView。

这看似一个技术细节,其实不然。这一个决定会影响您整个 App 的形态,而且在大多数平台上,一旦上线就无法更改。

选原生,App 里的每个页面都得在构建器工具中从零搭建。选 WebView,您的 App 就会继承网站的页眉、页脚和弹窗——而这些都不该出现在手机屏幕上。

真正的问题不是选择错误,而是大多数平台不允许您稍后更改主意而不从头开始。

native真正能带来的优势

完全native意味着应用中的每个屏幕都是真正的native屏幕。有两种方法可以实现这一点。一些团队手写代码。大多数Shopify商家今天使用无代码应用构建器,拖放native组件到位,而无需触摸一行代码。无论哪种方式,结果都是一样的:真正的native屏幕,而不是假装成一个的网站。

它感觉很快。它感觉很流畅。它感觉像一个应用,因为它确实是一个。

但这种优势在您想要更新某些东西时就会消失。您的网站上的新产品页面布局不会自动传递,无论您是编码还是拖拽块。有人必须在应用构建器中重新构建该页面,与网站分开。

WebView真正能带来的优势

WebView应用跳过了重新构建的步骤。它直接将您的现有网站显示在应用框架中。

它可以快速启动。不需要重新设计任何东西。

但是,大多数webview应用看起来和感觉起来都像它们本质上是什么:一个被塞进手机的网站。为浏览器设计的头部和底部仍然存在。为桌面访客设计的弹窗仍然会弹出。加载时间反映了网站,而不是人们从应用程序中期待的更快的体验。

为什么这不必是非此即彼

这是大多数商家从未被告知的部分。您不必为整个应用程序选择单一的方法。

如果您的商店需要,您可以运行每个页面的本地版本。或者,如果发布速度更重要,您可以运行每个页面作为嵌入的webview。或者您可以采取折中方案:保持您表现最好的页面与网站上完全相同,并以本地方式构建其余部分。

这是一个旋钮,而不是一个开关。并且正确的设置对于每个商店都是不同的。

购物车、结账和账户屏幕通常会从完全本地化中受益。人们快速地在这些屏幕之间移动,而这里的速度直接影响着是否完成了购买。

具有自定义配置器的产品页面或您已经花费了真正的设计时间的集合页面不需要被重建。它只需要在应用程序中显示并正常工作,正如它已经做的那样。

Evlop的WebView嵌入如何解决这个问题

说「可以混合原生和 webview」很容易,但做好却很难,大多数平台在两个具体方面都做得不够。

改变主意通常很昂贵。 在大多数应用构建器中,如果您以 webview 方式启动,后来决定某个页面需要原生,那么就需要重新构建。反之亦然。您在第一天做出的决定通常会默默地成为永久性的,因为撤销它需要真正的时间和开发工作。

这就是 Evlop 的 WebView Embedding 与众不同的地方。每个页面都有一个切换按钮。原生或 WebView,您可以选择,并且可以随时切换。无需重新构建,无需新应用发布,无需等待开发人员。如果某个页面的性能不如您所愿,您可以切换按钮然后继续。

Evlop 仪表盘显示每页原生和 webview 切换按钮,包括登录、产品和购物车页面,适用于 Shopify 应用

大多数 Webview 方案仍然像是网站。 Evlop 的版本不会把整个网站加载到应用中。它只提取实际页面内容、您已付费的设计,并去除仅在浏览器中有意义的页眉、页脚和弹窗。剩余部分被包装在应用的原生框架内,看起来和行为都像是直接在原生环境中构建的。

购物车和结账也是同一系统的一部分。从嵌入的商品页面将商品加入购物车时,是真正的购物车操作,而非模拟。该商品会出现在应用其他位置使用的同一原生购物车中。整个体验没有任何痕迹透露哪些页面是嵌入的,哪些是原生的。

这种方式适合您的店铺吗?

如果以下大多数情况符合您,Hybrid 方案表现良好:

  • 您已经拥有一个设计精良、值得保留的 Shopify 店面
  • 您希望快速上线应用,而无需重新构建已可用的页面
  • 您希望网站和应用能够自动保持同步
  • 您尚未确定哪些页面应为原生,并希望以后可以自由测试和更改

如果出现以下情况,完全原生构建可能更值得考虑:

  • 您的应用需要在外观和体验上与网站不同
  • 您的网站本身存在性能问题,您不希望将其带入应用

您仍在为选择平台而犹豫吗?我们的 对最佳 Shopify 移动应用构建者的比较 将 Evlop 与 Tapcart、Shopney、MobiLoud 等其他平台在定价和集成深度方面进行了对比。

这在日常生活中是什么样子

一位商家使用大部分 WebView 设置启动了他们的应用程序。它可以快速上线,他们的网站已经看起来很好。

几周后,他们注意到他们的产品页面感觉比应用程序的其他部分稍慢一些。他们只需为该页面切换到原生模式。十分钟后,问题就解决了。无需开发人员,无需新构建,无需等待审批。

同时,他们的集合页面已经作为嵌入页面表现良好,因此保持不变。没有任何东西强迫您做出非此即彼的决定,您今天所做的任何选择都不是永久性的。

真正的优势不是原生或 WebView,而是不会被束缚。

每个应用构建者都会告诉您他们的方法是正确的。老实说,正确的方法取决于页面,六个月后可能会改变。

值得使用的平台是那些允许您改变主意而不必付出双倍代价的平台。

这正是 Evlop 的 WebView Embedding 的设计初衷:今天拥有完全的灵活性,日后也能自由调整,无需从头再来。

架构搭建完成后,Evlop 的 Analytics 能让您清楚地了解应用的实际表现。 

看看您的店面作为混合应用会是什么样子。立即开始使用 Evlop。