App Clips overview in iOS Swift - Mini App: Build & Ship

Build: App Clip Welcome Screen

This screen welcomes users to the App Clip and shows a brief message with a button to open the full app.

Target UI

-------------------------
|      App Clip         |
|-----------------------|
| Welcome to our App!   |
|                       |
| [Open Full App]       |
-------------------------

Show a title 'App Clip' at the top center

Display a welcome message below the title

Add a button labeled 'Open Full App' centered below the message

When the button is tapped, print 'Open full app tapped' to the console

Starter Code

iOS Swift

import SwiftUI

struct AppClipWelcomeView: View {
    var body: some View {
        VStack {
            // TODO: Add title text here
            // TODO: Add welcome message here
            // TODO: Add button here
        }
        .padding()
    }
}

struct AppClipWelcomeView_Previews: PreviewProvider {
    static var previews: some View {
        AppClipWelcomeView()
    }
}

Task 1

Task 2

Task 3

Task 4

Solution

iOS Swift

import SwiftUI

struct AppClipWelcomeView: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("App Clip")
                .font(.largeTitle)
                .fontWeight(.bold)
                .multilineTextAlignment(.center)
            Text("Welcome to our App!")
                .font(.title3)
                .multilineTextAlignment(.center)
            Button(action: {
                print("Open full app tapped")
            }) {
                Text("Open Full App")
                    .font(.headline)
                    .padding()
                    .frame(maxWidth: .infinity)
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
            .accessibilityLabel("Open Full App Button")
        }
        .padding()
    }
}

struct AppClipWelcomeView_Previews: PreviewProvider {
    static var previews: some View {
        AppClipWelcomeView()
    }
}

This SwiftUI view uses a vertical stack (VStack) to arrange the title, message, and button vertically with spacing.

The title uses a large bold font and is centered. The welcome message uses a smaller title font and is also centered.

The button has a blue background with white text and rounded corners to look tappable. When tapped, it prints a message to the console.

Accessibility label is added to the button for screen readers.

Padding is added around the content for spacing from screen edges.

Final Result

Completed Screen

-------------------------
|      App Clip         |
|-----------------------|
| Welcome to our App!   |
|                       |
| [Open Full App]       |
-------------------------

Tapping 'Open Full App' prints 'Open full app tapped' in the Xcode console

Stretch Goal

Add a link that opens the full app using a URL scheme when the button is tapped

💡 Hint

Use UIApplication.shared.open(URL) inside the button action with a valid URL scheme for your full app

Practice

1. What is the main purpose of an App Clip in iOS development?

easy

A. To provide a full app experience offline

B. To replace the full app with a smaller version permanently

C. To create a separate app that runs only on Apple Watch

D. To let users quickly access a small part of an app without installing the full app

Solution

1. Step 1: Understand App Clip purpose

   App Clips are designed to let users quickly use a part of an app without downloading the full app.

2. Step 2: Compare options

   Options B, C, and D describe different app concepts, not App Clips.

3. Final Answer:

   To let users quickly access a small part of an app without installing the full app -> Option D

4. Quick Check:

   App Clip purpose = quick partial app access [OK]

Hint: App Clips are for quick, partial app use without full install [OK]

Common Mistakes:

• Thinking App Clips replace full apps permanently
• Confusing App Clips with watchOS apps
• Assuming App Clips work offline fully

2. Which SwiftUI view modifier is commonly used to handle App Clip launch URLs?

easy

A. .onAppear()

B. .onOpenURL()

C. .onTapGesture()

D. .onReceive()

Solution

1. Step 1: Identify URL handling in SwiftUI

   The .onOpenURL() modifier is used to respond when the app or App Clip is opened via a URL.

2. Step 2: Eliminate other options

   .onAppear() triggers on view load, .onTapGesture() on taps, and .onReceive() on publishers, none specifically handle URLs.

3. Final Answer:

   .onOpenURL() -> Option B

4. Quick Check:

   URL handling = .onOpenURL() [OK]

Hint: Use .onOpenURL() to handle launch URLs in App Clips [OK]

Common Mistakes:

• Using .onAppear() to handle URLs
• Confusing gesture handlers with URL handlers
• Not handling URLs at all

3. Given this SwiftUI code snippet for an App Clip, what will be printed when the App Clip is launched via URL myapp://order?

struct ContentView: View {
  var body: some View {
    Text("Welcome")
      .onOpenURL { url in
        if url.absoluteString == "myapp://order" {
          print("Order page opened")
        }
      }
  }
}

medium

A. Order page opened

B. Welcome

C. No output

D. Error: URL not handled

Solution

1. Step 1: Analyze .onOpenURL closure

   The closure checks if the URL string equals "myapp://order" and prints "Order page opened" if true.

2. Step 2: Match launch URL

   The App Clip is launched with URL "myapp://order", so the condition is true and the print statement runs.

3. Final Answer:

   Order page opened -> Option A

4. Quick Check:

   URL matches condition = print output [OK]

Hint: Check URL string in .onOpenURL to predict print output [OK]

Common Mistakes:

• Assuming Text("Welcome") prints to console
• Ignoring the URL check condition
• Thinking no output occurs on URL launch

4. Identify the error in this App Clip launch code snippet:

struct ContentView: View {
  var body: some View {
    Text("Hello")
      .onOpenURL { url in
        if url.scheme == "myapp" {
          print("App Clip launched")
        }
      }
  }
}

medium

A. Missing .onAppear() modifier

B. Using url.scheme instead of url.absoluteString

C. No error, code works correctly

D. Incorrect URL scheme comparison syntax

Solution

1. Step 1: Check URL property usage

   Using url.scheme to check the scheme part of the URL is valid and common practice.

2. Step 2: Verify syntax and logic

   The comparison url.scheme == "myapp" is correct, and the print statement will run if the scheme matches.

3. Final Answer:

   No error, code works correctly -> Option C

4. Quick Check:

   URL scheme check syntax = correct [OK]

Hint: url.scheme is valid for checking URL scheme in .onOpenURL [OK]

Common Mistakes:

• Thinking url.scheme is invalid
• Expecting url.absoluteString always needed
• Confusing URL parts and syntax

5. You want your App Clip to launch automatically when a user taps an NFC tag with URL https://example.com/pay. Which two steps are necessary to enable this behavior?

hard

A. Configure the NFC tag with the URL and add the URL to the App Clip's Associated Domains

B. Add the URL to the App Clip's Associated Domains and implement .onOpenURL to handle it

C. Implement .onAppear() to detect NFC and configure the NFC tag in the full app

D. Configure the NFC tag with the URL and implement .onTapGesture() in the App Clip

Solution

1. Step 1: Configure NFC tag with URL

   The NFC tag must contain the URL that triggers the App Clip launch.

2. Step 2: Add URL to Associated Domains

   The App Clip's Associated Domains must include the URL domain to allow the system to recognize and launch the App Clip from the NFC tag.

3. Final Answer:

   Configure the NFC tag with the URL and add the URL to the App Clip's Associated Domains -> Option A

4. Quick Check:

   NFC tag + Associated Domains = App Clip launch [OK]

Hint: NFC tag URL + Associated Domains enable App Clip launch [OK]

Common Mistakes:

• Thinking .onAppear() detects NFC automatically
• Using .onTapGesture() for NFC detection
• Not adding URL to Associated Domains