Universal Links auf iOS und App Links auf Android ermöglichen es den Benutzern, direkt in Ihre App weitergeleitet zu werden, wenn sie auf einen Link klicken, ohne dass der Browser eingeschaltet wird. 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-Anwendung mit Capacitor führen.
Die Einrichtung von tiefen Links erfordert nicht viel code, aber sie erfordert einige Konfiguration. Am Ende dieses Leitfadens werden Sie in der Lage sein, auf einen Link wie https://www.capgo.app/details/22 und Ihre App wird sich öffnen, um auf die richtige Seite zu gelangen, wenn sie installiert ist.
Einrichtung von tiefen Links in Next.js
Zuerst erstellen wir eine neue Next.js-Anwendung 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 Bundle-ID korrekt im capacitor.config.json -Datei eingetragen ist, da dies für die Einrichtung von entscheidender Bedeutung ist:
{
"appId": "com.capgo.deeplinks",
"appName": "capgoLinks",
"webDir": "out",
"bundledWebRuntime": false
}Für die Routenverwaltung verwendet Next.js Dateibasierte Routen, sodass durch die Erstellung einer Datei bei pages/details/[id].jsbereits unsere Wildcard-Routen eingerichtet sind.
In pages/details/[id].jskönnen wir den ID-Wert aus der URL mit Hilfe von Next.js' eingebautem Router 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 DetailsPageNun lassen wir uns auf das appUrlOpen ereignis ein, mit Capacitor. Dieses Ereignis wird ausgelöst, wenn die App über eine benutzerdefinierte URL-Scheme geöffnet wird. Fügen Sie einen Listener in dem pages/_app.js datei:
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 MyAppDiese code hört auf das appUrlOpen Ereignis und navigiert zum entsprechenden Routen innerhalb Ihrer Next.js-Anwendung.
iOS-Konfiguration
Für iOS benötigen Sie eine App-ID mit Associated Domains aktiviert. Erstellen Sie ein apple-app-site-association Dokument mit dem folgenden Inhalt, indem Sie YOURTEAMID und com.your.bundleid mit Ihrem tatsächlichen Team- und Bundle-Id ersetzen:
{
"applinks": {
"apps": [],
"details": [
{
"appID": "YOURTEAMID.com.your.bundleid",
"paths": ["*"]
}
]
}
}Hängen Sie dieses Dokument in das .well-known Verzeichnis auf Ihrem Domain, sodass es auf https://www.capgo.app/.well-known/apple-app-site-association.
In Xcode fügen Sie die Domain zu den Berechtigungen Ihrer App im Format applinks:capgo.app.
Android-Konfiguration
Für Android-App-Links, folgen Sie diesen Schritten:
- Erstellen Sie ein Keystore-Datei, wenn Sie keine haben.
- Erhalten Sie die SHA256-Fingerprint aus dem Keystore.
- Erstellen Sie ein assetlinks.json Datei mit Ihrem Paketnamen und SHA256-Fingerprint.
- Hängen Sie diese Datei in das
.well-knownVerzeichnis auf Ihrem Domain.
In Ihrem AndroidManifest.xml, fügen Sie ein intent-filter hinzu. activity Element, das tiefgreifende Links verwaltet:
<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 des assetlinks.json Dateis kann es mit Google’s Digital Asset Links-Tool überprüft werden. 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 mit Android verbundenen Gerät.
Capacitor Konfigurieren Sie die Einstellungen für Native-Projekte
Um native Projekt-Einstellungen zu automatisieren, sollten Sie das Capacitor Konfigurationspaketinstallieren. Fügen Sie es Ihrem Projekt hinzu:
npm install @capacitor/configureErstellen Sie ein capacitor.config.yaml Datei am Wurzelort 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 die Konfigurationswerkzeug mit dieser Konfiguration aus:
npx cap-config run capacitor.config.yamlDies wird die in der YAML-Datei angegebenen Einstellungen auf Ihre native Projekte anwenden.
Zusammenfassung
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. Obwohl der Prozess Aufmerksamkeit erfordert, ist er im Vergleich zu älteren Methoden gestreamlinert 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 die Einrichtung abgeschlossen ist, wird Ihre App problemlos von Web-Links geöffnet, was eine glatte Übergang für Ihre Benutzer von Web zu App ermöglicht.
