3
头图

公众号名片
作者名片

Preface

App Clip (Apple officially called it a "light app") is a lightweight version of your existing App. It has some of the functions of your App. You can think of it as a lite version of your existing App.

App Clip is very small in size. The maximum package size before compression is no more than 10 M, and it does not need to be downloaded from the App Store. Therefore, it can ensure timeliness. App Clip card is almost already installed on the device at the same time, and the response is fast. You eagerly hope that users can access certain functions. Maybe App Clip can meet your needs.

meanings of the nouns involved in this article are as follows:

App: App refers to an application with complete functions, that is, the application on the App Store.

App Clip: Refers to the light application to be studied in this article.

Read this article you will learn

  1. What is App Clip?
  2. What can App Clip do?
  3. What can't App Clip do?
  4. How to let users discover your App Clip?
  5. How to develop an App Clip?

You can go to GitHub to get the supporting Demo ( https://github.com/yaoming88/AppClipExample)

What is APP Clip?

There are many points to pay attention to in App Clip. In order to describe it completely and accurately, while avoiding too many official documents to distract readers, the author has translated some official documents. If you already know you can skip the "What is APP Clip?" The coding part.

App Clip is an excellent way for users to quickly access and experience App functions. App Clip is a small part of App function, you can take it and use it when you need it. App Clip adopts lightweight files, runs fast, and is convenient for users to open and use quickly. Whether ordering food from a restaurant, renting a car, or setting up a new networked appliance for the first time, users can start and complete the experience of your App in a matter of seconds. After their experience, you can provide the opportunity to download the complete App from the App Store.

Part of the app

App Clip is a small part of the App, so you can use the iOS SDK to develop in the same Xcode project as the complete App. In addition, because the App Clip is small, it can be opened quickly even if it has not been installed on the device. When you are ready to submit for review, you can manage it in App Store Connect as part of the complete App.

Download the complete app

App Clip provides an opportunity to quickly show the value of App. To make it easier for users to get the complete App, you can display download options in the App Clip at the right time. You can even keep any information provided by the user and seamlessly transfer it to the complete App.

Streamlined design

App Clip focuses on completing a task quickly. In an ideal App Clip experience, users can start and complete a task in a matter of seconds. You can further streamline the experience in the following ways:

Support Apple Pay

Users are not required to provide credit card information, but choose to complete the collection through Apple Pay.

Use with "Log in with Apple"

In order to provide a personalized experience more conveniently, App Clip can use "Login with Apple" to log in to your App service, without requiring users to fill out forms or set up new accounts.

Take it when you need it

A key part of the App Clip experience is the discovery path:

App Clip code

The best way for users to discover App Clip. The App Clip code is beautiful and unique in appearance, and users know that there is an App Clip waiting for them to explore when they see it. Each App Clip code is programmed with a URL, and NFC tags can also be added. Users can read them with their mobile phones or scan them with a camera.

NFC tag

The user only needs to place the iPhone close to the NFC tag you placed in a specific location, even when the screen is locked, you can start the App Clip.

QR code

Place the QR code in a specific location and allow users to scan the code with a barcode reader or "Camera" App to activate the App Clip.

Safari browser App banner ad

If your webpage is configured with a smart App banner ad suitable for App Clip, users only need to tap the banner to open the App Clip.

"Information"

If you enable the sharing function in App Clip, users can send the link via iMessage, and those who receive the link can open it directly from "Messages".

Location information card in "Map"

If your App Clip is associated with a specific location, you can register it in the corresponding location information card of the "Map" so that users can see and open the App Clip at the corresponding location.

Recently used App Clip

App Clip will not be clutteredly displayed on the main screen, but users can find and launch App Clip in the "Recently Added" category of the new App Resource Library.

8 hours notice

App Clip can adopt a new type of notification, which will be displayed to users within 8 hours after the user launches your App Clip. The user taps a notification to return directly to your App Clip.

Location verification

Apple has launched a location verification API specifically designed for use with App Clip to help you confirm whether the actual location of the App Clip code, NFC tag or QR code scanned by the user matches the displayed location. You only need to verify it once.

Multiple App Clip experience

Some apps provide multiple experiences. You can configure the App Clip to support each experience in a special way. For example, a restaurant app can support multiple restaurants. App Clip supports creating a unique experience for each restaurant through a single App Clip.

Complete App experience

If the user has installed your App on the device, the App Clip code and App Clip link will open the App instead of the corresponding App Clip. Your App should handle this link to provide users with the same experience as App Clip.

App Clip limitations

App Clip is a lightweight version of the App, providing some of its functions anytime and anywhere when needed. It provides a focused feature set designed to start immediately, protect user privacy and protect resources. Therefore, App Clip has some limitations. Before creating an App Clip, please check the ( https://developer.apple.com/documentation/app_clips/choosing_the_right_functionality_for_your_app_clip) available in the

Make sure the framework you want to use can work properly on the App Clip

App Clip is developed using SwiftUI and UIKit, and can access the same framework as your complete application. However, limited the framework at runtime function or can not provide function: Assets Library , Background Tasks , CallKit , CareKit , CloudKit , the Contacts , the Contacts the UI , Core Motion , EventKit , EventKit the UI , File Provider , File Provider the UI , HealthKit , HomeKit , Media Player , the Messages , the Message the UI , PhotoKit , ResearchKit , SensorKit , and Speech .

Protect user privacy

App Clip restricts some permissions to protect user privacy and prevent users from tracking across applications and App Clips, for example:

App Clip also comes with restrictions that help protect user data. They cannot access:

  • Apple Music and media
  • Data from applications such as calendar, contacts, files, health, messages, reminders, and photos
  • Exercise and fitness data

In addition, you cannot use FaceID in your App Clip, because the NSFaceIDUsageDescription authorization is not available for App Clip. However, you can use the local authentication framework to authenticate users with Touch ID.

Notice:

Your complete application can only have one App Clip, and the complete application must support all the functions of the App Clip.

coding

I believe that after reading the above content, you should have a very clear idea of what App Clip can do. Next, let's take a look at the code part of App Clip.

Create a demo project

Create a project:

create-project

Add a login module:

create-login-page

running result:

start

Create an App Clip target

App Clip is actually a new target in your original project

create-clip-step1

create-clip-step2

create-clip-step3

create-clip-step4

create-clip-step5

Almost exactly the same

project-folder-structure

Write a few sentences of code

code-snippet-page-main

code-snippet-clip-page-main

code-snippet-page-login

Observation effect

main project operation effect:

choose-scheme-billion-bottle

billion-bottle-start

App Clip running effect:

choose-scheme-clip

clip-start

We see that the login page is perfectly reused by App Clip without any modification. The actual scene will be a little more complicated, and the three-party login entry needs to be hidden.

App Clip Target basic configuration

Configure environment variables

Add the environment variable APPCLIP to the Target App Clip to distinguish the current environment where the shared code is located

config-environment-variables

Adapt according to environment variables

The shared code is adapted according to the environment variable APPCLIP

code-snippet-environment-variables

Associate App Clip with your website ( Associated Domains )

The configuration is similar to supporting Universal Link and Web Credentials. The steps are as follows:

  • appclips:domain.com the target of App and App Clip.

config-associated-domain

  • appclips entry corresponding to this domain name in the Server App Site Association (usually apple-app-site-association file under the .well-known
{
  ...
  "appclips": {
    // App Clip 的  Bundle Identifier
    "apps": ["ABCED12345.com.example.MyApp.Clip"]
  }
}

If you are using Universal Link, you only need to download the file (domain/apple-app-site-association), add the above configuration, and let the operation and maintenance classmates help you put it in the designated location of the Server.

Note: When the user installs the corresponding App for the App Clip, the complete App will replace the App Clip. From that moment on, each call will launch the complete application instead of the App Clip. Therefore, you must associate the complete application with your website. In addition, the complete application must handle all calls and provide the same functionality provided by the App Clip.

Analyze the business you want to achieve with App Clip

App Clip is designed to be free of installation and quick start, so the package size is very limited. Please leave the limited functions to the functions that can quickly attract users or the key business of timeliness.

Module division (App and App Clip shared code extraction)

If you do not develop in modules, you only need to check the Clip target in the shared source file.

config-reused-code-target-membership

If you use CocoaPods sub-module development, it is easier, you only need to rely on the module under the Clip in the Podfile.

config-reused-code-cocoapods

Write function code

Get the information carried by the URL

Like Universal Link, when the App Clip is woken up, the UserActivity lifecycle method of the App Clip will be called, and it will call back based on the technology you are using:

Based on SwiftUI: onContinueUserActivity(_:perform:) )

Based on Scene: scene(_:willContinueUserActivityWithType:)

Based on App Delegate: application(_:continue:restorationHandler:)

After getting NSUserActivity , you can get the evoked URL webpageURL

The code distinguishes between the APP environment and the App Clip environment

Refer to "Configuring Environment Variables" and "Adapting According to Environment Variables" above.

Development phase debugging

In the development phase, you can set _XCAppClipURL and run the App Clip target to simulate the situation that is evoked by a specific URL. When the Associated Domain is set correctly, run App Clip in Xcode, and you can get NSUserActivity containing this environment value. So you can simulate the real scene debugging.

debug-environment-variables

It is almost exactly the same as native APP development. What needs attention is how to get the information carried by the URL when it is called up.

Real machine test

During the development and testing phase, you can test your App Clip Local Experiences.

Real device configuration App Clip experience

Setting -> Developer -> APP CLIPS TESTING -> Local Experiences -> Register Local Experiences -> Fill in the test information

create-local-experiences-step1

create-local-experiences-step2

create-local-experiences-step3

Generate App Clip Code

You can use App Clip Code Generator command line tool or App Store Connect generate App Clip Code .

. 1, download the Clip Code Generator the App and install

2. Execute the following command to generate App Clip Code

AppClipCodeGenerator generate --url https://appclip.example.com --index 9 --output ~/Desktop/filename.svg

app-clip-code-generator

We can see that generate a svg file, more styles please venue and official documents

app-clip-code

hint:

To use App Store Connect to create an App Clip Code, you first need to upload the App version that includes the App Clip and create an advanced App Clip experience. If you have not already done so-for example, during development-use the App Clip Code Generator command line tool instead.

Test the real machine experience

After the above settings are completed, you can experience your App Clip on the real machine.

  • Camera scan
  • The phone is near the NFC tag

data migration

When the user finishes downloading the App, the App Clip data will be automatically migrated to the complete APP.

release

Submit the main application to App Store Connect, and follow the guide to correctly configure the App Clip experience.

Summarize

App Clip development belongs to iOS native development, you can use SwiftUI and UIKit, Swift and Objective-C, the development process is almost exactly the same as native development, and the learning cost for iOS developers is very small.

At the moment when WeChat applets are prevalent, the development prospects of App Clip in China are still not clear. Fortunately, developing an App Clip will not take up too much resources. You must know that focuses on code reuse .

Finally, I recommend an App Clip Shazam . Experience method: Open "Music Recognition" in the control center. When there is music playing around, a notification banner will pop up. Click on the notification banner to open the App Clip and locate the recognized song, which is practical There is also a sense of technology.

refer to

1[[app-clips]](https://developer.apple.com/app-clips)(https://developer.apple.com/app-clips)

more exciting, please pay attention to our public account "Hundred Bottles Technology", there are irregular benefits!


  1. 1

百瓶技术
127 声望18 粉丝

「百瓶」App 技术团队官方账号。