Come integrare i Collegamenti Universali in Next.js con Capacitor

Universal links su iOS e App Links su Android consentono agli utenti di essere portati direttamente nella vostra app da un link, 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.

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 la tua app aperta alla pagina corretta se è installata.

Configurazione dei collegamenti profondi Next.js

Prima, 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 android

Assicurati 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
}

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

In pages/details/[id].jspossiamo

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

retrivare l'ID dal URL utilizzando il router integrato di Next.js: appUrlOpen Now, vediamo come gestire l'evento con Capacitor. Questo evento viene attivato quando l'app viene aperta tramite uno schema di URL personalizzato. Aggiungi un ascoltatore nel file: pages/_app.js This __CAPGO_KEEP_0__ ascolta l'evento e naviga verso la rotta appropriata all'interno della tua app Next.js.

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 Per iOS, avrai bisogno di un ID app con le domini associati abilitati. Crea un file apple-app-site-association con il seguente contenuto, sostituendo

e

e e e YOURTEAMID e com.your.bundleid With il tuo ID reale della squadra e ID del pacchetto:

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

Incarica 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 con 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.
Creazione di un file assetlinks.json con il tuo nome del pacchetto e firma SHA256.
Incarica questo file nella .well-known directory sul tuo dominio.

Nel tuo AndroidManifest.xml, aggiungi un intent-filter all'elemento che gestisce i collegamenti profondi: activity Dopo aver caricato il

<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>

file, puoi verificarlo utilizzando lo strumento Digital Asset Links di Google. Se tutto è configurato correttamente, vedrai un segno di spunta verde. assetlinks.json Per costruire e firmare la tua app, utilizza i seguenti comandi:

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

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__ Configura le impostazioni del progetto nativo.

Capacitor Configure for Native Project Settings

__CAPGO_KEEP_0__ pacchetto di configurazione per progetti nativi Capacitor Configure for Native Project Settings. Installalo nel tuo progetto:

npm install @capacitor/configure

Crea un capacitor.config.yaml file nella 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_NAME

Esegui lo strumento di configurazione con questa configurazione:

npx cap-config run capacitor.config.yaml

Ciò 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 sia per iOS che per Android. Sebbene il processo richieda attenzione ai dettagli, è comunque semplificato rispetto ai metodi precedenti e non richiede plugin aggiuntivi. Assicurati che i file di verifica del dominio vengano serviti correttamente e controllali con gli strumenti delle rispettive piattaforme. Una volta configurato, la tua app si aprirà in modo fluido dai link 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 nella cartella di Plugin di Capgo Capacitor Plugin da Capgo per i dettagli di implementazione in Capacitor Plugin da Capgo Aggiungere o Aggiornare Plugin per i dettagli di implementazione in Aggiungere o Aggiornare Plugin Alternative per Plugin Enterprise di Ionic per il flusso di lavoro del prodotto in Alternative per Plugin Enterprise di Ionic, e Capgo Build Nativi per il flusso di lavoro del prodotto in Capgo Build Nativi.