Come integrare i Collegamenti Universali in Next.js con Capacitor

I collegamenti universali su iOS e i collegamenti per l'app su Android consentono agli utenti di essere portati direttamente nella tua app da un collegamento, bypassando il browser. Ciò è particolarmente utile per migliorare l'esperienza utente e mantenere il contesto da una pagina web a un'app. 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'app.

La configurazione dei collegamenti profondi non richiede molto code, ma richiede alcune configurazioni. Alla fine di questa guida, potrai cliccare su un collegamento come https://www.capgo.app/details/22 Esegui il download e installa l'app per avere l'accesso alla pagina corretta se è già installata.

Configurazione dei collegamenti profondi di Next.js

Innanzitutto creeremo una nuova app Next.js e una pagina di dettagli per le prove:

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 android

Assicurati che il tuo ID bundle sia impostato correttamente nel file capacitor.config.json poiché è fondamentale per la configurazione:

{
  "appId": "com.capgo.deeplinks",
  "appName": "capgoLinks",
  "webDir": "out",
  "bundledWebRuntime": false
}

Per la navigazione, Next.js utilizza la routing basato sui file, quindi creando un file in pages/details/[id].jsabbiamo già impostato la nostra route wildcard.

In pages/details/[id].jspossiamo recuperare l'ID dalla URL utilizzando il router di Next.js integrato:

import { useRouter } from 'next/router'

function DetailsPage() {
  const router = useRouter()
  const { id } = router.query

  return (
    <div>
      <p>My ID: {id}</p>
    </div>
  )
}

export default DetailsPage

Now, lasciamo gestire l'evento con __CAPGO_KEEP_0__. Questo evento viene attivato quando l'app viene aperta tramite un schema di URL personalizzato. Aggiungi un ascoltatore nel file: appUrlOpen Questo Capacitor ascolta per l'evento e naviga verso la rotta appropriata all'interno della tua app Next.js. pages/_app.js Configurazione iOS

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 MyApp

This code listens for the appUrlOpen Carica questo file nel

Ora, lasciamo gestire l'evento con __CAPGO_KEEP_0. Questo evento viene attivato quando l'app viene aperta tramite un schema di URL personalizzato. Aggiungi un ascoltatore nel file: CAPGO_KEEP_0__

Questo __CAPGO_KEEP_0__ ascolta per l'evento e naviga verso la rotta appropriata all'interno della tua app Next.js. Configurazione iOS Per iOS, avrai bisogno di un ID app con i Domini associati abilitati. Crea un file apple-app-site-association con il seguente contenuto, sostituendo e con il tuo ID team e ID bundle effettivo: e . YOURTEAMID Carica questo file nel com.your.bundleid Ora, lasciamo gestire l'evento con __CAPGO_KEEP_0__. Questo evento viene attivato quando l'app viene aperta tramite un schema di URL personalizzato. Aggiungi un ascoltatore nel file: __CAPGO_KEEP_0__

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "YOURTEAMID.com.your.bundleid",
        "paths": ["*"]
      }
    ]
  }
}

Questo __CAPGO_KEEP_0__ ascolta per l'evento e naviga verso la rotta appropriata all'interno della tua app Next.js. iOS Configuration Per iOS, avrai bisogno di un ID app con i Domini associati abilitati. Crea un file apple-app-site-association con il seguente contenuto, sostituendo e con il tuo ID team e ID bundle effettivo: e . Upload this file to the .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 tue 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 file assetlinks.json con il tuo nome del pacchetto e la firma SHA256. Incarica questo file nel
directory sul tuo dominio. .well-known In tuo

Xcode, aggiungi il dominio alle tue autorizzazioni dell'applicazione utilizzando il formato AndroidManifest.xmlaggiungere 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 di collegamenti digitali 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.apk

Questo installerà l'app firmata sul tuo dispositivo Android connesso.

Capacitor Configura le impostazioni del progetto nativo

Per automatizzare le impostazioni del progetto nativo, considera l'utilizzo del Capacitor pacchetto di configurazione. Installalo nel tuo progetto:

npm install @capacitor/configure

Creare un capacitor.config.yaml file al root 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_NAME

Eseguire lo strumento di configurazione con questa configurazione:

npx cap-config run capacitor.config.yaml

Questo applicherà le impostazioni specificate nel file YAML ai tuoi progetti nativi.

Conclusioni

La configurazione dei collegamenti profondi con Capacitor per un'app Next.js consiste nella configurazione del tuo dominio e delle impostazioni del progetto sia per iOS che per Android. Sebbene il processo richieda attenzione ai dettagli, è comunque semplificato rispetto ai metodi più vecchi e non richiede plugin aggiuntivi. Assicurati che i file di verifica del dominio siano serviti correttamente e controllali con gli strumenti dei rispettivi piattaforme. Una volta configurato, la tua app si aprirà in modo fluido da 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 in Capgo Directory dei plugin, Capacitor Plugin da Capgo per i dettagli di implementazione nei plugin Capacitor di Capgo, Aggiunta o Aggiornamento dei Plugin per i dettagli di implementazione in Aggiunta o Aggiornamento dei Plugin, Sostituti di Plugin Enterprise Ionic per il workflow del prodotto in Sostituti di Plugin Enterprise Ionic, e Capgo Build Nativi per il workflow del prodotto in Capgo Build Nativi.