Try App Clips

This article is the 20th day article of Fuller Advent Calendar 2020. On the 19th day, @ nobux42 said "Create the fastest EC site with Next.js and Shopify".

What is App Clips?

App Clips is a new feature in iOS 14 announced at WWDC 2020. I haven't seen it in the middle of town yet, so I will summarize the contents I tried to check the actual behavior as an article.

How to make

Create a suitable project in Xcode and select App Clips from file-> new-> Target ... and add it to Target.

Some files will be created, but let's rewrite the contents of ContentView.swift and execute it.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Welcome to App Clip")
            .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Execution result

I was able to launch the App Clip itself, but the essential card is not displayed.

The App Clip Card settings are made on App Store Connect, so they are not the same as those set during App Clip development. However, there is a good way to check the card, and this time I will use Local Experiences, which is a test function of App Clips, to display the card.

Local Experiences settings

If you open the iPhone settings and go to Developer-> Local Experiences-> Register Local Experiences ..., you will be taken to the screen where you can set the URL, Bundle ID and App Clip Card contents, so set the appropriate URL and Bundle ID. Enter and set the card information as you like.

Now save it, install (Run) the App Clips on your device and you're ready to go. You can display the card by scanning the URL set in Local Experience with a QR code or NFC tag.

$ brew install qrencode
$ qrencode -o - https://example.com | open -f -a preview

Operation check

You can see that the App Clip you just created can be launched by scanning the URL set in Local Experience with the QR code reader in Control Center (which cannot be opened with the standard camera app). This method does not require the setting of Associated Domain or the placement of apple-app-site-association file, so it is recommended if you just want to see the card.

Get the launch URL

Although we were able to confirm the App Clip Card, we can verify the operation when starting from a specific URL by specifying the environment variable at startup for development. App Clip allows you to branch the process by looking at the parameters of the Invocation URL, so it is a function that is likely to be used during development. Select Edit Schema-> Run-> Arguments in App Clip Target and enter the URL you want to test in Environment Variables.

After setting as above, implement the process to get the startup URL with AppClipSampleClip.swift.

AppClipSampleClipApp.swift

@main
struct AppClipSampleClipApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .onContinueUserActivity(NSUserActivityTypeBrowsingWeb) { userActivity in
                    guard let incomingURL = userActivity.webpageURL,
                          let components = NSURLComponents(url: incomingURL,
                              resolvingAgainstBaseURL: true) else {
                        return
                    }

                    print(components.debugDescription)
                }
        }
    }
}

Output result

<NSURLComponents 0x6000016ec3b0> {
  scheme = https,
  user = (null),
  password = (null),
  host = example.com,
  port = (null),
  path = /menu,
  query = parameter1=foo&parameter2=bar,
  fragment = (null)
}

I was able to confirm that the startup URL was obtained.

Data sharing

Let's implement the transfer of data sharing between App Clip and the main application. Since it is a good idea, let's pass the startup parameters acquired earlier to the main application.

First, set up App Groups.

(Using Automatically managed signing) Under Targets, select AppClipSample, select Signing & Capabilities, and under + Capability, select App Groups. There is a section called App Groups under Signing & Capabilities, so press + to create a Group. Follow the same steps to specify the same Group for AppClipSampleClip.

If you set it to the same Group, you will be able to share data with Shared User Defaults, so use that.

AppClipSampleClipApp.swift

@main
struct AppClipSampleClipApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .onContinueUserActivity(NSUserActivityTypeBrowsingWeb) { userActivity in
                    guard let incomingURL = userActivity.webpageURL,
                          let components = NSURLComponents(url: incomingURL,
                              resolvingAgainstBaseURL: true) else {
                        return
                    }
                    guard let sharedUserDefaults = UserDefaults(suiteName: "group.example.appClipMigration") else {
                        return
                    }
                    sharedUserDefaults.set(components.path, forKey: "path")
                    sharedUserDefaults.set(components.query, forKey: "query")
                }
        }
    }
}

AppClipSample/ContentView.swift

struct ContentView: View {
    var body: some View {
        let sharedUserDefaults = UserDefaults(suiteName: "group.example.appClipMigration")
        let path = sharedUserDefaults?.string(forKey: "path") ?? "faild"
        let query = sharedUserDefaults?.string(forKey: "query") ?? "faild"

        return VStack {
            Text("Full Application")
            Text("path: \(path)")
            Text("query: \(query)")
        }
    }
}

Specify the Group name set earlier in init (suiteName :) of UserDefaults and save it. Extract it with the ContentView of the main application and display it.

Now, when you start the main application after starting AppClip, you can confirm that the data was sent successfully.

It seems that you can save the operation contents of App Clip and use it for various purposes when the user installs the main application.

However, as shown below, Keychain cannot be accessed from App Clip, so it seems that the authentication information when logging in on the App Clip side cannot be inherited by the main application.

To preserve user privacy across apps and App Clips, an App Clip can only share its data with its corresponding app. In addition, you can’t make information the App Clip stores in the keychain accessible to its corresponding full app.

At the end

It's easy, but I've summarized what I've tried with App Clip. App Clip can provide an experience without installing an app, so I felt that it was particularly compatible with apps that work with real-life services. There are various other functions, so I hope to continue to try and introduce them.

reference

https://developer.apple.com/documentation/app_clips/testing_your_app_clip_s_launch_experience https://developer.apple.com/documentation/app_clips/making_data_available_to_the_app_clip_s_corresponding_app