How We Built a Custom “Can I Use” for Alipay’s Mobile Client

Editor’s note: This article is the transcript of Ant Group frontend engineer Bu You’s talk at SEE Conf 2022, including video and text.

Background: Compatibility Issues in Alipay Client

Browser differences in implementing web standards cause compatibility problems, which become more pronounced as browsers evolve. Standard “Can I use” data does not reflect the Alipay client, which uses the UC engine with its own support and cuts, making it hard to judge method availability.

Therefore a dedicated Alipay “Can I use” was considered.

Solution: Detecting Compatibility on the Alipay Client

The solution runs detection scripts directly in the Alipay client. The workflow includes: developing a detection script on the server, hosting it, delivering the script URL to the client, executing it when a user opens a specific page, reporting results to a monitoring platform, storing them in an offline table, processing the data, feeding it back to a real‑time database, and visualizing the compatibility results.

Key Point 1: Sufficient Sample Size

Alipay’s wealth‑management business provides a large, diverse user base, ensuring enough data for reliable detection.

Key Point 2: Script Development

The script consists of assertions (JS, CSS, HTML) and custom checks such as GPU, WebGL, and screen size. Its structured design allows adding a new assertion and obtaining a result within a day.

Key Point 3: Business Isolation

Detection runs in an isolated iframe to avoid affecting normal code and uses a separate OSS‑hosted script URL so that script updates do not interfere with business releases.

Key Point 4: Big‑Data Processing

Client reports are aggregated to save bandwidth; the backend splits the aggregated data, reduces billions of records to tens of thousands through hierarchical aggregation, and stores the final results in a real‑time database for display.

Key Point 5: Visualization

The dashboard shows mobile‑focused compatibility percentages based on the UC engine, allowing developers to quickly decide whether a feature is usable in Alipay.

Example: “sticky” is reported as supported by over 99.99% of Alipay users, even though its support in Chrome varies.

Data Conclusions: Interesting Findings

1. Summary Findings

Users on iOS 8‑ and Chrome 40‑ are now negligible; ES5 is fully supported, ES6 support exceeds 99% and continues to rise.

2. Browser‑Unsupported but Alipay‑Supported

Some APIs, such as Promise.finally, are supported earlier in the UC engine than indicated by standard “Can I use”.

3. Browser‑Supported but Alipay‑Unsupported

Other APIs, like String.normalize, are not available in the UC engine despite being supported in Chrome.

4. Screen‑Effect Analysis

Using detected screen‑aspect‑ratio data, a tool ranks the top‑10 ratios and shows how much of the user base can see a given screen region, helping to place conversion‑critical elements.

Future Exploration

Planned improvements include finer‑grained analysis by ES version, array and object methods, and longitudinal studies of API evolution. The data also enables customized Polyfill.io recommendations per UC engine version and iOS version.

Review

To build a custom “Can I use”: develop detection scripts, deploy them, collect and clean data, and visualize the results. The process is straightforward and can be adapted to other business contexts.