提升 Hybrid 体验：饿了么双十一 PHA 框架技术实践

作者：逍菲、崖松、子伦

饿了么端 618、国庆、双11、双12等大促会场基本上会标配底部导航，在之前普通H5容器中底部导航是前端实现，每次点击会场底部导航的tab，都会重新启动一个活动页面覆盖在上面，即使之前打开过的tab也都要重新创建和加载，体验不佳，且H5也不能很好的结合Native能力做进一步的体验和性能优化。

经过调研发现手淘PHA框架可解决上述痛点问题，PHA容器底部TabBar为Native渲染，tab点击时底部bar不会重建，tab对应的webview在整个PHA容器中也可以平滑过渡、无缝切换，无需另起容器。且加载过的tab活动页面Webview会常驻内存，当再次访问时会直接切换至前台，更接近native体验。

在去年 618、国庆、双11和双12大促中，结合饿了么业务特性又陆续落地了一些特色优化手段，带来了更好的性能体验和业务成果。

双十一上线效果

效果视频查看请点击：饿了么双十一 PHA 会场实践

老容器和pha容器对比。其中左侧为老容器会场，右侧为pha容器会场。

PHA 简介

什么是 PHA，PHA 全称 Progressive Hybrid App，是提升 Hybrid 体验的一种新框架，提供了一些 Native 同层组件以及渐进式增强策略来创建 Hybrid APP 应用，让这些应用具有与 Native 相同的用户体验。

• PHA 使用了 Web Application Manifest的配置并且对配置进行了功能扩展
• 每个 PHA 应用都会启动一个 App Worker，Worker 是独立于当前页面运行在客户端里的一段 JS 脚本。可在 Worker 中定制业务逻辑，如基于 LBS 请求底部Tab展示的数据列表
• 应用下可以有多个页面，每个页面的默认渲染引擎是 WebView
• 每个页面中 PHA 提供了像下拉刷新、页头等 UI 能力，都可以通过在 Manifest 中定制
• 针对应用 PHA 还提供了 Tab 容器、Swiper容器、启动屏等 UI 能力和预请求、离线缓存等性能优化能力，可通过在 Manifest 中配置实现

pha架构图

饿了么接入方案

本地生活跟淘宝等业务主要的区别为前者强依赖LBS属性，包括底部 Tab、商品、品牌等数据的召回。因此需要在用户打开PHA框架时，执行定位并加载对应的底部 Tab、顶部横滑数据后，动态组装出对应的manifest.json 数据来渲染PHA，整体架构图如下：

架构图

B端链路

墨斗平台依赖天马源码页面服务来创建会场框架，沿用墨斗数据搭建来配置底部 Tab 和 顶部Swiper 的数据，实现定投，主要流程如下：

注：“墨斗”是一个模块搭建平台，“天马”可以提供基础搭建服务。

数据搭建

数据搭建是墨斗中提供的数据多排期定投能力，配置定投并发布后可得到当前配置的唯一资源位ID，