Author | He Shiyou, Peng Quanhua

At WWDC on June 23, 2020, Apple unveiled The App Clips.

App Clip (official translation: “Apple” applet, a lightweight version of the main app, is designed to provide a quick and easy experience for users in specific situations.

If you pass a coffee shop on your way to work and want to buy a cup of coffee, but find that there are many people waiting in line to place an order and pay, at this moment, you just need to use the iPhone scanning tool to scan the App Clip QR code or NFC label of the coffee shop, you can buy a cup of coffee, without downloading and installing the coffee shop App.

* Photo source: Apple website *

Does this application scenario sound like wechat applet?

Yes, so we immediately after the release of App Clips App Clips and wechat applet comparison and practice (click here to read the details).

We found that Both App Clips and wechat applet exist to solve the same problem. But in terms of development, there are also differences in direction between App Clips and wechat miniprograms.

Wechat applet is 0 to 0.1 and then 1.0. Developers to provide a service, from scratch to develop small programs, users use up go, great experience. App Clips is from 1.0 to 0.1, which is an improvement of the existing App, so there will be less trouble in development.

Below, we will explain some of the important features of App Clip in detail, and use the App Clip Demo as an example to talk about the development of those things. Whether you need to do business, or you need to learn and explore new things, as long as you have a certain development foundation, you can easily get an App Clip through this tutorial.

Technical limitations of App Clip

App Clip can only be used in certain scenarios, that is, to complete a task as quickly as possible, ready to go. You can think of it as the core function app of the main app, and complex tasks should be done in the corresponding main app, so some functions are not allowed to be used in app Clip.

The installation package size must be less than 10 MB

When the App Clip Card is displayed, the App Clip will be downloaded immediately. The size limit of the installation package ensures the user experience — when the user opens the App Clip, there is a high probability that the App Clip has been downloaded.

The specified Framework cannot be used

Assets Library, CallKit, CareKit, CloudKit, Contacts, Contacts UI, Core Motion, File Provider, File Provider UI, HealthKit, HomeKit, Media, Player, Messages, Message UI, PhotoKit, ResearchKit, SensorKit, Speech

The above Framework cannot be used in AppClip. If it is used, it will not report an error at compile time, but will report an error or return an incorrect result when it is run.

Operations related to user privacy

  1. You cannot track user information or obtain a unique user id through identifierForVendor.
  2. User location cannot be obtained continuously. User authorization is requested for each use of the location. Authorization is automatically disabled at 4:00 am the next day. When the location is used again, the user needs to reauthorize it.
  3. App Clip is only allowed to communicate with its corresponding main App, but not with other apps. As a result, wechat login, sharing and payment functions cannot be used in App Clip.
  4. Can not access apple Music, multimedia, contacts, files, sports health, albums and other data.

Other Complex tasks

  1. Background activities: network requests, location updates, etc
  2. Bluetooth connection
  3. App extensions
  4. URL schemes
  5. • You can buy Apple Pay In App Clip, and you can buy Apple Pay In App Clip.

App Clips message push

Wechat small program can not reach users through the way of Push has made developers worried. The system-level applications launched by mobile phone manufacturers can give developers more confidence here. Whether it is Apple’s App Clips or domestic mobile ecological fast apps, the service’s news push ability is an important ability to attract developers.

There are two scenarios of message push in App Clip: short time push and long time push. (View the official document)

Push within a short time

Users can receive notifications within 8 hours of starting App Clip. For example, if a user logs out of the App Clip after purchasing a cup of coffee in the App Clip, the user will receive a “coffee is ready” notification when the coffee is ready. This way only need the Info. The plist add NSAppClip Key properties file, and will be NSAppClipRequestEphemeralUserNotification set to true, you can get news push permissions by default.

Push for a long time

After a user completes a task in App Clip, it may take a few days for the user to receive a push. For example, if a user rents a car in App Clip, the rental period is 3 days, and when it expires, the user will receive “It’s time to return the car” push. This method is the same as ordinary app’s message push, which requires the user’s push authorization.

Create an App Clip using MinCloud

Next, I’ll show you how to quickly create an App Clip for a dynamic data service using MinCloud. This Clip mainly shows a list of products. Click the product to jump to the product details page. By integrating MinCloud to obtain product information from Knowcloud, users can generate a TWO-DIMENSIONAL code for the Clip. Users only need to scan the two-dimensional code with the scanning tool of iOS 14 to jump to the Clip.

Create an App Clip Target

Create an App Clip Target in the existing SugarDemo project and name it SugarClip.

Now that we have a SugarClip directory in our project directory, we can implement App Clip here.

Import MinCloud

Integrate MinCloud through CocoaPods, open the Podfile file, and add the following:

Platform :ios, '11.0' target 'SugarClip' do use_frameworks! Platform :ios, '11.0' target 'SugarClip' do use_frameworks! pod 'MinCloud', :git => 'https://github.com/ifanrx/hydrogen-ios-sdk.git' pod 'Moya', '~> 13.0' pod 'SnapKit' pod 'Kingfisher' end target 'SugarDemo' do use_frameworks! pod 'MinCloud',:git => 'https://github.com/ifanrx/hydrogen-ios-sdk.git' pod 'SnapKit' pod 'Kingfisher' endCopy the code

After the addition, run pod Install.

Import MinCloud from your project. Open the Sugar Clip appdelegate. swift file, add import MinCloud to the top of the file, and add import MinCloud to the application(_: DidFinishLaunchingWithOptions:) method to add:

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { // Override point for customization after application launch. BaaS.register(clientID: "Fdc4feb5403a985fe681 ") // Register clientid BaaS. IsDebug = true // Whether to print logs return true}Copy the code

Obtaining product data

The Product structure

Start by creating a Product structure that represents Product information.

Struct Product: Decodable {public var id: String public var name: String? Public var participantCount: Int? Public var coverImage: String? Public var rating: Double? Public var brief: String? Public var description: String? // Product description}Copy the code

Getting a list of products

func loadProductList() { let table = Table(tableId: "105766") table.find { [weak self] (recordList, error) in if let list: List<Product> = recordList? .listinfo.decoded () {self?.products = list.objects self?.tableView.reloadData()}}}Copy the code

Table corresponds to the Table structure of MinCloud. You can operate the corresponding Table data by using the Table ID. Use the find operation to get all the product records of the product table. Once the product records are obtained, they are decoded as a List object.

Get product details

func loadProduct() { let table = Table(tableId: "105766") table.get(productId) { [weak self] (record, error) in if let product: Product = record? .recordinfo.decoded () {self?.product = product self?.displaySubviews() // Display product details}}}Copy the code

Use the GET operation to specify the Product ID to get all information about the Product. After obtaining the Product record, it is decoded as a Product object.

Product page

View controls such as ProductCell, RatingLabel, and BriefView are created in the project to display product list items, product scores, product introduction and other information respectively. These controls can be reused in the main App and App Clip. Therefore, components to be reused are created in the SugarDemo directory, and SugarDemo and SugarClip are selected in the Target Membership of the corresponding files to be reused.

Wake up App Clip

After the development of App Clip, we can click Smart App Banner, scan qr code or NFC tag, click Siri to get location-based suggestions, SMS and other ways to wake up App Clip.

Before the AppClip can be awakened, you need to configure the Launch Experience, which is to configure a URL and AppClip Card information for the AppClip. You can configure the Local Experience directly during the development phase or on TestFlight. Before releasing the App Clip, configure it on App Store Connect.

This document mainly describes the Local Experience. For other methods, see the Apple development documentation.

  1. Start by running SugarClip on your phone with Xcode.
  2. Open the phone [Settings] – [developer] – [Local Experience] – [Register Local Experience]

  • If you open any URL prefixed with URL PREFIX, it will be treated as an App Clip.
  • Enter the Clip Bundle Id.
  • Fill in the Title, Subtitle, and select an image. This information will be displayed on the App Clip Card.
  1. Step 2 Encode the URL PREFIX into a QR code (www.qr-code-generator.com/).

  1. Scan with the QR code scanner in the control panel and App Clip Card will pop up.

  1. Click view to enter App Clip.

At this point, we have completed the development of an App Clip.

conclusion

Development difficulty:

App Clip technology selection is for iOS developers, for iOS developers, the development of App Clip can be as simple as modifying the configuration can be released. If a small developer wants to get in the hole, there are two ways to go:

  1. Learn iOS native development;
  2. Wait for cross-end frames to match App Clip.

The challenge:

App Clip currently only allows users to use Sign in with Apple and Apple Pay, and cannot integrate mainstream third-party capabilities in offline service scenarios such as wechat login and wechat Pay. This is a challenge to use App Clip to optimize the offline service experience, as not many people in China have Apple Pay. I hope the App Clip team will come up with a better solution soon.

Bonus:

App Clip experience is light and excellent. Developers can use App Clip as the main App to make a trial version for users to experience quickly, so as to reduce the installation threshold for users and improve the overall conversion rate.

Through this article, I hope you can also develop an App Clip efficiently.

reading

  • What’s the difference between App Clips and wechat mini program? We did a hands-on operation
  • With the iOS 14 update, we immediately experimented with Apple’s “mini programs”!