> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# DingTalk H5 App Offline Package

> This document describes what offline package management is and how to use offline packages.

## What Is an Offline Package

An offline package bundles in-page static resources, including HTML, JavaScript, and CSS, into a single compressed archive. When a user opens the app, the Client-side downloads the offline package locally, then loads it directly from the local storage through the DingTalk Client-side. This minimizes the impact of the network environment on DingTalk H5 Micro apps.

## Integration Limits

* Available only on mobile, and the Client-side version must be 6.5.20 or later.
* The total size of the uploaded offline resources must not exceed 10 MB.

## Integration Steps

### Step 1: Enable the Micro App Offline Package Feature

1. Sign in to the [DingTalk Developer Console](https://open-dev.dingtalk.com/).
2. Select the app for which you want to enable the offline package.
3. In the navigation bar, click **Version Management and Release**. On the **Version Management and Release** page, click the **Offline Package Management** button, then click **Confirm**.

### Step 2: Package the Offline Package

1. In your project, install [dingtalk-h5package-opensdk](https://www.npmjs.com/package/dingtalk-h5package-opensdk) via npm.

   ```
   npm install dingtalk-h5package-opensdk --save-dev
   ```
2. In your project, create the offline package configuration file `localresource.json`. Here is an example:

   ```
   {
     "miniAppId": "ID of the offline package to bundle",
     // The mapping between online resource URLs and local files or directories. The key is the online resource URL path corresponding to the local resource, and the value is the local resource directory.
     "assets": {
       // The value is a directory. This configuration adds the resources under the ./dist directory to the https://www.example.com/myapp path.
       "https://www.example.com/myapp": "./dist"
     },
     // The list of external URLs to depend on.
     "externalAssets": [
       "https://unpkg.com/react@16.7.0/umd/react.production.min.js",
       "https://unpkg.com/vue@3.2.45/dist/vue.global.js",
       "https://unpkg.com/jquery@3.6.1/dist/jquery.js"
     ]
   }
   ```
3. Run the packaging command in your project to output a resource file named `${offlinePackageId}.zip` locally.

   ```
   npx h5package pack
   ```

### Step 3: Upload the Offline Package

On the **Version Management and Release** page, click **Please upload the H5 resource package (.zip, .tar, .tar.gz)**, select the archive resource from Step 2, and wait for the offline package to be parsed.

### Step 4: Release the Offline Package

Select the target version of the offline package, click the **Release** button, and then click **Confirm Release**.

## How to Use

In the query parameters of the business URL, append the `dd_mini_app_id` field. Get its value from the **Offline Package ID** on the **Offline Package Management** page.

Example:

Normal URL: [https://www.example.com/myapp/index.html](https://www.example.com/myapp/index.html)

Offline package URL: [https://www.example.com/myapp/index.html?dd\_mini\_app\_id=500000000xxxxx](https://www.example.com/myapp/index.html?dd_mini_app_id=500000000xxxxx)

## Debugging Tools

DingTalk provides a debugging tool for offline packages. Its main features are **checking local offline package information on the phone** and **DevTools for H5 offline package pages**.

Client-side version requirements to use the debugging tool: Android 6.5.35 or later; iOS 6.5.35 or later.

How to use the tool: Scan the following QR Code with the DingTalk Client-side.

After scanning the QR Code, you enter the debugging tool home page.

### H5 Page Diagnosis

How page diagnosis works: When an H5 offline package page opens, the container injects DevTools into the page to monitor how the page runs.

Steps:

1. Click **H5 Page Diagnosis**.
2. Enter the URL of the H5 offline package to enable.
3. Click **Start Diagnosis** to enter the diagnosis page.

### Local Offline Package Check

Steps:

1. Click **Local Offline Package Query**.
2. Enter the `miniAppId`, which is the offline package ID.
3. Click **View Offline Package Information**.