This article explains in detail how to use Xcode to develop Apple Light Apps (App Clip) with actual combat experience, including the generation of light App codes, precautions and related issues.
Major domestic platforms have successively launched small programs and fast apps. Apple released iOS14 at the 2020 WWDC Developers Conference. Among them, there is a new feature App Clips (light App), users can experience some of the functions of the APP without downloading the APP.
Let me first show you the effect of I have launched the Apple App Store. It should be noted that this light App code must be scanned with an iOS 14.3 or higher version of the Apple Scanner, and other scanning tools cannot read it. In addition, scan the light app code before downloading the app to open the light app, and open the app after downloading the app.
The first thing to note is that the light app is nested in the app like iMessage App and Apple Watch apps, which means that it is not independently developed and deployed. It relies on and shares the app, and the light app is triggered by a specified URL. Yes, the light App code actually generates the specified URL.
The tutorials App Clips , Creating App Clip Codes , Creating an App Clip with Xcode, etc. given by the official website are very simple. Many materials on the Internet are basically translated directly from the official website, and there are still various translations that are not in place!
According to the article on the official website above, the light app must be less than 10m after decompression. You can create a light app in a new project or add a light app to an existing project. The following will explain how to create a light app by adding a light app to an existing project. App.
Next, use Xcode to create a light App, through "File" -> "new" -> "Target..." or "Editor" -> "Add Target...", and then select "iOS" -> "Application"- > "App Clip", it should be noted that the Xcode version is too old and this "App Clip" may not be found:
Next, fill in the sentence according to the actual situation, use it flexibly, and don't just copy it! Don't check "Use Core Data" and "Include Tests" if you don't want to generate too many useless catalog files:
Then simply configure the light app, add associated domain names, logos, start interface graphics, etc.:
Then go to " Certificates, Identifiers & Profiles" in the Developer Center to see if "Associated Domains" is checked. What you need to pay attention to is the "App ID" and "Bundle ID". The App ID was created by the previous main project, and the Bundle ID is When the light App was just created, the Xcode automatically generated the same "Bundle Identifier" in the project, and the two IDs will be used by the apple-app-site-association.
Here is a simple change to the ViewController, to be the simplest light App, that is, directly use WKWebView to nest my website.
Next, you can test it on your mobile phone. If you want to see the effect without publishing to the App Store, you must first configure "Local Experiences" on your mobile phone. After the mobile phone is connected to the Mac, there will be a "Developer" under "Settings". Just go to "Light App", then pull down to find "Local Experiences", then click "Register Local Experiences...", then fill in "URL PREFIX", "BUNDLE ID", "APP CLIP CARD":
Run the light app on the mobile phone, and then generate a QR code with the "URL PREFIX" on the mobile phone above, and scan it with Apple's built-in scanner of iOS 14.3 or higher, and the light app card will pop up:
According to Apple's official website , there are 5 ways to open a light App ( Launch an App Clip ):
There are two kinds of which we can achieve relatively easily, that is, scan the code and open the Safari browser. The scan has already introduced how to experience it on the mobile phone that has not been published to the App Store. In fact, you can directly scan the light app code after it is on the shelf. Open, and open the Safari browser, you need to configure ".well-known/apple-app-site-association" in the server root directory. It should be noted that apple-app-site-association has no suffix. The content is as follows, where "App ID" , "Bundle ID" mentioned above:
{
"appclips": {
"apps": ["App ID.Bundle ID"]
}
}In addition, add in the header of the page
<meta name="apple-itunes-app" content="app-id=myAppStoreID, app-clip-bundle-id=appClipBundleID, affiliate-data=myAffiliateData, app-argument=myAppArgument">What I added here is:
<meta name="apple-itunes-app" content="app-id=Apple ID, app-clip-bundle-id=Bundle ID">
However, I do not know because I do not have to join before the main project reason "Associated Domains" of, visit my website in Safari browser, in the top of the Smart App Banner shows APP banner rather than light App 's (Light App There is a dashed circle outside the icon):
This will have to wait until the next update version to the App Store to check the results. This is also a troublesome part of Apple's application development. It is difficult to find someone to debug if there is a problem. There is no test environment for this light app!
Let's talk about how to generate the light App code. First, upload the project to App Store Connect. If you don't know how to upload, you can read my other article " Packing the iOS app with Xcode in practice and submitting it for review through App Store Connect ".
After uploading the binary file, etc. After constructing the selected version, you can fill in the App information. The title image must be fixed in size like the App preview and screenshot above, here is 1800x1200 pixels!
Under Advanced Light App Experience, there is an "Edit Advanced Experience". After clicking it, add light App information according to the following figure 5 steps. The "Light App Experience URL (URL)" in Step 3 must be matched with the above "Associated Domains" Consistent:
After filling in the light App information, you can get the light App code, you can set different background colors and foreground colors, or the sentence is operated according to actual needs:
When choosing the light App code type, there are two options: NFC and scan only. NFC is only available with NFC tag media, so I directly choose scan only here. The more interesting thing is that these two options are different and the logo in the middle is different. It will also display differently. Scanning shows the camera and NFC shows the phone.
Finally, you can scan the code to open the light app after publishing to the App Store after approval.
Of course, you may also encounter various problems. For example, the "Associated Domains" domain name in Xcode is incorrectly configured or the "Associated Domains" in the developer background is unchecked by you, and the above apple-app-site-association configuration is incorrect. The Identifiers in the developer background are inconsistent with your "Bundle Identifier", the iOS system version is too low or the light app code cannot be read without scanning with Apple's built-in code scanner, etc.
Okay, let’s stop here for this article. Remember to follow the official account to release all kinds of useful information for you every day. If you have any questions, you can ask me for help through APP, mini program comments or online customer service.
There are more original articles on the personal website, the original link: https://www.xubingtao.cn?p=2932
Follow my public account to release all kinds of useful information for you every day.
