How to Add DingTalk H5 Micro‑Apps to the Home Screen Using PWA Techniques

Background

Many internal applications in our company run inside DingTalk. Accessing a specific feature usually requires navigating through DingTalk → chat → app list → app → sub‑page, which is cumbersome. To improve efficiency we want a shortcut‑like experience similar to WeChat Mini‑Programs.

Research

Unfortunately DingTalk H5 micro‑apps do not provide an "add to home screen" function like WeChat Mini‑Programs. We discovered that on iOS the WeChat Mini‑Program shortcut is created via Safari's Add to Home Screen feature.

PWA (Progressive Web Application)

PWA allows a web app to be launched directly from the device home screen, run fullscreen, and behave like a native app.

When a supported mobile browser visits a PWA, the browser shows a banner indicating the app can be installed.

After the user taps the banner, an install prompt displays the app name and icon.

If the user confirms, the app icon appears on the home screen.

The app is then installed and can be launched directly.

For more details see the MDN article "Make PWA easy to install".

WeChat Mini‑Program Add‑to‑Desktop Process

Tap the capsule icon in the top‑right corner of WeChat, then select "Add to Desktop" (see screenshot).

On Android the shortcut appears immediately; on iOS Safari opens a guidance page before the shortcut is created.

iOS opens Safari and shows a guidance page (see screenshots).

After following the guidance, the shortcut opens the landing page.

Clicking the shortcut launches the Mini‑Program (cold or hot start).

The shortest user path for "Add to Desktop" is therefore:

Generate a link and open it in Safari.

Check whether the user has already created a shortcut:

The landing page then triggers a cold/hot start of the Mini‑Program.

Solution Design

We can combine the PWA Add to Home Screen feature with DingTalk micro‑app AppLink capability to create desktop shortcuts.

1. Generate a link and launch the browser

Because DingTalk's dashboard cannot be customized, we guide users to open the link in the external browser.

The default browser opens the current page URL, so we intercept the entry point to distinguish normal business navigation from shortcut creation. If the page is opened in a mobile browser, we display the guidance page.

// If opened in a mobile non‑DingTalk browser, treat as shortcut scenario
const [isNeedAddToDesktop] = useState(isMobileUserAgent());
useJumpToDesktopPage();

if (isMobileUserAgent() && dd.env.platform === 'notInDingTalk') {
  console.log('window.location.href 2', window.location.href);
  // Intercept business page when adding to desktop
  if (window.location.href.indexOf('desktop') < 0) {
    const newQuery = { ...(params || {}), time: new Date().getTime() };
    const fullPath = `${path}?${Object.keys(newQuery)
      .map(key => `${key}=${newQuery[key]}`)
      .join('&')}`;
    const redirectPath = encodeURIComponent(fullPath || '/');
    // Use next navigation – hash replacement causes original path to be used
    window.location.href = `/new/pages/package/desktop/index?redirect=${redirectPath}`;
  }
}

2. Determine whether the link has been consumed

const storeKey = `${redirectPath}`;
const storeValueObj = JSON.parse(localStorage.getItem(storeKey) || '{}');
const prevCount = storeValueObj?.count || 0;
const currentCount = `${prevCount * 1 + 1}`;
const isSamePage = storeKey === storeValueObj?.storeKey && storeValueObj?.time === queryObj?.time;
const isFirstVisitRef = useRef(!isSamePage);
console.log('isFirstVisit', isFirstVisitRef.current);
localStorage.setItem(
  storeKey,
  JSON.stringify({
    time: queryObj?.time,
    count: isFirstVisitRef.current ? 1 : currentCount,
    storeKey,
  })
);

3. Show guidance page if not consumed

{
  isFirstVisitRef.current ? (
    <div className="guide-add-area">
      <h3>Add PartnerApp to Home Screen</h3>
      <p>1. Tap the bottom "Share" button</p>
      <img src="//g.xxx.com/desktop-navigator.png" alt="PartnerApp" />
      <p>2. Choose "Add to Home Screen"</p>
      <img src="//g.xxx.com/desktop-add.png" alt="PartnerApp" />
    </div>
  )
}

4. Show landing page if already consumed and jump to app

useDidShow(() => {
  if (!isFirstVisitRef.current) {
    goDDpage(); // Use DingTalk AppLink to open H5
  }
});

5. Provide manifest and icons for launch screen

<link rel="manifest" href="https://g.xxx.com/manifest.json">
<link rel="manifest" href="https://g.gxxxxxx.com/manifest.webmanifest">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://g.xxx.com/desk-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://g.xxx.com/desk-icon.png" />
<link rel="shortcut icon" href="https://g.xxx.com/desk-icon.png" />

Some browsers can generate a splash screen from the manifest when the PWA starts.

The splash screen is generated from the provided icon, theme color, and background.

Conclusion

We have detailed how to implement desktop shortcuts for DingTalk H5 micro‑apps using PWA add‑to‑home‑screen and AppLink. One remaining issue is how opening the shortcut affects the micro‑app's routing stack.

What routing changes occur when a shortcut opens a micro‑app page?

The shortcut adds a new page to the navigation stack, increasing the history depth, instead of performing a Relaunch which would reset the stack.

DingTalk → micro‑app home → list page → "Add to Desktop" → stack: Home + List.

Using the shortcut opens the list page again → stack: Home + List + List.

Repeating adds another List page to the stack.

Only Mini‑Program‑type apps support Relaunch in DingTalk, so we currently rely on product design to treat shortcut‑opened pages as first‑level pages to mitigate deep stack issues.