Implementing Offline‑Capable H5 in Mobile Apps Using WebView and JSBridge

The article presents a comprehensive solution for embedding H5 content inside a mobile app using a WebView, while providing offline‑package capabilities that improve first‑screen performance and enable reliable operation without network connectivity.

It first examines several JS→Native communication methods, including:

Fake URL scheme (e.g., scheme://getUserInfo/action?param=xx&callbackid=xx )

Prompt/Alert interception (synchronous return)

JSContext injection (UIWebView only, not recommended)

Android addJavascriptInterface (current best practice)

iOS WKWebView MessageHandler (official API, asynchronous)

Based on the analysis, the recommended approach is to use addJavascriptInterface on Android and a combination of MessageHandler and prompt on iOS.

The JSBridge SDK is then designed to hide platform differences. Core APIs include:

class BridgeNameSpace {
  invoke(eventName, params, callback) { /* generate callbackId, call native */ }
  invokeSync(eventName, params) { /* prompt for sync result */ }
  invokeCallbackHandler(id, result) { /* native calls back */ }
  getSystemInfo(callback) { return new Promise(...); }
  subscribe(eventName, callback) { /* publish/subscribe */ }
  notify(eventName, params, callback) { /* cross‑WebView messaging */ }
}

The SDK supports both Promise‑based and callback‑based usage, making it easy for front‑end developers to call native features such as system info, toast, loading bar, and page navigation.

For offline support, the article defines an "offline‑package protocol". Each package is a ZIP containing a mandatory page-frame.html , a config.json (global and per‑page settings), and the usual static assets (js, css, img). Example structure:

zip/
 ├─ page-frame.html
 ├─ config.json
 ├─ css/
 │   └─ main.f855e6bc.css
 ├─ js/
 │   ├─ 787.d4aba7ab.chunk.js
 │   └─ main.8381e2a9.js
 └─ img/
     └─ arrow.80454996.svg

The config.json can specify navigation bar visibility, theme colors, and per‑page overrides, enabling flexible UI control without code changes.

Offline‑package management includes version metadata (pid, verify_code, md5, gray_rule, pkg_url, SDK version, status, etc.). The app fetches a package‑list configuration at launch or after a configurable interval, pre‑downloads high‑priority packages, and falls back to online resources when a package is missing or fails verification. Security checks cover domain whitelisting, MD5 verification, and pid‑verify_code matching.

Stability and security considerations are addressed by:

Resource integrity verification (package‑level and file‑level checks)

Domain whitelist enforcement for all network requests

Graceful fallback strategies for download, unzip, and rendering failures

Optional sandboxing for sensitive scenarios (e.g., finance apps)

Finally, the article summarizes the evolution of hybrid development, emphasizing that a well‑designed JSBridge and offline‑package workflow can give H5 the performance and reliability needed for modern mobile products.