Bagaimana Cara Mengintegrasikan Tautan Universal di Next.js dengan Capacitor

Tautan universal di iOS dan App Links di Android memungkinkan pengguna untuk langsung masuk ke aplikasi Anda dari tautan, menghindari browser. Hal ini sangat berguna untuk meningkatkan pengalaman pengguna dan menjaga konteks dari halaman web ke aplikasi. Dalam panduan ini, kami akan menjelajahi proses pengaturan tautan dalam yang lebih dalam untuk aplikasi Next.js menggunakan Capacitor. Untuk atribusi dan tautan dalam yang tertunda, @capgo/capacitor-appsflyer mengatur kampanye instalasi ke layar aplikasi yang benar.

Konfigurasi tautan dalam tidak memerlukan banyak code, tetapi melibatkan beberapa pengaturan. Setelah membaca panduan ini, Anda akan dapat mengklik tautan seperti https://www.capgo.app/details/22 dan buka aplikasi Anda ke halaman yang tepat jika sudah terinstal.

Konfigurasi Tautan Deep Next.js

Pertama, kita akan membuat aplikasi Next.js baru dan halaman detail untuk tes:

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

Pastikan Anda telah mengatur ID bundel Anda dengan benar di file ID Bundel adalah ID yang harus Anda atur dengan benar di capacitor.config.json adalah file yang sangat penting untuk pengaturan ini:

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

Untuk routing, Next.js menggunakan routing berbasis file, sehingga dengan membuat file di pages/details/[id].jskita telah mengatur routing wildcard kita.

Dalam pages/details/[id].jskita dapat mengambil ID dari URL menggunakan router bawaan 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, mari kita tangani appUrlOpen event dengan Capacitor. Acara ini diaktifkan ketika aplikasi dibuka melalui skema URL kustom. Tambahkan pemangku jawab di 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

Acara ini code mendengarkan dan menavigasi ke jalur yang tepat di dalam aplikasi Next.js Anda. appUrlOpen Pengaturan iOS

Untuk iOS, Anda memerlukan ID aplikasi dengan Domains Asosiasi diaktifkan. Buatlah file

apple-app-site-association dengan konten berikut, menggantikan dan YOURTEAMID context: Halaman/area: Situs web pemasaran Capgo. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman trust.astro. Kunci pesan `dan` (Dan). com.your.bundleid dengan ID tim Anda yang sebenarnya dan ID paket:

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

Unggah file ini ke .well-known direktori di domain Anda, sehingga dapat diakses di https://www.capgo.app/.well-known/apple-app-site-association.

Dalam Xcode, tambahkan domain ke hak akses aplikasi Anda menggunakan format applinks:capgo.app.

Konfigurasi Android

Untuk Android App Links, ikuti langkah-langkah berikut:

Generate file keystore jika Anda tidak memiliki salah satu.
Olehkan SHA256 fingerprint dari keystore.
Buat sebuah file assetlinks.json dengan nama paket dan SHA256 fingerprint Anda.
Unggah file ini ke .well-known direktori di domain Anda.

Dalam aplikasi Anda AndroidManifest.xmltambahkan intent-filter ke activity elemen yang mengelola tautan dalam:

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

Setelah mengunggah file, Anda dapat memverifikasi file tersebut menggunakan alat Digital Asset Links dari Google. Jika semua pengaturan sudah benar, Anda akan melihat tanda centang hijau. assetlinks.json Untuk membangun dan menandatangani aplikasi, gunakan perintah-perintah berikut:

Perintah ini akan menginstal aplikasi yang ditandatangani pada perangkat Android yang terhubung.

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

Konfigurasi untuk Pengaturan Proyek Nativ

Capacitor Configure for Native Project Settings

konfigurasi paket Capacitor configure packageBuat

npm install @capacitor/configure

__CAPGO_KEEP_0__ capacitor.config.yaml file di proyek di root:

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

Jalankan alat konfigurasi dengan konfigurasi ini:

npx cap-config run capacitor.config.yaml

Ini akan menerapkan pengaturan yang ditentukan di file YAML ke proyek native Anda.

Kesimpulan

Mengatur tautan dalam yang Capacitor untuk aplikasi Next.js melibatkan mengonfigurasi domain dan pengaturan proyek untuk kedua iOS dan Android. Meskipun proses ini memerlukan perhatian detail, namun prosesnya lebih sederhana dibandingkan dengan metode yang lebih tua dan tidak memerlukan plugin tambahan. Pastikan file verifikasi domain Anda disajikan dengan benar dan periksa mereka dengan alat-alat platform yang relevan. Setelah diatur, aplikasi Anda akan membuka dengan lancar dari tautan web, memberikan transisi yang halus bagi pengguna Anda dari web ke aplikasi.

Teruskan dari Cara Mengintegrasikan Tautan Universal di Next.js dengan Capacitor

Jika Anda menggunakan Cara Mengintegrasikan Tautan Universal di Next.js dengan Capacitor untuk merencanakan kerja plugin native, hubungkannya dengan Capgo Direktori Plugin untuk alur kerja produk di Capgo Direktori Plugin, Capacitor Plugin oleh Capgo Pengaturan Detail Implementasi di Capacitor Plugins oleh Capgo Tambahkan atau Perbarui Plugins Pengaturan Detail Implementasi di Tambahkan atau Perbarui Plugins Alternatif Plugin Enterprise Ionic Pengaturan Alur Kerja Produk di Alternatif Plugin Enterprise Ionic, dan Capgo Pembangunan Natively Pengaturan Alur Kerja Produk di Capgo Pembangunan Natively.

Bergabung dengan Tautan Universal di Next.js dengan Capacitor