App Clips : le « Essayez avant d'acheter » des applications mobiles
Comment créer des clips d'application iOS et des applications instantanées Android. Une expérience inférieure à 10 Mo déclenchée par NFC ou QR Codes. Le pont entre le commerce physique et la conversion numérique.
Télécharger une application est un engagement énorme. “Je veux juste payer mon stationnement.” “Je veux juste acheter ce café.” Je ne veux pas chercher dans l’App Store, saisir mon mot de passe, attendre 2 minutes et créer un compte. Entrez App Clips (iOS) et Instant Apps (Android). Il s’agit de petites parties (< 10 Mo) de votre application qui se lancent instantanément sans installation. Ils apparaissent sous forme de carte en bas de l’écran. Un robinet. Fait.
Pourquoi Maison Code en parle
Chez Maison Code Paris, nous agissons comme la conscience architecturale de nos clients. Nous héritons souvent de stacks “modernes” construites sans compréhension fondamentale de l’échelle.
Nous abordons ce sujet car il représente un point de pivot critique dans la maturité de l’ingénierie. Une mise en œuvre correcte différencie un MVP fragile d’une plateforme résiliente de niveau entreprise.
Pourquoi Maison Code Designs pour le “Phygital”
Nous pensons que la frontière entre « Magasin » et « Site » est en train de disparaître. Les marques de luxe dépensent des millions dans les magasins physiques. Ils dépensent des millions en applications. Mais il y a un gouffre entre eux. Les App Clips assument le rôle de pont. Si un client possède un produit dans votre magasin, votre application devrait déjà être sur son téléphone. Pas un site Web. Une expérience autochtone.
1. Les cas d’utilisation
- Détail (The Smart Tag) : Scannez un code QR sur une chaussure pour voir les tailles en stock. Demander une taille à la cabine d’essayage.
- Paiements (Le Scooter) : Appuyez sur NFC sur un scooter Lime pour le déverrouiller. Aucun compte requis. Apple Payez et c’est parti.
- Bons (le cadeau) : recevez un iMessage avec une réduction de grande valeur. En appuyant dessus, vous ouvrez le clip, pas le navigateur.
- Restaurants : scannez le QR du tableau pour commander. Aucun serveur n’est nécessaire.
2. Contraintes techniques (la règle < 10 Mo)
Apple est strict. Le binaire non compressé doit faire moins de 10 Mo (parfois 15 Mo pour iOS 17+). C’est minuscule. Une application React Native standard fait facilement 30 Mo. Stratégie d’optimisation :
- Tree Shaking : supprimez le code inutilisé de manière agressive.
- Pas de bibliothèques lourdes : Moment.js, Lodash, Lottie… supprimez-les.
- Actifs sur CDN : ne regroupez pas les images. Chargez-les depuis le réseau.
- Code Splitting : si vous utilisez React Native, utilisez
import()pour tout charger paresseux. Vous créez une « mini-application », pas une « application complète ».
3. Implémentation dans Expo / React Native
Les plugins Expo Config rendent cela gérable, mais cela reste avancé. Vous avez besoin d’une Target distincte dans 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"
}
]
]
}
}
Vous devez gérer deux builds : l’application principale et le clip. Ils partagent du code, mais ont des points d’entrée différents.
4. La bannière de l’application intelligente
Comment les utilisateurs trouvent-ils le Clip ?
- Bannière Safari :
<meta name="apple-itunes-app" content="app-id=123, app-clip-bundle-id=com.maisoncode.store.Clip">. Si l’utilisateur visite votre site sur Safari, un bouton “Ouvrir” apparaît. - Tags NFC : Encodés avec l’URL
https://maisoncode.paris/product/123. - App Clip Codes : ces codes QR circulaires conçus par Apple. Ils sont beaux et exclusifs.
- Maps : les marque-places dans Apple Maps peuvent lancer un clip (par exemple, « Commander de la nourriture »).
5. Continuité de l’état (transfert de données)
Si l’utilisateur aime l’expérience Clip et décide de télécharger l’application complète, il ne doit pas perdre son état.
- L’utilisateur ajoute un article au panier dans le clip.
- L’utilisateur installe l’application complète.
- L’utilisateur ouvre l’application complète et l’article est toujours dans le panier.
Nous y parvenons en utilisant les Groupes d’applications partagés (partage du trousseau iOS). Ou plus simple : enregistrez le « cartId » dans le stockage sécurisé local. Au lancement complet de l’application, vérifiez s’il existe des données héritées du conteneur Clip.
// Logique de stockage partagé
importer * en tant que SecureStore depuis 'expo-secure-store' ;
const SHARED_GROUP = 'group.com.maisoncode.data';
fonction d'exportation asynchrone saveCartId(id: string) {
// Enregistrer dans le conteneur partagé
wait SecureStore.setItemAsync('cart_id', id, {
Service de trousseau : SHARED_GROUP
});
}
6. La règle des 8 heures (notifications push)
Les App Clips ont un super pouvoir. Une fois lancé, vous êtes autorisé à envoyer des notifications push pendant 8 heures. Vous n’avez pas besoin de demander la permission. Cas d’utilisation :
- L’utilisateur commande de la nourriture via Clip.
- Vous envoyez : « Commande reçue ».
- Vous envoyez : “Commande prête”.
- Vous envoyez : “Téléchargez l’application complète pour les points de fidélité.” Ce canal temporaire est un bien immobilier de grande valeur. Ne spammez pas.
7. La conception du code QR (esthétique)
Les codes QR standards sont moches. Les App Clip Codes d’Apple sont circulaires et portent une marque. Mais vous avez besoin d’outils spéciaux pour les générer. Pour les codes QR génériques, utilisez les outils « Designer QR » qui intègrent votre logo et utilisent les couleurs de votre marque. Le code QR fait partie de l’emballage. Cela doit avoir l’air premium. Instructions d’utilisation intégrées : « Scanner pour déverrouiller ». Ne présumez pas que les gens savent quoi faire.
8. La solution de découvrabilité (Cartes et recherche)
Les App Clips ne sont pas uniquement destinés aux balises physiques.
Ils apparaissent dans Apple Maps.
Si vous recherchez « Panera Bread », le bouton « Commander de la nourriture » lance le Clip.
Ils apparaissent dans Spotlight Search.
Utilisez NSUserActivity pour indexer le contenu de votre clip.
Si vous vendez des « chaussures rouges », indexez ce mot-clé.
Lorsqu’un utilisateur recherche « Chaussures rouges » sur l’écran d’accueil de son iPhone, votre clip apparaît.
Il s’agit du SEO pour OS.
9. Test des clips d’application (The TestFlight Pain)
Tester des clips est plus difficile que tester des applications. Vous ne pouvez pas simplement « l’exécuter » facilement. Expérience locale :
- Vous devez configurer « Expérience locale » dans Paramètres -> Développeur -> App Clips.
- Vous tapez l’URL
https://maisoncode.paris/p/123. - Il lance le binaire de débogage. Vol d’essai :
- Vous devez télécharger le clip avec l’application principale.
- Les testeurs ne voient pas le clip par défaut. Ils doivent « Ouvrir App Clip » à partir de la carte TestFlight. Prévoyez du temps supplémentaire pour les cycles d’assurance qualité.
10. La limite de 30 jours (persistance des données)
Les App Clips sont éphémères. Le système d’exploitation les supprime après 30 jours d’inactivité. Et surtout : Le système d’exploitation supprime leurs données. Cookies, LocalStorage, SecureStore… tous effacés. Stratégie :
- Cloud Sync : si l’utilisateur se connecte (identifiant Apple), synchronisez immédiatement son panier avec votre backend.
- Conversion : votre objectif n°1 est de les amener à installer l’application complète dans cette fenêtre.
- Invite de mise à niveau : “Installez l’application complète pour enregistrer l’historique de vos commandes.” Ne comptez pas sur le stockage local pour quoi que ce soit de permanent.
11. Le bac à sable de sécurité (limites)
Les App Clips ne sont pas fiables. Apple les met fortement en sandbox. Vous NE POUVEZ PAS :
- Accédez à HealthKit (données de fréquence cardiaque).
- Accédez aux contacts ou aux photos (sans autorisation explicite et difficile à obtenir).
- Exécutez des tâches en arrière-plan (synchronisation en arrière-plan). Vous POUVEZ :
- Utilisez Apple Pay.
- Utiliser l’emplacement (pendant l’utilisation).
- Utilisez Bluetooth. Concevez votre flux en connaissant ces limites. N’essayez pas de créer un “Fitness Tracker” sous forme de clip.
12. Hotspot instantané et Wifi (La Magie)
Une fonctionnalité rare mais puissante. Vous pouvez configurer un Clip pour configurer le Wi-Fi. Scénario : l’utilisateur entre dans un café. Action : scanne le QR sur la table. Résultat : Clip se lance ET connecte instantanément le téléphone au Wi-Fi du Coffee Shop. Aucune saisie de mot de passe. Il s’agit d’une expérience magique de « Bienvenue » que les marques ignorent.
13. La feuille de paie Apple (Conversion)
Dans un App Clip, vous ne pouvez pas leur demander de saisir une carte de crédit. Le clavier est à friction. Vous devez utiliser Apple Pay. L’interface utilisateur est standardisée. L’utilisateur lui fait confiance. La biométrie (FaceID) confirme le paiement. Conseil UX : Ne pas afficher de bouton « Ajouter au panier ». Afficher un bouton « Apple Pay » directement sur la page produit. Réduisez les étapes. Clip -> Apple Pay -> Terminé. Cela imite le « One Click Buy » d’Amazon.
14. Conclusion
Les App Clips réduisent le CAC (Customer Acquisition Cost) des applications mobiles. Ils abaissent la barrière à l’entrée. Ils transforment « Installer l’application » (High Friction) en « Use App » (Zero Friction). Ils constituent le flux d’intégration parfait. Arrêtez de mendier des téléchargements. Commencez à offrir de la valeur.
faire le pont entre le physique et le numérique ?
Nous concevons des expériences App Clip pour la vente au détail.