DingTalk H5 App Offline Package

​

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.
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 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 Offline package URL: 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.