App Clips: The "Try Before You Buy" of Mobile Apps

Downloading an app is a huge commitment. “I just want to pay for my parking.” “I just want to buy this coffee.” I don’t want to search the App Store, type my password, wait 2 minutes, and register an account. Enter App Clips (iOS) and Instant Apps (Android). They are small (< 10MB) parts of your app that launch instantly without installation. They appear as a card at the bottom of the screen. One tap. Done.

Why Maison Code Discusses This

We believe the boundary between “Store” and “Site” is dissolving. Luxury brands spend millions on physical stores. They spend millions on Apps. But there is a chasm between them. App Clips assume the role of the bridge. If a customer is holding a product in your store, your App should already be on their phone. Not a website. A Native Experience.

1. The Use Cases

1. Retail (The Smart Tag): Scan a QR code on a shoe to see sizes in stock. Request a size to the fitting room.
2. Payments (The Scooter): Tap NFC on a Lime scooter to Enable it. No account needed. Apple Pay and go.
3. Vouchers (The Gift): Receive a iMessage with a high-value discount. Tapping it opens the Clip, not the browser.
4. Restaurants: Scan table QR to order. No waiter needed.

2. Technical Constraints (The < 10MB Rule)

Apple is strict. The uncompressed binary must be under 10MB (sometimes 15MB for iOS 17+). This is tiny. A standard React Native app is easily 30MB. Optimization Strategy:

• Tree Shaking: Remove unused code aggressively.
• No Heavy Libraries: Moment.js, Lodash, Lottie… delete them.
• Assets on CDN: Don’t bundle images. Load them from the network.
• Code Splitting: If you use React Native, use import() to lazy load everything. You are building a “Mini App”, not a “Full App”.

3. Implementation in Expo / React Native

Expo Config Plugins make this manageable, but it’s still advanced. You need a separate Target in Xcode.

// app.json (Expo Config)
{
  "expo": {
    "ios": {
      "bundleIdentifier": "com.maisoncode.store",
      "appStoreUrl": "https://apps.apple.com/app/id123",
      "associatedDomains": ["applinks:maisoncode.paris"]
    },
    "plugins": [
      [
        "expo-app-clip", 
        { 
          "name": "Maison Clip",
          "bundleIdentifier": "com.maisoncode.store.Clip"
        }
      ]
    ]
  }
}

You must manage two builds: The Main App and the Clip. They share code, but have different entry points.

4. The Smart App Banner

How do users find the Clip?

1. Safari Banner: <meta name="apple-itunes-app" content="app-id=123, app-clip-bundle-id=com.maisoncode.store.Clip">. If the user visits your site on Safari, a “Open” buttons appears.
2. NFC Tags: Encoded with the URL https://maisoncode.paris/product/123.
3. App Clip Codes: Those circular QR code things Apple designed. They are beautiful and proprietary.
4. Maps: Place cards in Apple Maps can launch a clip (e.g., “Order Food”).

5. State Continuity (Data Handover)

If the user loves the Clip experience and decides to download the Full App, they must not lose their state.

1. User adds item to Cart in Clip.
2. User installs Full App.
3. User opens Full App and the item is still in the Cart.

We achieve this using Shared App Groups (iOS Keychain sharing). Or simpler: Save the cartId in the local secure storage. On Full App launch, check if there is legacy data from the Clip container.

// Shared Storage Logic
import * as SecureStore from 'expo-secure-store';

const SHARED_GROUP = 'group.com.maisoncode.data';

export async function saveCartId(id: string) {
  // Save to shared container
  await SecureStore.setItemAsync('cart_id', id, {
    keychainService: SHARED_GROUP
  });
}

6. The 8-Hour Rule (Push Notifications)

App Clips have a superpower. Once launched, you have permission to send Push Notifications for 8 hours. You don’t need to ask permission. Use Case:

• User orders food via Clip.
• You send: “Order Received.”
• You send: “Order Ready.”
• You send: “Download full app for loyalty points.” This temporary channel is high-value real estate. Do not spam.

7. The QR Code Design (Aesthetics)

Standard QR codes are ugly. Apple’s App Clip Codes are circular and branded. But you need special tools to generate them. For generic QR codes, use “Designer QR” tools that embed your logo and use your brand colors. The QR code is part of the packaging. It must look premium. Embed usage instructions: “Scan to Enable”. Don’t assume people know what to do.

8. The Discoverability Solution (Maps & Search)

App Clips are not just for physical tags. They appear in Apple Maps. If you search for “Panera Bread”, the “Order Food” button launches the Clip. They appear in Spotlight Search. Use NSUserActivity to index your Clip’s content. If you sell “Red Shoes”, index that keyword. When a user searches “Red Shoes” on their iPhone home screen, your Clip appears. This is SEO for OS.

9. Testing App Clips (The TestFlight Pain)

Testing Clips is harder than testing Apps. You cannot just “Run” it easily. Local Experience:

• You must configure the “Local Experience” in Settings -> Developer -> App Clips.
• You type the URL https://maisoncode.paris/p/123.
• It launches the debug binary. TestFlight:
• You must upload the Clip with the Main App.
• Testers don’t see the Clip by default. They have to “Open App Clip” from the TestFlight card. Plan extra time for QA cycles.

10. The 30-Day Limit (Data Persistence)

App Clips are ephemeral. The OS deletes them after 30 days of inactivity. And crucially: The OS deletes their data. Cookies, LocalStorage, SecureStore… all wiped. Strategy:

1. Cloud Sync: If the user logs in (Apple ID), sync their cart to your backend immediately.
2. Conversion: Your #1 goal is to get them to install the Full App within that window.
3. Upgrade Prompt: “Install the full app to save your order history.” Don’t rely on local storage for anything permanent.

11. The Security Sandbox (Limitations)

App Clips are untrusted. Apple sandboxes them heavily. You CANNOT:

• Access HealthKit (Heart rate data).
• Access Contacts or Photos (without explicit, hard-to-get permission).
• Run Background Tasks (Syncing in background). You CAN:
• Use Apple Pay.
• Use Location (While Using).
• Use Bluetooth. Design your flow knowing these limits. Don’t try to build a “Fitness Tracker” as a Clip.

12. Instant Hotspot and Wifi (The Magic)

A rare but powerful feature. You can configure a Clip to configure the Wi-Fi. Scenario: User walks into a Coffee Shop. Action: Scans QR on table. Result: Clip launches AND connects the phone to the Coffee Shop Wi-Fi instantly. No password typing. This is a magical “Welcome” experience that brands ignore.

13. The Apple Pay Sheet (Conversion)

In an App Clip, you cannot ask them to type a Credit Card. The keyboard is friction. You must use Apple Pay. The UI is standardized. The user trusts it. Biometrics (FaceID) confirm the payment. UX Tip: Do not show a “Add to Cart” button. Show an “Apple Pay” button directly on the Product Page. Reduce steps. Clip -> Apple Pay -> Done. This mimics the “One Click Buy” of Amazon.

14. Conclusion

App Clips reduce the CAC (Customer Acquisition Cost) of mobile apps. They lower the barrier to entry. They turn “Install App” (High Friction) into “Use App” (Zero Friction). They are the perfect onboarding flow. Stop begging for downloads. Start offering value.

---

bridging Physical and Digital?

We engineer App Clip experiences for retail.

Hire our Architects.