Lien univocatifs sur iOS et App Links sur Android permettent aux utilisateurs d'être directement pris dans votre application à partir d'un lien, en contournant le navigateur. Cela est particulièrement utile pour améliorer l'expérience utilisateur et maintenir le contexte d'une page web à une application. Dans ce guide, nous allons passer en revue le processus de configuration de ces liens profonds pour une application Next.js en utilisant Capacitor.
La configuration des liens profonds ne nécessite pas beaucoup de code, mais elle implique une certaine configuration. À la fin de ce guide, vous serez en mesure de cliquer sur un lien comme https://www.capgo.app/details/22 et votre application s'ouvrira sur la page correcte si elle est installée.
Configuration des liens profonds Next.js
Tout d'abord, nous allons créer une nouvelle application Next.js et une page de détails pour la tester :
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 androidAssurez-vous que votre ID de bundle est correctement configuré dans le capacitor.config.json fichier, car il est crucial pour la configuration :
{
"appId": "com.capgo.deeplinks",
"appName": "capgoLinks",
"webDir": "out",
"bundledWebRuntime": false
}Pour la navigation, Next.js utilise la navigation basée sur les fichiers, donc en créant un fichier à pages/details/[id].js, nous avons déjà configuré notre route sauvage.
Dans pages/details/[id].js, nous pouvons récupérer l'ID à partir de l'URL à l'aide du routeur intégré de Next.js :
import { useRouter } from 'next/router'
function DetailsPage() {
const router = useRouter()
const { id } = router.query
return (
<div>
<p>My ID: {id}</p>
</div>
)
}
export default DetailsPageMaintenant, traitons le appUrlOpen événement avec Capacitor. Cet événement est déclenché lorsque l'application est ouverte via un schéma de URL personnalisé. Ajoutez un écouteur dans le pages/_app.js fichier :
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 MyAppCe code écoute l' appUrlOpen événement et navigue vers la route appropriée dans votre application Next.js.
Configuration iOS
Pour iOS, vous aurez besoin d'un ID d'application avec les domaines associés activés. Créez un fichier apple-app-site-association avec le contenu suivant, en remplaçant YOURTEAMID et com.your.bundleid with your actual team ID and bundle ID:
{
"applinks": {
"apps": [],
"details": [
{
"appID": "YOURTEAMID.com.your.bundleid",
"paths": ["*"]
}
]
}
}Téléchargez ce fichier dans le .well-known répertoire de votre domaine, en le rendant accessible à https://www.capgo.app/.well-known/apple-app-site-association.
Dans Xcode, ajoutez le domaine à vos autorisations d'application sous la forme applinks:capgo.app.
Configuration Android
Pour les liens d'application Android, suivez ces étapes :
- Générez un fichier de clé de coffre si vous n'en avez pas un.
- Obtenez la trace SHA256 du coffre.
- Créez un fichier assetlinks.json avec votre nom de package et votre trace SHA256.
- Téléchargez ce fichier dans le
.well-knownrépertoire sur votre domaine.
Dans votre AndroidManifest.xml, ajoutez un intent-filter à l'élément qui gère les liens profonds : activity Après avoir téléchargé le
<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>fichier, vous pouvez le vérifier à l'aide de l'outil de liens numériques d'actifs de Google. Si tout est configuré correctement, vous verrez un signe de vérification vert. assetlinks.json Pour construire et signer votre application, utilisez les commandes suivantes :
Cela installera l'application signée sur votre appareil Android connecté.
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__ Configurez les paramètres du projet natif
Capacitor Configure for Native Project Settings
__CAPGO_KEEP_0__ package de configuration Capacitor Configure for Native Project Settings. Installez-le dans votre projet :
npm install @capacitor/configureCréez un capacitor.config.yaml fichier au niveau de racine de votre projet :
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_NAMEExécutez l'outil de configuration avec cette configuration :
npx cap-config run capacitor.config.yamlCela appliquera les paramètres spécifiés dans le fichier YAML à vos projets natifs.
Conclusion
La mise en place des liens profonds avec Capacitor pour une application Next.js implique la configuration de votre domaine et des paramètres de projet pour les deux iOS et Android. Bien que le processus nécessite de l'attention, il est cependant plus fluide que les méthodes anciennes et ne nécessite pas d'extensions supplémentaires. Assurez-vous que vos fichiers de vérification de domaine sont correctement servis et vérifiez-les avec les outils de plateforme correspondants. Une fois configuré, votre application s'ouvrira de manière fluide à partir de liens web, offrant une transition smooth pour vos utilisateurs de web à application.
Continuez de la section suivante : Comment intégrer les liens universels dans Next.js avec Capacitor
Si vous utilisez Comment intégrer les liens universels dans Next.js avec Capacitor pour planifier le travail des plugins natifs, connectez-le avec Capgo Répertoire des plugins pour le flux de travail du produit dans le répertoire de plugin Capgo les plugins Capacitor par Capgo pour le détail d'implémentation dans les plugins Capacitor par Capgo, Ajouter ou mettre à jour les plugins pour le détail d'implémentation dans Ajouter ou mettre à jour les plugins, Alternatives de plugins d'entreprise Ionic pour le flux de travail du produit dans Alternatives de plugins d'entreprise Ionic, et les builds natifs Capgo pour le flux de travail du produit dans les builds natifs Capgo.
