Universal Links auf iOS und App Links auf Android ermöglichen es Benutzern, direkt in Ihre App weitergeleitet zu werden, 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 gehen wir durch den Prozess der Einrichtung dieser tiefen Links für eine Next.js-Anwendung mit Capacitor auf. Für Attribution und verzögerte tiefen Links können Sie Kampagnen in die richtige In-App-Anzeige einrichten. @capgo/capacitor-appsflyer kann Kampagnen in die richtige In-App-Anzeige einrichten.
Die Einrichtung von tiefen Links erfordert nicht viel code, aber sie erfordert einige Konfiguration. Am Ende dieses Leitfadens werden Sie in der Lage sein, einen Link wie https://www.capgo.app/details/22 und haben Sie Ihre App auf die richtige Seite geöffnet, wenn sie installiert ist.
Next.js-Deep-Link-Einrichtung
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 Bundles-ID korrekt in dem 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 wir durch die Erstellung einer Datei in pages/details/[id].js, bereits unsere Wildcard-Routen eingerichtet haben.
In pages/details/[id].jskönnen wir die ID aus der URL mithilfe von Next.js' integriertem 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 DetailsPageJetzt behandeln wir das appUrlOpen ereignis mit Capacitor. 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:
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 MyAppDieser code hört auf das appUrlOpen Ereignis und navigiert zu der entsprechenden Route innerhalb Ihrer Next.js App.
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, indem Sie YOURTEAMID und com.your.bundleid mit Ihrem tatsächlichen Team-Id und Bundle-Id ersetzen:
{
"applinks": {
"apps": [],
"details": [
{
"appID": "YOURTEAMID.com.your.bundleid",
"paths": ["*"]
}
]
}
}Laden Sie diese Datei auf .well-known Verzeichnis auf Ihrem Domain, das es auf https://www.capgo.app/.well-known/apple-app-site-association.
In Xcode, fügen Sie die Domain zu Ihren Anwendungsrechten unter Verwendung der Formatvorlage 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 der Keystore-Datei.
- Erstellen Sie ein assetlinks.json Datei mit Ihrem Paketnamen und SHA256-Fingerprint.
- Hängen Sie diese Datei in das
.well-knownVerzeichnis auf Ihrer Domain ein.
In Ihrem AndroidManifest.xmlzurücksetzen Sie die intent-filter dem Element, das tiefgreifende Links verarbeitet: activity Nach dem Hochladen des
<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>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. assetlinks.json Um Ihre App zu erstellen und zu signieren, verwenden Sie die folgenden Befehle:
Dies installiert die signierte App auf Ihrem mit Ihrem Android-Gerät verbundenen Gerät.
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.apk__CAPGO_KEEP_0__ Konfigurieren Sie die Einstellungen für Native-Projekte
Capacitor Configure for Native Project Settings
__CAPGO_KEEP_0__ Konfigurationspaket Capacitor configure packageErstellen Sie ein
npm install @capacitor/configure__CAPGO_KEEP_0__ 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_NAMEMit dieser Konfiguration den Konfigurations-Tool ausführen:
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 gestreamlinert und erfordert keine zusätzlichen Plugins. Stellen Sie sicher, dass Ihre Domain-Verifizierungsdateien korrekt bereitgestellt werden und überprüfen Sie sie mit den jeweiligen Plattform-Tools. Sobald die Einrichtung abgeschlossen ist, öffnet sich Ihre App problemlos von Web-Links, was eine glatte Übergang für Ihre Benutzer von Web zu App ermöglicht.
Fortsetzen Sie mit How to Integrieren Universal Links in Next.js mit Capacitor
Wenn Sie How to Integrieren Universal Links in Next.js mit Capacitor zur Planung von native Plugin-Arbeiten verwenden, verbinden Sie es mit Capgo Plugin-Verzeichnis zur Produkt-Workflow in Capgo Plugin-Verzeichnis, Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins durch Capgo, Hinzufügen oder Aktualisieren von Plugins für die Implementierungsdetails in Hinzufügen oder Aktualisieren von Plugins, Ionic Enterprise Plugin Alternativen für den Produktworkflow in Ionic Enterprise Plugin Alternativen, und Capgo Native Builds für den Produktworkflow in Capgo Native Builds.
