Cara Mengintegrasikan Tautan Universal di Next.js dengan Capacitor

Universal links pada iOS dan App Links pada Android memungkinkan pengguna untuk langsung masuk ke aplikasi Anda dari sebuah link, menghindari browser. Hal ini sangat berguna untuk meningkatkan pengalaman pengguna dan menjaga konteks dari halaman web ke aplikasi. Dalam panduan ini, kita akan menjelajahi proses pengaturan tautan dalam aplikasi ini menggunakan Capacitor. Untuk atribusi dan tautan dalam aplikasi yang tertunda, @capgo/capacitor-appsflyer dapat mengarahkan kampanye instalasi ke layar in-app yang tepat.

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

Pengaturan Tautan dalam Aplikasi Next.js

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

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 Paket secara benar di file capacitor.config.json sebagai hal yang sangat penting untuk pengaturan ini:

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

Untuk routing, Next.js menggunakan routing berbasis file, jadi dengan membuat file di pages/details/[id].jsKita sudah mengatur route wildcard.

Dalam pages/details/[id].jsKita dapat mengambil ID dari URL menggunakan router Next.js yang sudah terintegrasi:

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 appUrlOpen event dengan Capacitor. Event ini dipicu ketika aplikasi dibuka melalui skema URL kustom. Tambahkan listener di file: pages/_app.js Listener ini mendengarkan

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

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

apple-app-site-association Kita sudah mengatur route wildcard. berkas dengan konten berikut, menggantikan YOURTEAMID dan com.your.bundleid dengan ID tim Anda yang sebenarnya dan ID paket:

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

Unggah berkas 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 istimewa aplikasi Anda menggunakan format applinks:capgo.app.

Konfigurasi Android

Untuk Android App Links, ikuti langkah-langkah berikut:

Buat berkas keystore jika Anda tidak memiliki salah satu.
Ambil fingerprint SHA256 dari keystore.
Buat sebuah assetlinks.json file dengan nama paket Anda dan fingerprint SHA256.
Upload file ini ke direktori pada domain Anda. .well-known Pada halaman Anda, tambahkan tag meta ke elemen yang menghandle tautan dalam:

Setelah mengunggah file ini, Anda dapat memverifikasi menggunakan alat Digital Asset Links dari Google. Jika semua pengaturan sudah benar, Anda akan melihat tanda centang hijau. AndroidManifest.xmlUntuk membuat dan menandatangani aplikasi Anda, gunakan perintah-perintah berikut: intent-filter Perintah ini akan menginstal aplikasi yang ditandatangani pada perangkat Android yang terhubung Anda. activity Konfigurasi untuk Pengaturan Proyek Native

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

__CAPGO_KEEP_0__ assetlinks.json __CAPGO_KEEP_0__

__CAPGO_KEEP_0__

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__

Capacitor

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

npm install @capacitor/configure

Buatlah 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 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 lama dan tidak memerlukan plugin tambahan. Pastikan file verifikasi domain Anda disajikan dengan benar dan periksa 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 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.

Bergabunglah dengan Tautan Universal di Next.js dengan Capacitor