用React Native建立一个App Clip

When the App Clip was introduced in iOS 14, we immediately realized that it was something that could be a big opportunity for the Shop app. Due to the App Clip design, being a lightweight version of an app that you can download on the fly, we wanted to investigate what it could mean for us. Being able to instantly show users the power of the Shop app, without having to download it from the App Store and go through the onboarding was something we thought could have a huge growth potential.

当App Clip在iOS 14中被引入时，我们立即意识到这是一个可能成为商店应用的大机会。由于App Clip的设计，是一个可以即时下载的轻量级应用，我们想研究它对我们的意义。能够立即向用户展示商店应用程序的功能，而不需要从App Store下载并通过入职培训，我们认为这可能有巨大的增长潜力。

One of the key features, and restrictions, for an App Clip is the size limitation. To make things even more interesting, we wanted to build it in React Native. Something that, to our knowledge, has never been done at this scale before.

App Clip的一个主要特点和限制是尺寸限制。为了使事情变得更加有趣，我们想用React Native来构建它。据我们所知，以前从来没有人做过这种规模的事情。

Being the first to build an App Clip in React Native that was going to be surfaced to millions of users each day proved to be a challenging task.

作为第一个在React Native中建立一个App Clip的人，每天要面对数百万用户，这被证明是一项具有挑战性的任务。

What’s an App Clip?

什么是应用程序剪辑？

App Clips are a miniature version of an app that’s meant to be lightweight and downloadable “on the go.” To provide a smooth download experience, the App Clip can’t exceed 10MB in size. For comparison, the iOS Shop app is 51MB.

应用程序剪辑是一个应用程序的微型版本，旨在实现轻量级和 "在路上 "下载。为了提供流畅的下载体验，App Clip的大小不能超过10MB。作为比较，iOS商店的应用是51MB。

An App Clip can’t be downloaded from the App Store—it can only be “invoked”. An invocation means that a user performs an action that opens the App Clip on their phone: scanning a QR code or an NFC tag, clicking a link in the Messages app, or tapping a Smart App Banner on a webpage. After the invocation is made, iOS displays a prompt asking the user to open the App Clip, meanwhile the binary of the App Clip is downloaded in the background that causes it to launch instantly. The invocation URL is passed on to the App Clip which en...