How Ele.me Boosted Holiday Sale Performance with PHA Hybrid App Framework

Background

During major sales events (618, National Day, Double 11, Double 12), Ele.me's event pages traditionally used a bottom navigation implemented in H5. Each tab click recreated a new activity page, leading to poor experience and limited native optimization.

Solution: PHA Framework

Research showed that Alibaba's PHA framework could solve these issues. The PHA container renders the bottom TabBar natively, keeping WebViews alive and allowing seamless transitions without recreating containers. Loaded tabs stay in memory, providing near‑native performance.

Key Features of PHA

Uses Web Application Manifest with extensions.

Each PHA app launches an AppWorker (independent JS script) for custom logic such as location‑based data for the bottom Tab.

Multiple pages per app, each rendered by a WebView.

UI capabilities like pull‑to‑refresh and header can be customized via the manifest.

Provides Tab container, Swiper, splash screen, pre‑request, offline cache, etc.

Ele.me Integration Scheme

Ele.me's local life business heavily relies on LBS data (bottom Tab, product, brand). When the PHA framework starts, it obtains location, loads corresponding bottom Tab and top Swiper data, and dynamically assembles a manifest.json for rendering.

B‑side Flow

Uses the MoDou platform to create event frameworks, configure bottom Tab and top Swiper data, and support targeted delivery.

C‑side Flow

Implemented three parts: client PHA framework (Tabs, Swiper, splash, AppWorker, pre‑load), source template pages (native.xtpl and web.xtpl), and AppWorker service for manifest customization, UI handling, event processing, and analytics.

Performance Optimizations

Client Adaptations

Added native navigation bar adaptation, image loading adaptation, and stripped unnecessary Taobao dependencies, reducing bundle size.

Pre‑loading and Pre‑fetching

WebView pre‑heat for off‑screen tabs to eliminate white‑screen during tab switches.

Pre‑request first‑screen APIs using existing Ele.me capabilities.

Asynchronous data pre‑fetch at various stages (initial route, tab switch, etc.).

Manifest and Location Optimizations

Injected location data into the half‑finished manifest or passed it via entry URL to avoid extra bridge calls. Pre‑requested the full manifest data (pages, tabs) after obtaining location, reducing first‑screen time by ~150 ms.

Stability and Monitoring

Implemented graceful degradation to H5 if PHA initialization fails, built monitoring dashboards for manifest hit rate, offline resource hit rate, degradation, performance, pre‑heat hit rate, first‑screen time, WebView load time, and white‑screen detection.

Results and Outlook

The PHA integration and related optimizations reduced first‑screen load by about 650 ms, removed white‑screen during tab switches, increased bottom Tab exposure click‑through rate by over 50 % compared to previous events, and set the stage for further enhancements such as TabBar direct rendering, fragment‑based PHA containers, and QuickJS integration.