Hybrid App Development: Architecture, Offline Package Management, and Container System

1. Background and Motivation

Hybrid development combines web technologies with native containers, allowing offline mobile apps that embed web pages in a native wrapper.

Why choose hybrid

Richer user experience via native APIs (camera, location, Bluetooth).

Fast feature delivery through hot updates without app store releases.

Unified UI across iOS and Android using web tech.

Broader user coverage with a single code base.

2. Overall Architecture

The system consists of an offline package management platform and the app runtime. Static H5 resources are packaged, uploaded to CDN and the platform; the app fetches package configuration, loads local resources when needed.

2.1 Offline Package Management System

Platform provides configuration, version control, and publishing. The CLI tool packages static assets into a zip containing js, css, img, pages, and config.json.

// script install
npm i @auto/dt-fe-cli
dt-fe-cli offline --config hybrid-config.json

Package directory structure:

h5id
├── js/
├── css/
├── img/
├── pages
│   ├── index.html
│   └── list.html
└── config.json

Configuration file fields: id, h5Id, version, webpages, resources, web3d_t, url, etc.

2.1.3 Release Process

Run dt-fe-cli offline during build to generate and upload the package.

Upload updates test environment configuration.

After verification, publish the package to production via platform API.

2.2 Container System

WebView management opens containers via specific routes, intercepts all H5 requests, serves cached resources, and triggers preload on close.

Offline package management handles update checks, multi‑threaded download, disk space cleanup, LRU eviction, and distinguishes test vs. production environments.

Update timing includes first cold start (full download after 20 s), post‑WebView close, and QR‑code triggered downloads.

Disaster recovery falls back to online resources when unpacking fails, network timeout, or download errors occur.

3. Summary

The solution is already deployed, solving page‑load performance and white‑screen issues, and greatly improving user experience.