Het implementeren van diepe koppelingen in je Capacitor app verbetert de gebruikersbetrokkenheid en maakt het mogelijk om gerichte inhoud te openen vanuit externe bronnen. Hieronder vind je een stapsgewijze uitleg inclusief belangrijke configuraties en codevoorbeelden voor zowel iOS als Android. **1. Voorbereiding:** - Zorg dat je project is ingesteld met Capacitor. - Installeer de benodigde plugins, zoals `@capacitor/deeplinks` (optioneel, afhankelijk van je aanpak). --- **2. Deep Links instellen op platformniveau** ### iOS **a. Configureer URL-schemas en universale koppelingen** - Open `ios/App/App/Info.plist`. - Voeg een URL schema toe: ```xml <key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleURLName</key> <string>com.example.app</string> <key>CFBundleURLSchemes</key> <array> <string>mijnapp</string> <!-- Bijvoorbeeld: mijnapp:// --> </array> </dict> </array> ``` - Configureer 'Associated Domains' voor Universal Links: - Ga naar Xcode → Targets → jouw app → Signing & Capabilities. - Voeg 'Associated Domains' toe en zet `applinks:yourdomain.com`. - Plaats het `apple-app-site-association` bestand op je server met de juiste inhoud (geen extensie, JSON-formaat). **b. Universal Links configuratie** - Zorg dat je server het juiste bestand serveert via HTTPS. --- ### Android **a. Intent-filters toevoegen** - Open `android/app/src/main/AndroidManifest.xml` en voeg bij `<activity>`: ```xml <intent-filter android:autoVerify="true"> <action android:name="android.intent.action.VIEW"/> <category android:name="android.intent.category.DEFAULT"/> <category android:name="android.intent.category.BROWSABLE"/> <data android:scheme="mijnapp" android:host="content"/> </intent-filter> ``` - Voor app links (bijvoorbeeld via HTTPS): ```xml <data android:scheme="https" android:host="www.yourdomain.com"/> ``` --- **3. Capacitor Deep Linking configureren** Gebruik de Capacitor plugin `@capacitor/deeplinks` om inkomende koppelingen te verwerken. **a. Installatie** ```bash npm install @capacitor/deeplinks npx cap sync ``` **b. Setup in je code (bijvoorbeeld in `app.ts` of `app.js`)** ```typescript import { registerPlugin } from '@capacitor/core'; const DeepLinks = registerPlugin('Deeplinks'); DeepLinks.addListener('deepLinkOpen', (event: any) => { const url = event.url; // Parse de URL en navigeer naar de juiste pagina handleDeepLink(url); }); function handleDeepLink(url: string) { // Voorbeeld: mijnapp://content/123 of https://www.yourdomain.com/content/123 const parsedUrl = new URL(url); const path = parsedUrl.pathname; // Bijvoorbeeld: /content/123 if (path.startsWith('/content/')) { const contentId = path.split('/')[2]; // Navigeer naar de content pagina met ID } } ``` **c. Initieer de plugin** ```typescript DeepLinks.canOpenUrl({ url: 'mijnapp://content/123' }).then(() => { // Kan openen }); ``` --- **4. Inkomende koppelingen afhandelen** - Voor iOS en Android: de plugin luistert naar inkomende koppelingen. - Bij het openen van de app via een koppeling wordt de `deepLinkOpen` gebeurtenis getriggerd. - Zorg dat je in je app de event listener toevoegt en de URL correct verwerkt. --- **5. Testen** - Gebruik simulators/emulators en echte apparaten. - Test via URL's zoals `mijnapp://content/123` en via de links op je website. --- **Samenvatting:** | Stap | Actie | Platform | Details | |---|---|---|---| | 1 | URL schema en Universal Links / App Links instellen | iOS en Android | In `Info.plist` en `AndroidManifest.xml` | | 2 | Serverconfiguratie voor Universal Links / App Links | iOS | `apple-app-site-association` bestand plaatsen | | 3 | Capacitor Deep Links plugin gebruiken | Cross-platform | Installeren, listener toevoegen | | 4 | URL afhandeling in app | Cross-platform | Parse URL, navigeer naar inhoud | | 5 | Testen | Echte apparaten en simulators | Zorg voor correcte werking | Door bovenstaande stappen te volgen, implementeer je effectieve diepe koppelingen die gebruikers naar relevante inhoud leiden en de navigatie in je Capacitor app verbeteren.

Hier is een uitgebreide handleiding voor het implementeren van diepe koppelingen in je Capacitor app: ## 1. Installatie benodigde plugins ```bash npm install @capacitor/app npm install @capacitor/app-launcher ``` ## 2. Android Configuratie ### android/app/src/main/AndroidManifest.xml ```xml <activity android:name=".MainActivity" android:launchMode="singleTask" android:exported="true"> <!-- Intent filters voor diepe koppelingen --> <intent-filter android:autoVerify="true"> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="https" android:host="jouwdomein.com" /> </intent-filter> <!-- Voor custom schema --> <intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="yourapp" /> </intent-filter> </activity> ``` ### android/app/build.gradle ```gradle android { defaultConfig { // Voeg je app links domein toe manifestPlaceholders = [ appAuthRedirectScheme: 'yourapp' ] } } ``` ## 3. iOS Configuratie ### ios/App/App/Info.plist ```xml <key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleURLName</key> <string>com.jouwbundleid.app</string> <key>CFBundleURLSchemes</key> <array> <string>yourapp</string> </array> </dict> </array> <!-- Voor Universal Links --> <key>com.apple.developer.associated-domains</key> <array> <string>applinks:jouwdomein.com</string> </array> ``` ## 4. Implementatie in je app ### src/app/deep-linking.service.ts ```typescript import { Injectable } from '@angular/core'; import { App } from '@capacitor/app'; import { Router } from '@angular/router'; @Injectable({ providedIn: 'root' }) export class DeepLinkingService { constructor(private router: Router) { this.initializeDeepLinking(); } initializeDeepLinking() { // Luister naar app opens via diepe koppelingen App.addListener('appUrlOpen', (data: any) => { this.handleDeepLink(data.url); }); } private handleDeepLink(url: string) { try { console.log('Diepe koppeling ontvangen:', url); // Parse de URL const urlObj = new URL(url); const path = urlObj.pathname; const params = new URLSearchParams(urlObj.search); // Route gebaseerd op het pad if (path.includes('/product/')) { const productId = path.split('/product/')[1]; this.router.navigate(['/product', productId]); } else if (path.includes('/profile/')) { const userId = path.split('/profile/')[1]; this.router.navigate(['/profile', userId]); } else if (path.includes('/settings')) { this.router.navigate(['/settings']); } else if (urlObj.searchParams.has('campaign')) { const campaign = urlObj.searchParams.get('campaign'); this.router.navigate(['/campaign', campaign]); } } catch (error) { console.error('Fout bij verwerken diepe koppeling:', error); } } // Methode om diepe koppelingen te genereren generateDeepLink(type: string, id: string, params?: any): string { const baseUrl = 'https://jouwdomein.com'; switch(type) { case 'product': return `${baseUrl}/product/${id}`; case 'profile': return `${baseUrl}/profile/${id}`; case 'campaign': return `${baseUrl}/?campaign=${id}`; default: return baseUrl; } } } ``` ## 5. Route Handling in je hoofdcomponent ### src/app/app.component.ts ```typescript import { Component, OnInit } from '@angular/core'; import { DeepLinkingService } from './deep-linking.service'; @Component({ selector: 'app-root', template: '<ion-router-outlet></ion-router-outlet>' }) export class AppComponent implements OnInit { constructor(private deepLinkingService: DeepLinkingService) {} ngOnInit() { // Initialiseer diepe koppelingen bij app start this.initializeApp(); } initializeApp() { // Eventueel aanvullende initialisatie } } ``` ## 6. Geavanceerde URL Parsing ### src/utils/url-parser.util.ts ```typescript export class UrlParser { static parseDeepLink(url: string): DeepLinkData { const urlObj = new URL(url); return { path: urlObj.pathname, queryParams: Object.fromEntries(urlObj.searchParams), host: urlObj.host, protocol: urlObj.protocol, fragments: this.parsePathFragments(urlObj.pathname) }; } private static parsePathFragments(path: string): string[] { return path.split('/').filter(fragment => fragment.length > 0); } static isAppDeepLink(url: string): boolean { return url.includes('jouwdomein.com') || url.startsWith('yourapp://'); } } export interface DeepLinkData { path: string; queryParams: { [key: string]: string }; host: string; protocol: string; fragments: string[]; } ``` ## 7. Testen van diepe koppelingen ### Voor Android: ```bash # Test met adb adb shell am start -W -a android.intent.action.VIEW -d "yourapp://product/123" com.yourapp.package # Test met HTTP links adb shell am start -W -a android.intent.action.VIEW -d "https://jouwdomein.com/product/123" ``` ### Voor iOS: Voeg test URLs toe aan je **Notes** app en tik erop, of gebruik Xcode's console. ## 8. Aanvullende configuratie voor Universal Links ### apple-app-site-association (plaats in root van je domein) ```json { "applinks": { "apps": [], "details": [ { "appID": "TEAMID.com.yourapp.bundle", "paths": ["/product/*", "/profile/*", "/settings", "/*?campaign=*"] } ] } } ``` ## 9. Error Handling en Fallbacks ```typescript // In je deep-linking.service.ts private handleDeepLink(url: string) { try { if (!UrlParser.isAppDeepLink(url)) { console.log('Geen diepe koppeling voor deze app'); return; } const linkData = UrlParser.parseDeepLink(url); this.navigateBasedOnLink(linkData); } catch (error) { console.error('Diepe koppeling mislukt:', error); // Fallback naar home pagina this.router.navigate(['/home']); } } private navigateBasedOnLink(linkData: DeepLinkData) { // Je navigatielogica hier const [firstFragment] = linkData.fragments; switch(firstFragment) { case 'product': this.navigateToProduct(linkData.fragments[1]); break; case 'profile': this.navigateToProfile(linkData.fragments[1]); break; default: this.handleDefaultNavigation(linkData); } } ``` ## Belangrijkste voordelen: - **Verbeterde UX**: Gebruikers komen direct op de juiste pagina terecht - **Betere conversies**: Minder stappen om gewenste content te bereiken - **Marketing tracking**: Mogelijkheid om campagnes te tracken via URL parameters - **Cross-platform**: Werkt op zowel iOS als Android Zorg ervoor dat je de domeinnamen en bundle IDs vervangt door je eigen waarden, en test grondig op beide platforms!