Can we build WeChat Mini Apps using open web standards?

You might have heard of WeChat, it's a popular messaging app in China similar to WhatsApp or Telegram. In this deep dive, I'm going to cover why WeChat Mini Apps are such a big deal in China, and showcase how we can build a similar experience using open web standards without relying on a super app like WeChat.

WeChat isn't just a popular messaging app in China, it's practically unavoidable. Even tourists are advised to download it before visiting. WeChat allows users to access a wide variety of services like food delivery, ride hailing, bike rentals, and more without leaving the app. This is why WeChat is called a "super app".

For example, if you wanted to rent a bike in Shanghai, just open WeChat and scan the QR code on the bike to unlock and start riding (no downloads, no signups). Under the hood, the bike service's mini app is downloaded but runs inside WeChat. Your WeChat ID is used for registration/verification and WeChat Pay is used for payment after the ride is complete.

wechat-bike-share.png

WeChat Mini apps proved out a really important use case in the Chinese market: You don’t always need a native app. Sometimes the better experience is to just scan a QR code.

However, outside China, while we have popular apps, we don't have a super app like WeChat. On one hand, we are missing out on the convenience of having a mini app ecosystem with instant login / payments. On the other hand, I don't think we would or should pick one company to become our WeChat.

So, the question is: Can we have a similar user experience to WeChat mini apps without relying on a super app like WeChat? Yes! We can do this by using regular QR codes and open web standards.

Quick Demo

I built a demo app called Antler. When I open up Antler and scan a QR code, I immediately get checked into my co-working space.

What's interesting is that:

  1. No servers are needed to make this happen
  2. Antler uses an open-specification called the IRL Browser Specification, which means anyone can build this into their app.

How Antler Works

What makes Antler unique to WeChat is there is no central Antler server that is used for auth. This is how it works:

antler-how-it-works.png

When a user downloads Antler, they create a profile that is stored locally on their device.

A profile contains:

  • a DID (a W3C standard for identity) - a public key
  • a private key
  • a name
  • link to socials (optional)
  • an avatar (optional)

When a user scans a QR code, Antler opens your website (mini app) inside a WebView and injects a window.irlBrowser object.

The window object is available on all browsers and gives developers access to useful browser features. For example, window.location lets you know the current url you are visiting in the browser. We created a new property called window.irlBrowser and use it as an interface to communicate between the Antler app and your mini app.

Your mini app calls window.irlBrowser.getProfileDetails() and gets back cryptographically signed profile data as a JWT.

{
  "iss": "did:key:z6MkhaXgBZDvotDkL5257faiztiGiC2QtKLGpbnnEGta2doK",
  "aud": "https://yourdomain.com",
  "iat": 1728393600,
  "exp": 1728397200,
  "type": "irl:profile:details",
  "data": 
    {
      "did": "did:key:z6MkhaXgBZDvotDkL5257faiztiGiC2QtKLGpbnnEGta2doK",
      "name": "Danny Mathews",
      "socials": [{ "platform": "INSTAGRAM", "handle": "dmathewwws" }]
    }
}

You should decode and verify that the public key in the iss field was used to sign this data. This way you know only someone with the private key for this DID could have sent it.

And voila, the user is instantly logged into your mini app. Profile details that were stored locally on the user’s device are shared to your mini app and no servers were involved!

Long Term Vision

Using an open specification means anyone can integrate this mini apps ecosystem into their app (i.e., any app that already has a user's profile) can be a "host app" for mini apps. Moreover, any developer can build a mini app that is compatible with any host app.

irl-browser-vision.png

As a developer, building a mini app should be a lot easier to build than a native app. I hope this encourages developers to build apps that we would not be practical to build a native app for ie) building an app for my social clubs, local community events, venues, pop-ups, game nights with friends, or any lightweight gathering where people are physically present.

Here are some example mini apps that you can build:

Lastly, in a future where this specification is adopted by multiple host apps, a user can choose which app they want to use to scan a QR code and scan a QR code at a coffee shop, concert, or conference → You instantly access the experience. No downloads. No signups.

Do users have to download an app to use mini apps?

When demoing Antler to some friends, I noticed some of them were hesitant to download another app on their phone. We can take advantage of the IRL Browser Specification being an open specification to create a temporary / one time account that doesn't require an app to be downloaded.

Here is a client side package irl-browser-onboarding that you can add to your mini app. The package checks if your mini app is being viewed inside an app that uses the IRL Browser Specification, and if not, creates an onboarding flow and injects those details into the window.irlBrowser API that Antler or any IRL Browser would.

This means if users doesn't want to download an app, they can create a one-time / temporary profile just for your mini app, but if they download a host app, they get an immediate login UX and a persistent profile they can use across all mini apps.

Open Source

Antler is open-source. It's a simple React Native app that stores user profiles and public / private key pairs.

Antler uses an open specification to pass data between your mini app and the mobile app. These are the five functions that are defined in the spec.

interface IRLBrowser {
  // Get profile details (name, socials)
  getProfileDetails(): Promise<string>;
  
  // Get avatar as base64-encoded string
  getAvatar(): Promise<string | null>;
  
  // Get details about the IRL Browser
  getBrowserDetails(): BrowserDetails;
  
  // Request additional permissions (in the future)
  requestPermission(permission: string): Promise<boolean>;
  
  // Close the WebView (return to QR scanner)
  close(): void;
}

Being an open specification means anyone can integrate this mini apps ecosystem into their app. i.e) any app can be a host app and all the mini apps that work with Antler will work inside your app (just follow the spec).

Useful Resources

Feathers Auth: One of the inspirations behind Antler. The first time I saw a working demo of local-first auth was this local-first chat app built by David.

IRL Browser Specification - The specification for how IRL Browsers communicate with mini-apps through DIDs and JWTs.

DID - W3C standard for identities. Right now Antler just supports the key method, but there are other methods we could integrate with.

Verifiable Credentials - W3C standard that works with DIDs. It allows you to verify something is true without revealing unnecessary data ex) you could prove you own a ticket to a concert

WeChat MiniApps Docs (in Chinese - but your browser can translate it for you)

MiniApps Standard - A W3C Draft by competitors of WeChat (Alibaba, Baidu, Xiaomi) to create a standard for MiniApps that isn't tied to WeChat. A great way to deep dive into the architecture behind MiniApps.

WeChat Strategy Doc: A 326 page pdf on the different ways companies are using WeChat. It's a great resource.

How Businesses in India Use WhatsApp: A in-depth blog on how businesses in India use WhatsApp. The closest thing to a super app outside of China.

Farcaster Mini Apps - Similar concept to WeChat MiniApps but integrated into the Farcaster social network. It implements a similar specification to IRL Browser ie) uses a WebView to communicate with mini apps and their app and mini apps are built with standard HTML, CSS, and Javascript.

WebXDC - A similar specification to IRL Browser as well. Focused on chat apps that want to integrate a mini app experience into their chat app.

Next Steps

Thanks for taking the time to read this deep dive!

If you are a developer and:

And I want to leave you with this graphic that compares WeChat Mini Apps vs using open web standards to build mini apps.

wechat-antler-comparison.png