Achieving Near‑Native Web App Experience on Mobile with a Hybrid Stack

1. Project Background

Pure native apps provide the smoothest experience, but their updates are constrained by app‑store review cycles and strict policies, especially during heightened scrutiny periods. Android can mitigate this with in‑app updates or hot‑updates, yet iOS lacks such mechanisms. Web apps update instantly but suffer from sub‑par user experience. To combine the strengths of both, a hybrid approach is required.

2. Context

The "YouMi" employee community app originally used a Flutter WebView‑based web app, split between Flutter and H5. The Flutter WebView proved unstable and less compatible than a pure native WebView, leading to poor performance. To improve H5 experience, the team replaced the Flutter WebView with a native WebView and introduced a hybrid stack framework (Flutter Boost) to enable communication among H5, native, and Flutter layers. After extensive iteration, core code was extracted into an SDK, allowing other apps (Flutter‑based or native) to integrate the web module as a plug‑in, achieving near‑native performance.

3. Core Features

The solution guarantees native‑level smoothness while allowing web modules to update without delay. It treats the native app as a web container and loads web modules as dynamic plug‑ins, using the native side for experience and the web side for rapid iteration.

Key problems addressed:

Improve web page loading speed.

Support instant web app updates.

Enable web apps to leverage native capabilities.

3.1 Improve Web Page Loading Speed

WebView loading consists of three stages. In the first stage, the WebView kernel is initialized; pre‑initializing the WebView reduces first‑load latency. In the second stage, network resources are fetched; offline packaging of static assets (HTML, CSS, JS, etc.) and intercepting resource requests to serve local files dramatically speeds up loading. Native HTTP interfaces are also exposed to H5 for faster network calls. In the third stage, rendering is optimized by displaying a skeleton or loading animation first and rendering components as their data arrives, avoiding a full‑screen wait.

3.2 Support Instant Web App Updates

The app acts as a host container, and web modules are treated as plug‑ins managed by a hosting platform. Each offline package (a zip containing all static resources) is uploaded to the platform with a manifest.json that defines version matching, entry URL, and update strategy. The platform maintains a pool of offline packages; the app periodically checks for updates, downloads new packages, and swaps them into an active directory, ensuring the latest code runs without user‑visible delays.

3.3 Enable Web Apps to Use Native Capabilities

Native APIs are exposed to H5, covering lifecycle monitoring, page routing, UI customization, system functions (camera, location, biometric authentication), and native component extensions (video playback, map selection, file preview). These capabilities close the experience gap between pure web and native apps. Extending native features requires updating the host container, but the SDK abstracts most of the complexity.

4. Architecture Details

4.1 Flutter‑Native Hybrid Stack Management

Flutter Boost is used to manage a mixed stack where both native pages and Flutter widgets coexist. MethodChannel bridges Flutter and native code for parameter passing and navigation. This allows developers to implement complex features in Flutter when H5 cannot achieve them efficiently.

4.2 Core Role of Flutter Boost

All pages are managed by a native page stack; both native and Dart code can push native pages or Flutter widgets, enabling seamless navigation across technologies.

5. Integration Options

Three integration paths are offered:

Full‑stack Flutter app using a Flutter plugin to open a fast‑loading H5 container, allowing gradual migration of Flutter features to H5.

Native app (or Flutter app with native container) that incorporates only the native SDK for instant H5 loading.

Quick‑build approach: generate a Flutter app template, integrate the SDK, and update H5 offline packages via the hosting platform.

Note: If the existing Flutter app already uses a Flutter WebView for landing pages, this SDK is not recommended due to unresolved compatibility bugs.

6. Future Outlook

Further improvements include same‑layer rendering to replace H5 elements with native components, enhanced disaster recovery for lost or corrupted offline packages, and stronger data security measures for obfuscated front‑end code. The ultimate goal is a zero‑maintenance ecosystem where business teams only need to update offline packages while the SDK handles all underlying complexities.

7. Acknowledgements

Thanks to the UX Technology team for their support throughout the project. The UX Technology department is actively hiring front‑end engineers; interested candidates can contact us via the official WeChat public account.