Come integrare i collegamenti universali in Next.js con Capacitor

Universal links on iOS and App Links on Android allow users to be taken directly into your app from a link, bypassing the browser. This is particularly useful for improving user experience and maintaining the context from a web page to an app. In this guide, we’ll walk through the process of setting up these deep links for a Next.js app using Capacitor. For attribution and deferred deep links, @capgo/capacitor-appsflyer puoi gestire le campagne di installazione nella schermata corretta dell'app.

Setting up deep links doesn’t require a lot of code, but it does involve some configuration. By the end of this guide, you’ll be able to click a link like https://www.capgo.app/details/22 e apri la tua app sulla pagina corretta se è installata.

Configurazione dei collegamenti profondi di Next.js

Prima di tutto, 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 del pacchetto 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 routing, Next.js utilizza routing basato su file, quindi creando un file a pages/details/[id].jsabbiamo già impostato la nostra route wildcard.

In pages/details/[id].jspossiamo recuperare l'ID dalla 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 DetailsPage

Now, vediamo come gestire il appUrlOpen l'evento con Capacitor. Questo evento viene attivato quando l'app viene aperta tramite un schema di URL personalizzato. Aggiungi un ascoltatore nella 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 MyApp

Questo code ascolta per l' appUrlOpen evento e naviga verso la route appropriata all'interno del tuo app Next.js.

Configurazione iOS

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 YOURTEAMID e com.your.bundleid context: Pagina/area: Sito web di marketing Capgo. Ruolo: Etichetta breve UI o elemento di navigazione. Visto in: pagina trust.astro. Chiave di messaggio `e` (E).

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

con il tuo ID team reale e ID bundle: .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 di app Android, segui questi passaggi:

Genera un file keystore se non ne hai già uno.
Ottieni il fingerprint SHA256 dal keystore.
Crea un file assetlinks.json con il tuo nome del pacchetto e il fingerprint SHA256.
Incarica questo file nella .well-known directory 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>

After caricare il assetlinks.json file, puoi verificarlo utilizzando lo strumento di Digital Asset Links di Google. Se tutto è configurato correttamente, vedrai un segno di spunta verde.

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

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

Capacitor Configura per Impostazioni Progetto Nativo

To 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 all'interno della cartella 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

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

Conclusioni

Impostare i collegamenti profondi con Capacitor per un'app Next.js richiede la configurazione del tuo dominio e delle impostazioni del progetto sia per iOS che per Android. Sebbene il processo richieda attenzione ai dettagli, è 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 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 Directory dei plugin Capgo per il flusso di lavoro del prodotto in Directory dei plugin Capgo Capacitor Plugins da Capgo per i dettagli di implementazione in Capacitor Plugin da Capgo Aggiunta o Aggiornamento di Plugin per i dettagli di implementazione in Aggiunta o Aggiornamento di Plugin Alternative per Plugin Enterprise Ionic per il workflow del prodotto in Alternative per Plugin Enterprise Ionic, e Capgo Build Nativo per il workflow del prodotto in Capgo Build Nativo.

How to Integrate Universal Links in Next.js with Capacitor