Bagaimana Mengintegrasikan Tautan Universal di Next.js dengan Capacitor

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

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

Pengaturan Tautan dalam Next.js

Pertama, kami akan membuat sebuah aplikasi Next.js baru dan sebuah 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 ID aplikasi anda telah menyetel dengan benar dalam file capacitor.config.json , karena hal ini sangat penting untuk pengaturan:

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

For routing, Next.js menggunakan routing berbasis file, jadi dengan membuat file di pages/details/[id].js, kami telah mengatur routing wildcard.

Di pages/details/[id].js, kami dapat mengambil ID dari URL menggunakan router Next.js yang sudah ada:

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

Sekarang, mari kita tangani event appUrlOpen dengan Capacitor. Event ini diaktifkan ketika aplikasi dibuka melalui skema URL kustom. Tambahkan listener di file: 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

This code listens for the appUrlOpen dan menavigasi ke rute yang tepat di dalam aplikasi Next.js Anda.

Konfigurasi iOS

Untuk iOS, Anda memerlukan ID aplikasi dengan Associated Domains diaktifkan. Buatlah apple-app-site-association file dengan isi berikut, menggantikan YOURTEAMID dan com.your.bundleid dengan ID tim dan ID paket Anda yang sebenarnya:

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

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

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

Konfigurasi Android

Untuk Android App Links, ikuti langkah-langkah berikut:

Buat file keystore jika Anda tidak memiliki salah satu.
Ambil tanda tangan SHA256 dari keystore.
Buat assetlinks.json file dengan nama paket dan fingerprint SHA256 Anda.
Unggah file ini ke .well-known di domain Anda.

Dalam AndroidManifest.xml, tambahkan intent-filter ke activity elemen yang menghandle deep link:

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

Sesudah mengunggah file assetlinks.json , Anda dapat memverifikasi menggunakan alat Digital Asset Links dari Google. Jika semuanya sudah terkonfigurasi dengan benar, Anda akan melihat tanda centang hijau.

Untuk membangun dan menandatangani aplikasi Anda, gunakan perintah-perintah berikut:

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

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

Capacitor Konfigurasi untuk Pengaturan Proyek Native

To otomatisasi pengaturan proyek native, pertimbangkan menggunakan Capacitor configure package. Pasangnya di proyek Anda:

npm install @capacitor/configure

Membuat sebuah capacitor.config.yaml file di root proyek Anda:

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 dalam file YAML ke proyek native Anda.

Kesimpulan

Mengatur tautan dalam Capacitor untuk aplikasi Next.js melibatkan mengonfigurasi domain dan pengaturan proyek untuk kedua iOS dan Android. Meskipun prosesnya memerlukan perhatian detail, namun lebih terstruktur dibandingkan dengan metode lama dan tidak memerlukan plugin tambahan. Pastikan file verifikasi domain Anda disajikan dengan benar dan periksa mereka dengan alat platform yang relevan. Setelah diatur, aplikasi Anda akan membuka dengan lancar dari tautan web, memberikan transisi yang halus untuk 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 pekerjaan plugin native, hubungkannya dengan Capgo Direktori Plugin untuk alur kerja produk di Capgo Direktori Plugin, Capacitor Plugin oleh Capgo untuk detail implementasi di Capacitor Plugin oleh Capgo, Menambahkan atau Mengupdate Plugin untuk detail implementasi di Menambahkan atau Mengupdate Plugin, Alternatif Plugin Enterprise Ionic untuk alur kerja produk di Alternatif Plugin Enterprise Ionic, dan Capgo Pembangunan Native untuk alur kerja produk di Capgo Pembangunan Native.