Cara Mengintegrasikan Penghubung Universal di Next.js dengan Capacitor

Penghubung universal di iOS dan Penghubung Aplikasi di 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 halaman web ke aplikasi. Dalam panduan ini, kami akan menjelajahi proses pengaturan penghubung dalam yang dalam menggunakan Capacitor.

Mengatur penghubung 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 memiliki aplikasi Anda membuka halaman yang benar jika sudah terinstal.

Pengaturan Penghubung dalam 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 ID benar diatur di file capacitor.config.json karena hal ini sangat penting untuk pengaturan:

{
  "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].js, kita sudah mengatur routing wildcard.

Di pages/details/[id].js, kita 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

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

Dengan code ini, Anda mendengar event dan menavigasi ke rute yang tepat di dalam aplikasi Next.js Anda. appUrlOpen Konfigurasi iOS

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

apple-app-site-association dengan konten berikut, menggantikan dan YOURTEAMID dengan ID tim dan ID paket Anda yang sebenarnya: com.your.bundleid Unggah file ini ke direktori

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

pada domain Anda, sehingga dapat diakses di .well-known Dalam Xcode, tambahkan domain ke hak istimewa aplikasi Anda menggunakan format https://www.capgo.app/.well-known/apple-app-site-association.

bun applinks:capgo.app.

Konfigurasi Android

Untuk tautan aplikasi Android, ikuti langkah-langkah berikut:

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

Di AndroidManifest.xml, tambahkan intent-filter ke dalamnya activity elemen yang menghandle tautan yang 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:

Ini akan menginstal aplikasi yang ditandatangani pada perangkat Android yang terhubung Anda.

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__ Konfigurasi untuk Pengaturan Proyek Asli

Capacitor Configure for Native Project Settings

__CAPGO_KEEP_0__ paket konfigurasi Capacitor configure packageBuat

npm install @capacitor/configure

file di root proyek Anda: capacitor.config.yaml Jalankan alat konfigurasi dengan konfigurasi ini:

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

Buat

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 mereka dengan alat-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.