Universal links di iOS dan App Links di Android memungkinkan pengguna langsung masuk ke aplikasi Anda melalui sebuah link, tanpa melewati browser. Ini sangat berguna untuk meningkatkan user experience dan menjaga konteks dari halaman web ke aplikasi. Dalam panduan ini, kami akan memandu proses setup deep links ini untuk aplikasi Next.js menggunakan Capacitor. Untuk atribusi dan deferred deep links, @capgo/capacitor-appsflyer dapat mengarahkan kampanye install ke screen in-app yang tepat.
Setup deep links tidak membutuhkan banyak code, namun tetap memerlukan beberapa konfigurasi. Di akhir panduan ini, Anda akan bisa mengklik link seperti https://www.capgo.app/details/22 dan buka aplikasi Anda ke halaman yang tepat jika sudah terinstal.
Setup Deep Link Next.js
Pertama, kita akan buat app Next.js baru dan halaman detail untuk 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 androidPastikan bundle ID sudah diatur dengan benar di capacitor.config.json file, karena ini sangat krusial untuk setup:
{
"appId": "com.capgo.deeplinks",
"appName": "capgoLinks",
"webDir": "out",
"bundledWebRuntime": false
}Untuk routing, Next.js menggunakan file-based routing, jadi dengan membuat file di pages/details/[id].js, kita sudah menyiapkan wildcard route kita.
Di pages/details/[id].js, kita bisa 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 DetailsPageSekarang, mari kita tangani appUrlOpen event dengan Capacitor. Event ini dipicu saat aplikasi dibuka melalui custom URL scheme. Tambahkan listener di file pages/_app.js :
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 MyAppcode ini mendengarkan appUrlOpen event dan melakukan navigasi ke route yang sesuai di dalam aplikasi Next.js Anda.
Konfigurasi iOS
Untuk iOS, Anda memerlukan app ID dengan Associated Domains yang aktif. Buat file apple-app-site-association file dengan konten berikut, ganti dengan YOURTEAMID dan com.your.bundleid dengan team ID dan bundle ID asli Anda:
{
"applinks": {
"apps": [],
"details": [
{
"appID": "YOURTEAMID.com.your.bundleid",
"paths": ["*"]
}
]
}
}Upload file ini ke .well-known direktori di domain Anda, sehingga dapat diakses di https://www.capgo.app/.well-known/apple-app-site-association.
Di Xcode, tambahkan domain ke entitlements aplikasi Anda dengan format applinks:capgo.app.
Konfigurasi Android
Untuk Android App Links, ikuti langkah-langkah berikut:
- Buat file keystore jika Anda belum memilikinya.
- Ambil fingerprint SHA256 dari keystore.
- Buat file assetlinks.json yang berisi package name dan fingerprint SHA256 Anda.
- Upload file ini ke
.well-knowndirektori di domain Anda.
Di AndroidManifest.xml, tambahkan intent-filter ke activity elemen yang menangani 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>Setelah mengunggah file assetlinks.json , Anda bisa memverifikasinya menggunakan tool Digital Asset Links dari Google. Jika semua sudah benar, tanda centang hijau akan muncul.
Untuk build dan sign aplikasi Anda, gunakan 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.apkIni akan menginstal aplikasi yang sudah di-sign ke perangkat Android yang terhubung.
Capacitor Konfigurasi Native Project Settings
Untuk mengotomatiskan native project settings, pertimbangkan menggunakan konfigurasi paket Capacitor. Instal di proyek Anda:
npm install @capacitor/configureBuat 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_NAMEJalankan tool konfigurasi dengan config ini:
npx cap-config run capacitor.config.yamlIni akan menerapkan pengaturan dari file YAML ke native project Anda.
Kesimpulan
Menyiapkan deep links dengan Capacitor untuk aplikasi Next.js melibatkan konfigurasi domain dan pengaturan proyek untuk iOS dan Android. Meski butuh ketelitian, prosesnya lebih ringkas dibanding metode lama dan tidak butuh plugin tambahan. Pastikan file verifikasi domain tersaji dengan benar dan cek menggunakan tool platform masing-masing. Setelah siap, aplikasi Anda akan terbuka mulus dari link web, memberikan transisi yang lancar bagi user dari web ke aplikasi.
Lanjutkan dari Cara Integrasi Universal Links di Next.js dengan Capacitor
Jika Anda menggunakan Cara Integrasi Universal Links di Next.js dengan Capacitor untuk merencanakan pengerjaan native plugin, hubungkan dengan Direktori Plugin Capgo untuk workflow produk di Direktori Plugin Capgo, Plugin Capacitor oleh Capgo untuk detail implementasi di Capacitor Plugins oleh Capgo, Menambah atau Memperbarui Plugin untuk detail implementasi pada Menambah atau Memperbarui Plugin, Alternatif Plugin Ionic Enterprise untuk alur kerja produk di Alternatif Plugin Ionic Enterprise, dan Capgo Native Build untuk alur kerja produk di Capgo Native Builds.
