App Clips overview in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare an App Clip target in Swift.

iOS Swift

import SwiftUI

@main
struct MyAppClip: [1] {
  var body: some Scene {
    WindowGroup {
      ContentView()
    }
  }
}

Drag options to blanks, or click blank then click option'

AApp

BAppClipApplication

CAppClip

DAppClipMain

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'App' instead of 'AppClip' causes the app to be a full app, not an App Clip.

The entry point for an App Clip uses @main with a struct conforming to AppClip.

2fill in blank

medium

Complete the code to present the App Clip experience when a user scans a QR code.

iOS Swift

func handleQRCode() {
  let url = URL(string: "https://example.com/appclip")!
  UIApplication.shared.[1](url, options: [:], completionHandler: nil)
}

Drag options to blanks, or click blank then click option'

AstartAppClip

BlaunchAppClip

CopenAppClip

Dopen

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent method like 'openAppClip' causes compile errors.

Use UIApplication.shared.open(_:options:completionHandler:) to open the URL that triggers the App Clip.

3fill in blank

hard

Fix the error in the code that configures the App Clip's invocation URL in the Info.plist.

iOS Swift

"NSUserActivityTypes" = ["[1]"]

Drag options to blanks, or click blank then click option'

Acom.example.appclip

Bcom.example.appclip.invocation

Ccom.apple.corespotlightitem

Dcom.apple.appclip

Attempts:

3 left

💡 Hint

Common Mistakes

Using system identifiers like 'com.apple.appclip' will not work for your App Clip.

The NSUserActivityTypes array must include the App Clip's bundle identifier to handle invocation URLs.

4fill in blank

hard

Fill both blanks to create an App Clip experience that uses a specific invocation URL and a fallback URL.

iOS Swift

let invocationURL = URL(string: "https://example.com/[1]")!
let fallbackURL = URL(string: "https://example.com/[2]")!

Drag options to blanks, or click blank then click option'

Alaunch

Bstart

Chome

Dfallback

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same path for both URLs causes confusion in the app launch process.

The invocation URL path is often 'launch' and the fallback URL path is 'fallback' to handle App Clip launch and fallback behavior.

5fill in blank

hard

Fill all three blanks to define an App Clip invocation using NSUserActivity with a URL and a title.

iOS Swift

let activity = NSUserActivity(activityType: "com.example.appclip.invocation")
activity.webpageURL = URL(string: "https://example.com/[1]")
activity.title = "[2]"
activity.isEligibleForPrediction = [3]

Drag options to blanks, or click blank then click option'

Alaunch

BApp Clip Launch

Ctrue

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Setting isEligibleForPrediction to false disables helpful system features.

The webpageURL should point to the invocation path, the title describes the activity, and isEligibleForPrediction should be true to allow system suggestions.

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