Universal links auf iOS und App Links auf Android ermöglichen es Benutzern, direkt in Ihre App zu gelangen, indem sie einen Link anklicken, ohne den Browser zu verwenden. Dies ist besonders nützlich, um die Benutzererfahrung zu verbessern und den Kontext von einer Web-Seite in eine App zu erhalten. In diesem Leitfaden werden wir durch den Prozess der Einrichtung dieser tiefen Links für eine Next.js-App mit Capacitor führen. Für die Attribution und die verzögerte tiefen Links, @capgo/capacitor-appsflyer kann die Installationskampagnen in die richtige in-App-Anzeige routen.
Die Einrichtung von tiefen Links erfordert nicht viel code, aber sie erfordert einige Konfiguration. Am Ende dieses Leitfadens wirst du in der Lage sein, einen Link wie https://www.capgo.app/details/22 anzuklicken und deine App öffnen, um zur richtigen Seite zu gelangen, wenn sie installiert ist.
Next.js-Setup für tiefen Links
Zuerst erstellen wir eine neue Next.js-App und eine Details-Seite für die Testung:
npx create-next-app@latest capgoLinks
cd capgoLinks
mkdir pages/details
touch pages/details/[id].js
npm run build
npx cap add ios
npx cap add androidStellen Sie sicher, dass Ihr Bund-Id korrekt in der capacitor.config.json Datei eingestellt ist, da dies für die Einrichtung von entscheidender Bedeutung ist:
{
"appId": "com.capgo.deeplinks",
"appName": "capgoLinks",
"webDir": "out",
"bundledWebRuntime": false
}Für die Routensteuerung verwendet Next.js Dateibasierte Routensteuerung, sodass Sie durch die Erstellung einer Datei bei pages/details/[id].jsWir haben bereits unsere Wildcard-Routen eingerichtet.
In pages/details/[id].jsWir können die ID aus der URL mithilfe der eingebauten Router von Next.js abrufen:
import { useRouter } from 'next/router'
function DetailsPage() {
const router = useRouter()
const { id } = router.query
return (
<div>
<p>My ID: {id}</p>
</div>
)
}
export default DetailsPageNow, lassen Sie uns das appUrlOpen ereignis mit Capacitor behandeln. Dieses Ereignis wird ausgelöst, wenn die App über eine benutzerdefinierte URL-Scheme geöffnet wird. Fügen Sie einen Listener in der pages/_app.js Datei ein:
import { useEffect } from 'react'
import { App } from '@capacitor/app'
function MyApp({ Component, pageProps }) {
useEffect(() => {
App.addListener('appUrlOpen', (event) => {
const slug = event.url.split('.app').pop()
if (slug)
window.location.href = slug
})
}, [])
return <Component {...pageProps} />
}
export default MyAppThis code hört auf das appUrlOpen ereignis und navigiert zur entsprechenden Route innerhalb Ihrer Next.js-Anwendung.
iOS-Konfiguration
Für iOS benötigen Sie ein App-ID mit Associated Domains aktiviert. Erstellen Sie ein apple-app-site-association Datei mit dem folgenden Inhalt, ersetzen Sie YOURTEAMID und com.your.bundleid mit Ihrem tatsächlichen Team- und Bundle-ID:
{
"applinks": {
"apps": [],
"details": [
{
"appID": "YOURTEAMID.com.your.bundleid",
"paths": ["*"]
}
]
}
}Hochladen Sie diese Datei auf das .well-known Verzeichnis auf Ihrem Domain, damit es auf https://www.capgo.app/.well-known/apple-app-site-association.
In Xcode fügen Sie die Domain zu den Berechtigungen Ihres Apps im Format applinks:capgo.app.
Android-Konfiguration
Für Android-App-Links, folgen Sie diesen Schritten:
- Erstellen Sie ein Keystore-File, wenn Sie kein solches haben.
- Erhalten Sie die SHA256-Fingerprint aus dem Keystore.
- Erstellen Sie ein assetlinks.json Datei mit Ihrem Paketnamen und SHA256-Fingerprint.
- Hochladen Sie diese Datei auf den
.well-knownVerzeichnis auf Ihrem Domain.
In Ihrem AndroidManifest.xml, fügen Sie ein intent-filter zur activity Element, das tiefgreifende Links verarbeitet:
<activity ...>
<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="capgo.app" />
</intent-filter>
</activity>Nach dem Hochladen der assetlinks.json Datei können Sie sie mit Google’s Digital Asset Links-Tool überprüfen. Wenn alles korrekt eingerichtet ist, sehen Sie ein grünes Häkchen.
Um Ihre App zu erstellen und zu signieren, verwenden Sie die folgenden Befehle:
cd android
./gradlew assembleRelease
cd ..
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore android/app/build/outputs/apk/release/app-release-unsigned.apk alias_name
zipalign -v 4 android/app/build/outputs/apk/release/app-release-unsigned.apk capgo.apk
adb install capgo.apkDies installiert die signierte App auf Ihrem verbundenen Android-Gerät.
Capacitor Konfigurieren Sie für Native-Projekt-Einstellungen
Um native Projekt-Einstellungen automatisieren zu können, sollten Sie das Capacitor-Konfigurationspaketinstallieren.
npm install @capacitor/configureErstellen Sie ein capacitor.config.yaml Datei an der Wurzel Ihres Projekts:
vars:
BUNDLE_ID: com.capgo.deeplinks
PACKAGE_NAME: com.capgo.deeplinks
platforms:
ios:
targets:
App:
bundleId: $BUNDLE_ID
entitlements:
- com.apple.developer.associated-domains: ['applinks:capgo.app']
android:
packageName: $PACKAGE_NAMEFühren Sie das Konfigurationswerkzeug mit dieser Konfiguration aus:
npx cap-config run capacitor.config.yamlDiese Anweisungen werden die in der YAML-Datei angegebenen Einstellungen auf Ihre native Projekte anwenden.
Fazit
Die Einrichtung von tiefen Links mit Capacitor für eine Next.js-Anwendung beinhaltet die Konfiguration Ihres Domains und Projekt-Einstellungen sowohl für iOS als auch für Android. Während der Prozess Aufmerksamkeit erfordert, ist er im Vergleich zu älteren Methoden jedoch gestreamt und erfordert keine zusätzlichen Plugins. Stellen Sie sicher, dass Ihre Domain-Verifizierungsdateien korrekt bereitgestellt werden und überprüfen Sie sie mit den entsprechenden Plattform-Tools. Sobald Sie die Einrichtung abgeschlossen haben, öffnet sich Ihre App reibungslos aus Web-Links, was eine glatte Übergang für Ihre Benutzer von Web zu App ermöglicht.
Fortsetzen Sie mit Wie Sie Universal Links in Next.js mit Capacitor integrieren
Wenn Sie Wie Sie Universal Links in Next.js mit Capacitor integrieren um native Plugin-Arbeit zu planen, verbinden Sie es mit Capgo Plugin-Verzeichnis zur Produktionsablauf in Capgo Plugin-Verzeichnis Capacitor Plugins von Capgo zur Implementierungsdetail in Capacitor Plugins von Capgo Hinzufügen oder Aktualisieren von Plugins zur Implementierungsdetail in Hinzufügen oder Aktualisieren von Plugins Ionic Enterprise Plugin Alternativen zur Produktionsablauf in Ionic Enterprise Plugin Alternativen, und Capgo Native Builds zur Produktionsablauf in Capgo Native Builds.
