Universal links su iOS e App Links su Android consentono agli utenti di essere portati direttamente all'applicazione da un link, bypassando il browser. Ciò è particolarmente utile per migliorare l'esperienza utente e mantenere il contesto da una pagina web a un'applicazione. In questo guide, passeremo in rassegna il processo di configurazione di questi collegamenti profondi per un'app Next.js utilizzando Capacitor. Per l'attribuzione e i collegamenti profondi differiti, @capgo/capacitor-appsflyer può gestire le campagne di installazione nella schermata corretta dell'applicazione.
La configurazione dei collegamenti profondi non richiede molto code, ma richiede alcune configurazioni. Alla fine di questa guida, potrai cliccare su un link come https://www.capgo.app/details/22 e avere l'applicazione aperta sulla pagina corretta se è installata.
Configurazione dei collegamenti profondi Next.js
In primo luogo, creeremo una nuova app Next.js e una pagina di dettagli per il testing:
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 androidAssicurati che il tuo ID bundle sia correttamente impostato nel file capacitor.config.json poiché è cruciale per la configurazione:
{
"appId": "com.capgo.deeplinks",
"appName": "capgoLinks",
"webDir": "out",
"bundledWebRuntime": false
}For la routing, Next.js utilizza la routing basata su file, quindi creando un file in pages/details/[id].js, abbiamo già configurato la nostra route wildcard.
In pages/details/[id].js, possiamo recuperare l'ID dall'URL utilizzando il router integrato di 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 DetailsPageOra, gestiamo l' appUrlOpen evento con Capacitor. Questo evento viene attivato quando l'app viene aperta tramite un custom URL scheme. Aggiungi un ascoltatore nel pages/_app.js file:
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 MyAppQuesto code ascolta l' appUrlOpen evento e naviga alla route appropriata all'interno della tua app Next.js.
Configurazione per iOS
Per iOS, avrai bisogno di un ID app con le domini associati abilitati. Crea un apple-app-site-association file con il seguente contenuto, sostituendo YOURTEAMID e com.your.bundleid con il tuo ID di team e ID di bundle effettivo:
{
"applinks": {
"apps": [],
"details": [
{
"appID": "YOURTEAMID.com.your.bundleid",
"paths": ["*"]
}
]
}
}Carica questo file nella .well-known directory sul tuo dominio, rendendolo accessibile a https://www.capgo.app/.well-known/apple-app-site-association.
In Xcode, aggiungi il dominio alle autorizzazioni dell'applicazione utilizzando il formato applinks:capgo.app.
Configurazione Android
Per i collegamenti dell'app Android, segui questi passaggi:
- Genera un file keystore se non ne hai uno.
- Ottieni la firma SHA256 dal keystore.
- Crea un assetlinks.json file con il nome del tuo pacchetto e l'impronta SHA256.
- Inviare questo file nel
.well-knowndirectory sul tuo dominio.
In tuo AndroidManifest.xml, aggiungi un intent-filter al activity elemento che gestisce i collegamenti profondi:
<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>Dopo aver caricato il assetlinks.json file, puoi verificarlo utilizzando lo strumento Digital Asset Links di Google. Se tutto è configurato correttamente, vedrai un segno di spunta verde.
Per costruire e firmare il tuo app, utilizza i seguenti comandi:
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.apkQuesto installerà l'app firmata sul tuo dispositivo Android connesso.
Capacitor Configura per Impostazioni Progetto Nativo
Per automatizzare le impostazioni dei progetti nativi, considera l'utilizzo del Capacitor pacchetto di configurazione. Installalo nel tuo progetto:
npm install @capacitor/configureCrea un capacitor.config.yaml file alla radice del tuo progetto:
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_NAMEEsegui lo strumento di configurazione con questa configurazione:
npx cap-config run capacitor.config.yamlCiò applicherà le impostazioni specificate nel file YAML ai tuoi progetti nativi.
Conclusioni
La configurazione dei collegamenti profondi con Capacitor per un'app Next.js prevede la configurazione del tuo dominio e delle impostazioni del progetto per entrambi iOS e Android. Sebbene il processo richieda attenzione ai dettagli, è semplificato rispetto ai metodi più vecchi e non richiede plugin aggiuntivi. Assicurati che i file di verifica del dominio vengano serviti correttamente e controllali con gli strumenti dei rispettivi piattaforme. Una volta configurato, la tua app si aprirà in modo fluido dai collegamenti web, fornendo una transizione liscia per i tuoi utenti dal web all'app.
Continua da Come integrare i collegamenti universali in Next.js con Capacitor
Se stai utilizzando Come integrare i collegamenti universali in Next.js con Capacitor per pianificare il lavoro dei plugin nativi, connettilo con Capgo Directory dei Plugin per il flusso di lavoro del prodotto nel Capgo Directory dei Plugin, Capacitor Plugin da Capgo per i dettagli di implementazione in Capacitor Plugin da Capgo, Aggiungere o Aggiornare i Plugin per i dettagli di implementazione in Aggiungere o Aggiornare i Plugin, Alternative per Plugin Enterprise di Ionic per il flusso di lavoro del prodotto in Alternative per Plugin Enterprise di Ionic, e Capgo Costruzioni Native per il flusso di lavoro del prodotto in Capgo Costruzioni Native.
