Offline Caching System for iQIYI Hybrid App: Architecture, Implementation, and Performance Optimization

When building a large‑scale app, hybrid‑APP solutions are mature and popular. The WebView container provides standard browser capabilities and can interact with native code via a jsBridge, offering significant room for functional and performance improvements.

Developers can write a single set of H5 code that runs in browsers, native apps, and WeChat, enabling cross‑APP sharing and interaction. iQIYI provides a JSSDK for video services, and this article discusses how to accelerate H5 page loading, improve user experience on weak networks, and reduce server load through offline techniques.

Offline Cache Features

Controllable resource updates (trackable and manageable for each cached page and file).

Selective resource caching (choose which resource types or individual files to cache).

Content compression (optional minification of HTML, CSS, JS, followed by ZIP compression of the whole package).

Deduplication of duplicate resources (different URLs pointing to the same file are merged).

These advantages surpass traditional browser caching, which relies on HTTP headers and often requires manual cache clearing or versioning.

Management Interface

A configuration‑based CLI and a GUI are provided for business teams to manage their caches, backed by an offline management console.

Architecture & Implementation

The system consists of three tightly coupled parts, illustrated in the diagrams (omitted here). The packaging system is the first step: given an accessible H5 URL, the system must obtain all resources to be cached.

Key considerations include:

Resources referenced from external domains.

Pages generated automatically without a local development environment.

To address these, an automated packaging program, a one‑click tool, and a user‑friendly visual platform are required.

Automation

PhantomJS is used to implement a web crawler that follows all 301 redirects and captures every resource request on the final page.

After crawling, a configuration file defines filters, exclusion rules, maximum compressed size, minimum file size, etc., producing an offline ZIP package that includes version information and is uploaded to a CDN for user download.

Visualization

A graphical interface allows business users to perform packaging and management operations efficiently, offering both a basic mode with default settings and a professional mode with full customization. Packaging history is recorded, showing added, updated, or deleted resources per environment and platform.

System Update

Once packaged and published to the CDN, the iQIYI app automatically checks for new versions at startup, downloads updated offline packages in the background, and extracts them locally. This ensures smooth operation even on poor or no‑network conditions.

Interception

When a user opens an embedded H5 page, the WebView intercepts requests and serves matching resources from the decompressed offline package, avoiding network calls and achieving true offline resource delivery.

Conclusion

The offline caching system dramatically improves performance for iQIYI’s embedded H5 pages, especially under 3G/4G or weak‑signal scenarios, eliminating long white‑screen times. Future work includes dynamic offline caching for server‑rendered pages, more flexible cache update mechanisms, and smarter version management to reduce user download traffic.